需要提交两次表单才能使用jQuery AJAX正确发布

Question

我正在尝试使用jQuery AJAX提交表单。 我对这段代码不太满意，所以看不到

问题 -为什么我需要提交两次表单才能发布。

当我提交表单时，textarea会清除回placeholder文本，什么也不会发生。 当我再次单击它时，该帖子将提交并显示。 我有以下textarea和button

<textarea class="add-message-textarea" name="message_body" id="message_textarea" placeholder="Write message"></textarea>
<button class="post-button button" type="submit" name="post_message" id="message_submit">Post</button>

当我提交时，我有以下内容：

$body = '';
if(isset($_POST['post_message'])) {

    if(isset($_POST['message_body'])) {
        $body = $_POST['message_body'];
    }
}

然后调用AJAX：

var userLoggedIn = '<?php echo $userLoggedIn; ?>';
var user_to      = '<?php echo $user_to; ?>';
var body         = '<?php echo $body; ?>'
// var body          = $("#message_textarea").val();

$(document).ready(function() {

    $("#message_submit").click(function(){

    //ajax request for send 'sending a new message' string to dB
    $.ajax({
        url: "includes/handlers/ajax_send_message.php",
        type: "POST",
        data: {'userLoggedIn':userLoggedIn, 'user_to':user_to, 'body':body},
        cache: true,

                success: function(response) {
                  console.log("message_sent");
                }

        }); 
    });
});

ajax_send_message.php看起来像这样简单：

global $con;
if(isset($_POST['userLoggedIn']) && isset($_POST['user_to']) && isset($_POST['body'])) {

    $userLoggedIn = $_POST['userLoggedIn'];
    $body = $_POST['body'];
    $user_to = $_POST['user_to'];
    $date = date("Y-m-d H:i:s");


        $message_obj = new Message($con, $userLoggedIn);
        $message_obj->sendMessage($user_to, $body, $date);
}

我可以使用下面的PHP使它正常工作，但我不希望页面重新加载。

if(isset($_POST['post_message'])) {

    if(isset($_POST['message_body'])) {
        $body = $_POST['message_body'];
        $date = date("Y-m-d H:i:s");
        $message_obj->sendMessage($user_to, $body, $date);
    }
}

任何帮助表示赞赏。

Answer 1

如果要提交表单但阻止重新加载页面，则只需单击提交按钮返回false即可：

$(document).ready(function() {

    $("#message_submit").click(function(){
   //ajax request for send 'sending a new message' string to dB
    $.ajax({
    url: "includes/handlers/ajax_send_message.php",
    type: "POST",
    data: {'userLoggedIn':userLoggedIn, 'user_to':user_to, 'body':body},
    cache: true,
    success: function(response) {
          console.log("message_sent");
         }

    });

    return false;

    });
});

注意：如果要完全阻止提交表单，请在不单击按钮的情况下将事件侦听器附加到表单提交。 用户可以通过按Enter或附加在设备键盘上的其他不可预期的动作等方式提交表单。

$(YOUR_FORM).on("submit",function(){
  //Ajax code here
  return false;
})

Answer 2

我认为问题在于您不会阻止表单提交。 您可以通过以下方法执行此操作： e.preventDefault() .submit(function(e){})回调函数中的.submit(function(e){})

 $("#reg").submit(function(e) { e.preventDefault(); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form id="reg"> <input type="text" name="name" value="Rick"> <input type="text" name="last_name" value="Astley"> <input type="submit"> <form>