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

我希望它不会重复，就像我可以说“ Hey”一样，它在数据库中只存储1个“ Hey”。但是，当我提交消息时说“你好”。它照常在数据库中存储1个“ Hello”。但是，当我向他人发送消息时，我们说“哇”，它在数据库中存储了2个哇，等等。

Answer 1

删除HTML的onclick，如下所示：

<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

保持动作或点击。

如果保持onclick，则将类型更改为button。它应该解决这个问题

提交时复制Ajax表单

2 个答案: