JS实现的ajax发送数据重复

最近在做一个网页聊天室，但是在用ajax实现异步处理的时候，向服务器发送数据发送了两次，导致，我说一句会有两句回复。

先来看一下代码，问题主要还是出现在前端：

        <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()">发送</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向后端发送数据的同时，form表单也想后端发送了数据，而且ajax是异步，但form表单却是同步处理的，这就导致了既向后端发送了两次数据，而且还是同步处理。

只需要把form表单的标签注释掉就可以了。

JS实现的ajax发送数据重复相关推荐

jquery 获取键值对中最大值_jQuery的AJAX发送数据键值对
在我的aspx页面,我对JS是这样的: -jQuery的AJAX发送数据键值对 $("#btnLoad").click(function() { var dataForAjax = ...
JS中的Ajax发送请求获取数据流程
前言: JS两个常用的请求方法 [XMLHttpRequest() .fetch()] XMLHttpRequest() 的使用方法大致可以分为四步: 1.创建XMLHttpRequest的对象成员 ...
Chart.js使用及ajax获取数据
图表插件Chart.js使用插件简介安装插件简介 chart.js是一个优秀的开源图表处理插件,内置条形,折现,雷达,时间刻度等等图表渲染. 安装 chart.js官网. 我这里使用2019年3 ...
如何在js中使用ajax请求数据,在 JS 中怎么使用 Ajax 来进行请求
在 JS 中怎么使用 Ajax 来进行请求发布时间:2021-07-22 09:48:43 来源:亿速云阅读:78 作者:chen 本篇内容介绍了"在 JS 中怎么使用 Ajax 来进行 ...
如何在js中使用ajax请求数据,在 JS 中如何使用 Ajax 来进行请求
做者:Danny Markov 译者:前端小智来源:tutorialzine 点赞再看,微信搜索 [大迁世界]关注这个没有大厂背景,但有着一股向上积极心态人.本文 GitHub https://gi ...
ajax发送数据时的contentType
contentType: 指明发送的data数据(这里是aa)的类型参数值:application/x-www-form-urlencoded(默认) 特点: 以key/value为一组使用& ...
06_通过AJAX发送数据
6.1 基于请求加载数据 6.1.1 追加HTML html: <!DOCTYPE html><html lang="en"><head>< ...
Django10:Ajax介绍/发送数据/SweetAlert
Ajax 异步提交局部刷新发送方式 1. 浏览器输入url,按enter get 2.a标签href属性 get 3.form表单 ...
原生php ajax post_使用原生ajax发送post请求完整案例
搜索热词使用ajax发送数据实现前后台的交互,我想是web开发最基础的技能了.近来dz开发因为不兼容jquery,所以只能使用原生js发送数据,不想还遇到很多问题.在这里分析总结一下.先来一个使用a ...

JS实现的ajax发送数据重复

JS实现的ajax发送数据重复相关推荐

最新文章

热门文章