表单未使用AJAX提交 - Form not submitting with AJAX

=====再次更新====（如果有人关心的话！）无论出于什么原因，我之前发布的解决方案都停止了工作。我在ajax请求中包含了一个beforeSend，并将js中验证表单的部分粘贴到其中。现在工作起来很有魅力！

$('#form').on('submit', function(e) {
e.preventDefault(); //prevents page refresh
         $.ajax({
        type: "post",
        beforeSend: function(){ // check that form is complete
                        },
        url: "client_config_send2.php",
        data: $(this).serialize(),
        success:  function(data){
            alert('Thank you'); hide_request();window.location = "#top";
        }
       });
   });

编辑

请参阅下面的答案，使用2.preventDefault！

我已经读了很多页/例子，但由于某种原因，我无法将其用于"我的"表单。我只是想在不刷新页面或打开确认消息的新页面/选项卡的情况下提交表单。形式：

<form id="form" name="Configurator" method="post" action="">
.... //Client configures his product, display an image if they choose, and request a quote.
<button id="submit_button" type="submit" name="Submit" >Request</button>
</form>

client_config_send2.php可以工作，它只需从表单中提取一组参数（配置、联系信息）并将其放入电子邮件中。在我尝试集成ajax之前，这部分工作得很好。

JS：

$('form').on('submit', function(e) {
e.preventDefault();     
if(!validateForm(this)){
return true;
}
$.ajax({
        type: "post",
        url: "client_config_send2.php",
        data: $(this).serialize(),
        done:  function(data){
            alert("Thank you, we will get back to you shortly");
}
        });
})  

</script>

validateForm（）函数也起作用，它检查配置是否有效，电子邮件/联系人信息是否完整，等等。此时，validateForm有效：如果信息丢失，则会弹出警报。然而，当validateForm（）返回true时，表单不会提交，也不会发生任何事情。

我尝试过成功而不是完成，在JS中返回false而不是true，以及我在网上找到的许多其他东西，但我迷失了方向。以前从未使用过AJAX，所以我对这种语言的微妙之处不是100%有信心！

提前感谢！

"client_config_send2.php"是一个文件名。您提供给Ajax的URL需要是这样的URLhttp://example.com/client_config_send2.php.

成功的改变：

success:  function(data){

success只有在您的请求得到响应并且响应代码为OK（http200）之后才会触发。

更新以下代码：

$('form').on('submit', function(e) {
e.preventDefault();     
if(!validateForm(this)){
return true;
}
var formdata = $(this).serialize();
$.ajax({
        type: "post",
        url: "http://www.example.com/client_config_send2.php",
        data: formdata,
        success:  function(data){
            alert("Thank you, we will get back to you shortly");
}
        });
})  

</script>

是否可以尝试删除/注释event.prventDefault（）；

如果调用此方法，则不会触发事件的默认操作。(http://api.jquery.com/event.preventdefault/)

尝试使用以下格式进行编码。该逻辑使用if/else语句进行ajax调用。

$('form').on('submit', function(e) {
    //If form could not be validated
    if(!validateForm(this)){
       //prevent the form form submitting
        alert("Your form is not valid for submission!");
        e.preventDefault();  
    }
    //else 
    else{
        //form input is valid
        //make the ajax call
        $.ajax({
            type: "post",
            url: "client_config_send2.php",
            data: $(this).serialize(),
            done:  function(data){
                alert("Thank you, we will get back to you shortly");
            }
           });
       }
    });
 });

这是我想要的最终代码：-validateForm（）函数可以正常工作。如果表单不完整，则返回false，弹出警报，并且表单未提交-如果validateForm（）返回true，则提交表单，弹出确认警报，并且页面不会刷新。然后，用户可以构建新配置并提交新请求，而无需重新输入所有联系信息。

2.preventDefault成功了！

$('form').on('submit', function(e) {
e.preventDefault(); //prevents page refresh when form is submitted
//If form could not be validated
var x = validateForm();
if(x == false){
   //prevent the form form submitting
    e.preventDefault();  
}
//else 
else {
    //form input is valid
    //make the ajax call
    $.ajax({
        type: "post",
        url: "client_config_send2.php",
        data: $(this).serialize(),
        success:  function(data){
            alert('Thank you! we will get back to you within 24 hours. Please check your junk / spam folder if you do not receive a response within that time.');
        }
       });
   }
});

感谢大家的帮助！