javascript - 我正在使用 AJAX 发布表单数据，但表单仍然不断提交并刷新页面。我缺少什么？

Question

所以我正在制作一个非常小、非常简单的聊天应用程序，主要使用 JQuery/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>

据我了解，应该将所有表单信息提交到我的操作页面，然后清除输入 - 确实如此。那部分工作正常。我正在获取我的数据。

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

这方面有什么帮助吗？谢谢。

Answer 1

解决方案 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">