javascript - $.post() 有时需要 2 次提交才能发送数据

Question

我已经研究了几天，但未能找到解决此问题的方法。这是问题所在:

我有一个提交要处理/插入到数据库中的消息的表单。该表单使用 $.post() 来提交消息。

有时它工作得很好，但偶尔(看起来完全随机)——我将不得不按两次提交按钮来让数据通过。我第一次按下提交按钮时，它“看起来”已经提交，因为表单像正常一样清除，等等——但数据没有发送。如果我再次单击提交按钮(没有在输入中输入任何内容)，它将发送我之前尝试提交一次的消息。我希望这是有道理的。

换句话说，大多数时候我可以输入一条消息，点击提交 1 次，就可以正常工作。但随机地，我将不得不多次点击提交才能让数据真正提交。

有时，“故障”会连续发生不止一次。发生这种情况时，我必须一遍又一遍地点击提交，直到发送完所有消息。好像他们以某种方式排队？

这是我用来提交数据的函数:

function postMsg() {
    $.post("index.php", {
        message: $("[name='message']").val()
    });
    document.m.message.focus();
    return false;
}

我正在使用的表单标签:

<form class="form-inline"  id="m"  name="m" method="post" onSubmit="postMsg();clear_form();return false">

为了以防万一出于某种原因需要它，我正在使用的 clear_form() 函数:

function clear_form() {
    document.getElementById('message').value = '';
}

如果有人能帮助我指出正确的方向，我将不胜感激。

已更新以包括 Crone 提供的功能——它可以工作，但仍然存在在数据通过之前需要多次提交的问题:

    jQuery("#m").submit(function(e) {

e.preventDefault();

jQuery.post("index.php", {
    message: jQuery("[name='message']").val()
});

document.m.message.focus();

clear_form();
});

更新 - 添加了我用来在显示中加载消息的功能。这称为 onLoad，当提交新消息时，它会抓取并显示新数据。

function loadMainDisplay(){
    $( "#innercontrols" ).load( "includes/controls.php" );
scrollToBottom();
}

“controls.php”只是一个文件，它从 mysql 数据库中获取消息并以正确的格式将它们回显出来。

在我的 index.php 顶部(功能/表单所在的位置)，我检查是否使用输入类提交了任何输入，它看起来像这样:

if(Input::exists()){
    $message = Input::get('message');
... validate and insert into db if ok
}

如果您想要一个指向实际页面的链接以直接查看问题，请告诉我，我会发送一封带有链接的私有(private)消息。

Answer 1

jQuery('form [type="submit"]').on('click', function(e) {

e.preventDefault();

jQuery.post("index.php", {
    message: jQuery("[name='message']").val()
});

document.m.message.focus();

clear_form();
});

支持“Enter”按钮的版本:

jQuery("form").on('submit', function(e) {

e.preventDefault();

jQuery.post("index.php", {
    message: jQuery("[name='message']").val()
});

document.m.message.focus();

clear_form();
});