最近在做一個網頁聊天室，但是在用ajax實現異步處理的時候，向服務器發(fā)送數據發(fā)送了兩次，導致，我說一句會有兩句回復。

先來看一下代碼，問題主要還是出現在前端：

<form id="data" method="post"><label><textarea class="chat_bottom" id="text" name="text"></textarea></label><input class="image" id="image" type="file" name="image"><label class="image_box" for="image"></label><button class="submit" id="submit" type="submit" onclick="chat()">發(fā)送</button>{% csrf_token %}</form><script>function chat() {var text = document.getElementById("text").value;var xmlhttp = createXMLHttpRequest();xmlhttp.open("POST","/webpage/Control/",true);xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");xmlhttp.send("text="+text);xmlhttp.onreadystatechange = function () {if(xmlhttp.readyState === 4 && xmlhttp.status === 200){var temp = xmlhttp.responseText;console.log(temp);alert(temp);document.getElementById("mine_msg").innerHTML=text;document.getElementById("robot_msg").innerHTML=temp;}}}function createXMLHttpRequest() {var xmlHttp;try{xmlHttp = new XMLHttpRequest(); // 適用于大多數瀏覽器，以及IE7和IE更高版本} catch (e) {try {xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); // 適用于IE6} catch (e) {try{xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); // 適用于IE5.5，以及IE更早版本} catch (e){}}}return xmlHttp;} </script>

問題其實出現在form表單上，我用JS實現ajax向后端發(fā)送數據的同時，form表單也想后端發(fā)送了數據，而且ajax是異步，但form表單卻是同步處理的，這就導致了既向后端發(fā)送了兩次數據，而且還是同步處理。

只需要把form表單的標簽注釋掉就可以了。

總結

以上是生活随笔為你收集整理的JS实现的ajax发送数据重复的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。