Javascript I'；我用AJAX发布表单数据，但表单仍会不断提交和刷新页面。我错过了什么？

因此，我正在使用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>

$（'.chat_form'）。提交（函数（）{
$.ajax({
url:“runMe.cfm”，
类型：“POST”，
数据：$（'.chat_form'）.serialize（），
成功：函数（）{
$（'.chat_form input'）.val（''）；
}
});
});

据我所知，这应该是将所有表单信息提交到我的操作页面，然后清除输入-它确实如此。那部分很好用。我正在获取我的数据

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

---

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

默认情况下，您有事件的传播，您可能需要一个或两个调用：

                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('');
        }
    });
});

---

$（'.chat_form'）.submit（函数（e）{/默认情况下，您有事件的传播，您可能需要一个或两个调用：

                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('');
        }
    });
});

$（'.chat_form'）.submit（函数（e）{/您需要调用的
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
});

您需要调用
e.preventDefault（）
for，因为您只能从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
});

解决方案1：

通过添加
e.preventDefault（）；

例如：

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

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

解决方案2

或者，通过在表单标记中添加少量javascript
onsubmit=“return false”
code：

例如：

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

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

解决方案1：

通过添加
e.preventDefault（）；

例如：

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

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

解决方案2

或者，通过在表单标记中添加少量javascript
onsubmit=“return false”
code：

例如：

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

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


除了下面的答案之外，附加事件处理程序的代码应该包装在DOM就绪处理程序中，或者包含在页面底部。这可以确保目标
表单
存在于页面中，否则事件处理程序将不会附加到表单。除了下面的答案之外，附加事件处理程序应包装在DOM就绪处理程序中，或包含在页面底部。这可确保页面中存在目标
表单
，否则事件处理程序将不会附加到表单。