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

默认情况下，您可以传播事件，您可能需要其中一个或两个：

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

Answer 2

您需要致电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
});

Answer 3

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

我正在使用AJAX发布表单数据，但表单仍然保持提交和刷新页面。我错过了什么？

3 个答案: