Дублирование формы Ajax при отправке

Question

Итак, я пытаюсь создать приложение чата, и я знаю, что люди уже задавали этот вопрос, но, похоже, это не решает мою проблему.

Я уже пытался добавить функцию beforeSendно, похоже, это не решает проблему.

HTML-код:

<form method="post" id="message_form" action="insert_msg.php">
      <textarea placeholder="Type your message..." style="width: 550px;" id="messagea" name="messagea"></textarea>
      <div id="galilei">
        <button class="msg_send_btn" type="submit" name="send_msg" onclick="ref(); SubmitFormData();"><i class="fa fa-paper-plane-o" aria-hidden="true"></i></button>
      </div>
</form> 

Ajax-код:

$(document).ready(function() {
    $.ajaxSetup({ cache: false });
    setInterval(function() {
    $('#msg_history').load('msg_history.php');
    }, 500);
  });

  function ref() {
    $(document).ready(function() {
    $.ajaxSetup({ cache: false });
    setTimeout(function() {
      $('#message_form').load('form.php');
    }, 500);
  });
  }

  function scroll() {
    $(".msg_history").animate({ scrollTop: $(this).height() }, "slow");
      return false;
  }

  function SubmitFormData() {
    var frm = $('#message_form');
    frm.submit(function (ev) {
        $.ajax({
            method:"POST",
            url:"insert_msg.php",
            data: frm.serialize(),
            beforeSend: function(){
              $('#galilei').html("Ajax Request is Processing!");
            },
            success: function (data) {
            }
        });

        ev.preventDefault();
    });
  }

Я ожидал, что он не будет дублироваться, как яМожно сказать «Эй», и он хранит только 1 «Эй» в базе данных. Но когда я отправляю сообщение, скажите «Привет». как обычно, в базе данных хранится 1 «Hello». Но, когда я сообщаю другому, скажем, «Вау», он сохраняет 2 вау в базе данных и т. Д.

Answer 1

Удалите onclick вашего html, чтобы он выглядел следующим образом:

<form method="post" id="message_form" action="insert_msg.php">
      <textarea placeholder="Type your message..." style="width: 550px;" id="messagea" name="messagea"></textarea>
      <div id="galilei">
        <button class="msg_send_btn" type="submit" name="send_msg"><i class="fa fa-paper-plane-o" aria-hidden="true"></i></button>
      </div>
</form> 

И измените свой JS на это:

$(document).ready(function() {
    $.ajaxSetup({ cache: false });
    setInterval(function() {
      $('#msg_history').load('msg_history.php');
    }, 500);
  });

  $(document).on('submit', '#message_form', function(e) {
    e.preventDefault();
    var frm = $(this);
    $.ajax({
      method:"POST",
      url:"insert_msg.php",
      data: frm.serialize(),
      beforeSend: function(){
        $('#galilei').html("Ajax Request is Processing!");
      },
      success: function (data) {
        $('#message_form').load('form.php');
      }
    });
  });

  function scroll() {
    $(".msg_history").animate({ scrollTop: $(this).height() }, "slow");
      return false;
  }
}

Объяснение Мы добавляем слушателя в документ, чтобы прослушать событие отправки формы и перехватить его. Затем мы отправляем эти данные по ajax. Только после этого мы снова отображаем форму. Лично я бы не удалил форму из DOM, а просто скрыл ее, например:

$(document).ready(function() {
    $.ajaxSetup({ cache: false });
    setInterval(function() {
      $('#msg_history').load('msg_history.php');
    }, 500);
  });

  $('#message_form').on('submit', function(e) {
    e.preventDefault();
    var frm = $(this);
    var message = $('<div>Ajax Request is Processing!</div>');
    $.ajax({
      method:"POST",
      url:"insert_msg.php",
      data: frm.serialize(),
      beforeSend: function(){
        frm.hide();
        frm.insertAfter(message);
      },
      success: function (data) {
        message.remove();
        frm.show();
      }
    });
  });

  function scroll() {
    $(".msg_history").animate({ scrollTop: $(this).height() }, "slow");
      return false;
  }
}

Answer 2

Либо продолжайте действовать, либо нажимайте.

Если вы продолжаете нажимать, измените тип на кнопку. Это должно решить проблему