javascript – jQuery $.get()不会在表单提交时执行

提交表单时,我想异步调用带有一些$_GET参数的电子邮件发送脚本order.php.

jQuery $.get()函数不执行,控制台中没有显示错误.

HTML标记：

<form name="submit" id="orderconfirm" action="somefile.php">
<input type="hidden" name="orderkey" id="orderkey" value="somekey"/>
<input type="text" name="email" id="orderemail"/>
<input type="submit" value="submit"/>
</form>

jQuery脚本：

$(document).ready(function() {

$('#orderconfirm').submit(function() {
   var key = $('#orderkey').val();
   var email = $('#orderemail').val();
   var url = 'order.php?key=' + key + '&mail=' + email;
   $.get(url);
});

});

这真的很奇怪,因为类似的脚本(也是带有简单URL的$.get())工作得很好.我也确定order.php脚本工作正常,路径正确.问题是不会以某种方式执行$.get(url)并且不会发送任何请求.

提交处理程序也可以正常工作 – 例如警报有效.

有任何想法吗？

解决方法:

使用preventDefault()防止默认浏览器操作

$(document).ready(function() {    
    $('#orderconfirm').submit(function(event) {
       event.preventDefault();
       var key = $('#orderkey').val();
       var email = $('#orderemail').val();
       var url = 'order.php?key=' + key + '&mail=' + email;
       $.get(url);
    });    
});

Documentation

你也可以使用return false;限制表单提交

$(document).ready(function() {    
    $('#orderconfirm').submit(function(event) {
       var key = $('#orderkey').val();
       var email = $('#orderemail').val();
       var url = 'order.php?key=' + key + '&mail=' + email;
       $.get(url);
       return false;
    });    
});

要在$.get之后提交表单,试试这个,

$(document).ready(function() {    
    $('#orderconfirm').submit(function(event) {
       event.preventDefault();
       var key = $('#orderkey').val();
       var email = $('#orderemail').val();
       var url = 'order.php?key=' + key + '&mail=' + email;
       $.get(url,function(){$('#orderconfirm').submit()});
    });    
});

Documentation

标签：html,javascript,jquery,form-submit
来源： https://codeday.me/bug/20190722/1507572.html