jQuery $.get()在表单提交时没有执行

Question

当一个表单提交时，我想要异步调用一个发送邮件的脚本 order.php 并带有一些$_GET参数。

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)没有被执行，也没有发送请求。

提交处理程序也正常工作 - 例如警报已经起作用了。

有任何想法吗？

- user3099306

---

.submit(function(e) { e.preventDefault(); ... - jgroenen

问题出现在浏览器默认提交表单的行为上。您需要阻止默认行为的执行。可以选择性地更改按钮类型并尝试解决问题。 - Joe

Answer 1

使用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);
    });    
});

文档

同时，您可以使用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

- Pranav C Balan

---

如果您想提交表单，除了使用$.get之外，您可能还需要手动提交表单。 - bansi

我该如何手动提交表单？因为现在 $.get 已经可以正常工作，但是表单没有被提交。 - user3099306

使用preventDefault()解决了$.get()的问题，但它阻止了表单的提交。在$.get()执行后，如何使表单提交？ - user3099306

尝试使用这个代码：$.get(url,function(){$('#orderconfirm').submit()}); - Pranav C Balan

Answer 2

因为您没有阻止浏览器的默认行为。请添加event.preventDefault方法：

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

- Alex

Answer 3

尝试这个。

$('#orderconfirm').submit(function(e) {
   e.preventDefault();

})

并使用有效的 $.get

$.get( "order.php", {'key':key,'mail': email});

- saman khademi

Answer 4

使用 return false 或 e.preventDefault()，例如：

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

- Rohan Kumar

Answer 5

$(document).ready(function() {

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

});

问题出现在浏览器默认表单提交行为上。您需要防止默认行为的执行。 如果需要，甚至可以更改按钮类型为“submit”并尝试。

- Joe

Answer 6

你有两种方法来解决这个问题。
1. 使用e.preventDefault();来防止浏览器默认行为提交表单。

    $('#orderconfirm').submit(function(e) { // 'e' here is new
       var key = $('#orderkey').val();
       var email = $('#orderemail').val();
       var url = 'order.php?key=' + key + '&mail=' + email;
       $.get(url);
       e.preventDefault(); // and this line is new
    });

2. 或者将 submit 类型更改为 button。

    <input type="button" value="submit"/>

顺便说一下，您可以将值作为参数传递，而不是字符串。 jQuery.get()

$('#orderconfirm').submit(function(e) {
   var key = $('#orderkey').val();
   var email = $('#orderemail').val();
   var page = 'order.php';
   $.get(page, {mail: email, key: key}); // this line
   e.preventDefault(); 
});

- Siamak Motlagh

Answer 7

试试这个

$.get( "order.php", { key: key , mail: email } );

- NLSaini