我使用AJAX发布表单数据，但表单始终提交并刷新页面。我错过了什么？

问题描述：

因此，我正在制作一个非常小巧，非常简单的聊天应用程序，主要使用JQuery/AJAX。我使用AJAX发布表单数据，但表单始终提交并刷新页面。我错过了什么？

这是我的HTML表单。

<form class="chat_form" method="post" id="chat_form" autocomplete="off"> 
<input class="form-control" type="text" name="chatMe" placeholder="Type here..." autocomplete="off"> 
<input type="submit" value="Submit" name="submit"> 
</form>

这里是我的脚本：

<script type="text/javascript"> 
$('.chat_form').submit(function(){ 
    $.ajax({ 
     url: "runMe.cfm", 
     type: "POST", 
     data: $('.chat_form').serialize(),  
     success: function() { 
      $('.chat_form input').val(''); 
     } 
    }); 
}); 
</script>

据我了解，这是应该提交所有形式的信息，我的操作页面，然后清除输入 - 和它的作用。这部分工作正常。我收到我的数据。

但是无论何时我提交表单，整个页面都会重新加载，就好像它忽略了我的代码的关键部分。

该部分的任何帮助？谢谢。

除了下面的答案，你的码附加事件处理程序应该被包裹在DOM准备处理程序，或者被包括在底部的页面。这可以确保目标'form'存在于页面中，否则事件处理程序将不会附加到表单上。 – jmoerdyk

答

溶液1：

通过添加e.preventDefault();

实施例：

$('.chat_form').submit(function(e){ 
    e.preventDefault(); 
    //ajax code here 
});

溶液2

或者，通过在表格标签添加小的javascript onsubmit="return false"代码：

实施例：

<form class="chat_form" method="post" id="chat_form" autocomplete="off" onsubmit="return false">

很多很好的答案，但你为简单得分。 – TRose

答

您有预设事件的传播，你可能需要这些调用的一个或两个：

   e.preventDefault(); 
       e.stopPropagation();

当submit()就是所谓的对象上，它不会停在那里。它将随后调用默认的，所以你要添加参数，然后做这些电话在：

$('.chat_form').submit(function(e){ // <- add parameter here 

    e.preventDefault(); 
    e.stopPropagation(); 

    $.ajax({ 
     url: "runMe.cfm", 
     type: "POST", 
     data: $('.chat_form').serialize(),  
     success: function() { 
      $('.chat_form input').val(''); 
     } 
    }); 
});

答

你需要调用e.preventDefault()用于只能从JavaScript代码提交表单。

$('.chat_form').submit(function(e){ 
    $.ajax({ 
     url: "runMe.cfm", 
     type: "POST", 
     data: $('.chat_form').serialize(),  
     success: function() { 
      $('.chat_form input').val(''); 
     } 
    }); 
    e.preventDefault() // put that line of code here or on last line on success function 
});

我使用AJAX发布表单数据，但表单始终提交并刷新页面。我错过了什么？

相关推荐