无需提交即可获取表单网址答案

【问题标题】：Get form url without submit无需提交即可获取表单网址
【发布时间】：2017-03-25 17:05:03
【问题描述】：

当涉及到 JQuery 或 Javascript 时，我是一个新手——如果这是一个简单的问题，我很抱歉......

基本上，我有一个 GET 表单——我需要拦截它——这意味着当按下提交按钮时，我需要调用 javascript 而不是实际提交表单。我想将完整的 URL 作为输出...类似于...

http://server/cgi-bin/status.py?val=1223&val2=434334&val3=4343

表格-

基本上，我需要表单来处理 URL，就好像它会提交但不提交一样。主要要求是将此链接小瓶邮件发送给客户，以便他们可以使用此链接跟踪工作进度

谢谢，王子

【问题讨论】：

什么是网址？这是您表单中的一个字段吗？
您好，欢迎来到 SO。我认为您可能需要查看此链接，以便从该组中获得更好的结果。 stackoverflow.com/help/how-to-ask

标签： javascript jquery html ajax forms

【解决方案1】：

如果您需要使用 javascript 处理表单并阻止提交，您需要在用户按下提交按钮时在表单上发生的 submit 事件上添加一个侦听器。只需将id 属性添加到您的表单元素：

<form method="get" id="myForm">
...
</form>

然后添加监听器：

<script>
$(function(){
    $("#myForm').on('submit', function(event) {
        event.preventDefault(); // This line prevents the normal behaviour of the submit button

        var queryString = $(this).serialize(); // This will generate a query string like so : "val=1223&val2=434334&val3=4343"

        var url = "http://server/cgi-bin/status.py?" + queryString; // Now you have the full URL

        // Then you can send an AJAX request to a server-side script that will send the mail
        $.ajax({
            url: 'http://server/cgi-bin/email.py', // Your e-mailing script
            method: 'POST', // or GET whatever
            data: {
                url: url,
                email: 'recipient@domain.com'
            },
            ...
        })

    })
})


</script>

【讨论】：

OP 希望 url 为 path_to_the_script + query_string。您的代码返回当前文档的 url + query_string

【解决方案2】：

这可以通过这样的方式来完成

 $('form').on('submit', function(event) {
    var url = '<insert-path-to-desired-script>?' + $(this).serialize();

    event.preventDefault();
});

event.preventDefault() 确保表单实际上并未提交。

url 然后包含一个完整的 url，其中包含所有表单属性。

【讨论】：

OP 希望 url 为 path_to_the_script + query_string。您的代码返回当前文档的 url + query_string