Javascript 提交时复制Ajax表单

所以我正在尝试创建一个聊天应用程序，我知道人们已经问了这个问题，但它似乎无法解决我的问题

我已经尝试在发送之前添加一个

函数，但这似乎无法解决问题

HTML代码：



Ajax代码：

$（文档）.ready（函数（）{
$.ajaxSetup（{cache:false}）；
setInterval（函数（）{
$（'msg#u history'）.load（'msg#u history.php'）；
}, 500);
});
函数ref（）{
$（文档）.ready（函数（）{
$.ajaxSetup（{cache:false}）；
setTimeout（函数（）{
$（'#message_form'）.load（'form.php'）；
}, 500);
});
}
函数滚动（）{
$（“.msg_history”）.animate（{scrollTop:$（this.height（）}，“slow”）；
返回false；
}
函数SubmitFormData（）{
var frm=$（“#消息形式”）；
提交财务报表（功能（ev）{
$.ajax({
方法：“张贴”，
url:“insert_msg.php”，
数据：frm.serialize（），
beforeSend:function（）{
$（'#galiley'）.html（“Ajax请求正在处理！”）；
},
成功：功能（数据）{
}
});
ev.preventDefault（）；
});
}

我希望它不会重复，就像我可以说“嘿”，它在数据库中只存储1个“嘿”。但是，当我提交一条消息说“你好”时，它会像往常一样在数据库中存储1个“你好”。但是，当我发送另一条消息时，让我们说“哇”，它在数据库中存储了2个Wow，等等。
要么保留操作，要么单击

如果保持onclick，则将类型更改为button。它应该解决问题
删除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> 

解释
我们向文档添加一个侦听器，以侦听表单提交事件并截获它。然后我们通过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;
  }
}

$（文档）.ready（函数（）{
$.ajaxSetup（{cache:false}）；
setInterval（函数（）{
$（'msg#u history'）.load（'msg#u history.php'）；
}, 500);
});
$（“#消息_表单”）。关于（'submit'，函数（e）{
e、 预防默认值（）；
var frm=$（本）；
var message=$（'Ajax请求正在处理！'）；
$.ajax({
方法：“张贴”，
url:“insert_msg.php”，
数据：frm.serialize（），
beforeSend:function（）{
frm.hide（）；
frm.insertAfter（消息）；
},
成功：功能（数据）{
message.remove（）；
frm.show（）；
}
});
});
函数滚动（）{
$（“.msg_history”）.animate（{scrollTop:$（this.height（）}，“slow”）；
返回false；
}
}
每次调用
SubmitFormData（）
时，您都会添加一个新的提交事件侦听器。每个侦听器将发送自己的请求。一个简单的修复方法是不要在
onclick
中调用它，只在页面加载时调用它一次，这似乎已经修复了它，但现在，它将我发送到insert_msg.php页面，因此。。。你能帮我吗？听起来你只是从按钮中删除了，但在页面加载时没有调用该函数…所以默认的表单提交过程正在进行。这没有意义。解释一下你为什么认为这会有帮助。当你点击submit按钮时，哪个按钮会被称为insert msg或ref。你试图达到的目标是不正确的。您正在一次单击调用两个操作。@Nytraxaqw是否删除了onclick或action？
$(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;
  }
}