javascript - 无需提交即可获取表单网址

Question

我是 JQuery 或 Javascript 的新手——如果这很简单，我深表歉意...

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

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

表格-

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

谢谢，王子

Answer 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>