ajax异步提交有时会出现无bug的数据处理异常-----debug没有问题，正常运行却数据处理不正确，极少机会会出现正常的处理结果

25-02-20 17

本篇文章给大家谈谈ajax异步提交有时会出现无bug的数据处理异常-----debug没有问题，正常运行却数据处理不正确，极少机会会出现正常的处理结果，同时本文还将给你拓展ajax在debug和ale

本篇文章给大家谈谈ajax异步提交有时会出现无bug的数据处理异常-----debug没有问题，正常运行却数据处理不正确，极少机会会出现正常的处理结果，同时本文还将给你拓展ajax 在debug和alert时都正确但是直接运行却报错、ajax异步提交后出现卡死现象、ajax数据处理、ajax的使用方法_例题、ajax的数据处理等相关知识，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

ajax异步提交有时会出现无bug的数据处理异常-----debug没有问题，正常运行却数据处理不正确，极少机会会出现正常的处理结果
ajax 在debug和alert时都正确但是直接运行却报错
ajax异步提交后出现卡死现象
ajax数据处理
ajax的使用方法_例题、ajax的数据处理

ajax异步提交有时会出现无bug的数据处理异常-----debug没有问题，正常运行却数据处理不正确，极少机会会出现正常的处理结果

ajax 被使用时，常默认的就使用了异步处理。

当遇到后面的代码对同样的数据进行处理或要依赖前面ajax处理的结果时，就会导致数据处理结果不正确，未达到预期值。

且，debug时却能正常完成功能，得到预期值。再就是多次测试，又有很少的机会会出现正确数据结果。

这就是ajax异步和同步的问题，

debug时程序一直处于同步的过程中执行代码。所以设置的异步被无效化，看不到数据处理的异样。

不debug时，就会出现数据处理的顺序不对，导致结果不对。

解决方法就是将ajax的属性async 改为 false 即：同步

//jquery的async:false,这个属性 
//默认是true：异步，false：同步。

function submit_adjust(){
            $.ajax({
                  type: "post",url: basePath + "/provinceKpi/submitAdjust.do",contentType: "application/json; charset=utf-8",data:JSON.stringify($(‘#form_dialog‘).serializeObject()),dataType: ‘JSON‘,async: false,success: function (data) {
                      alert("调整成功，并记录！");
                  },error: function () {
                      alert(‘调整数据提交失败‘);
                  },complete: function () {

                  }
              });
        }

//调整按钮的点击事件
function adjustment(){
     BootstrapDialog.show({
         title: ‘kpi数据调整‘,size :BootstrapDialog.SIZE_WIDE,message: $(‘<div></div>‘).load(basePath + ‘/provinceKpi/dialog/adjust_dialog.do‘,{limit: 25},function(data){
         }),buttons: [
                   {
                       label: ‘确认调整‘,action: function(dialog) {
                           if(confirm("确认调整?")){
                               submit_adjust();
                               dialog.close();
                               $("#grid").bootstrapTable(‘refresh‘);
                           }
                       }
                   },{
                       label: ‘关闭‘,action: function(dialog) {
                           dialog.close();
                       }
                   }]
     });
}

//上面代码是我在开发中遇到的   
/*先调用submit_adjust()方法，然后 接着又刷新了列表，这两个方法处理的是同一个表的数据，如果ajax采用了默认的异步就会出现数据处理错误的现象*/

ajax 在debug和alert时都正确但是直接运行却报错

今天遇到一个问题.我写了一段ajax代码,当我debug调试的时候结果正确.但是直接运行的时候却反悔错误结果.当我不debug在代码中执行alert的时候也正确.下面是代码.

$.validator.addMethod("isUniq",function(value,element){
var flag = false;
var start = $("#start").val();
var end = $("#end").val();
if(end!= null && "" != end && start != null && "" != start){
$.ajax({
url:"/upgrade-ticket/upgradeTicket/isUniq?timestamp="+ new Date().getTime(),
type:"POST",
data:"&start="+start+"&end="+end,
success:function(data){
if("none" == data){
flag = true;
}else{
flag = false;
}
}
});
}
return flag;
},"该区域号码已被添加,请重新输入.");

针对这个问题,有人说是变量没有赋初始值,但是我的有指定初始值false.原来是ajax同步异步的问题.从ajax的名字就能得知,默认就是异步的.同步需要等待返回结果才能继续，异步不必等待，一般需要监听异步的结果.而此程序就是还没有等待返回结果.所以if中的赋值不起作用.直接return false了.当加入async:false,后,代码执行正确.这一句的作用就是改成同步.完整代码如下:

$.validator.addMethod("isUniq",
async:false,
data:"&start="+start+"&end="+end,请重新输入.");

为什么debug时和有alert操作就执行正确结果?

因为这连个都是阻塞操作,他能等到服务器返回值.

ajax异步提交后出现卡死现象

本人是做电视节目站点开发，最近出现一个问题，异步提交后，页面一直在缓冲，出现卡死现象，

在电脑测试一切正常，感觉很郁闷，代码什么没有问题，后发现是ajax问题。

ajax分为同步提交和异步提交。以下是两个方法区别。

异步方法：

functiongetJSON2(){
vartmp;
varxmlHttpRequest=createAjaxObject();
xmlHttpRequest.open('GET',url,true);//GET即采用get方法，url为请求的地址，true设置为异步，默认就是异步，所以也可以不用写
xmlHttpRequest.send(null);
xmlHttpRequest.onreadystatechange=function(){//注册回调函数
//readyState有四种可能值：0——请求未初始化（在调用open()之前），1——请求已提出（调用send()之前），2——请求已发送（这里通常可以从响应得到内容头部），3——请求处理中，4——请求已完成。
if(xmlHttpRequest.readyState==4){
if(xmlHttpRequest.status==200){
alert(xmlHttpRequest.responseText);
//varjson=eval('('+xmlHttpRequest.responseText+')');
//alert(json.Stops[0].StopName);
//tmp=json.Stops[0].StopName;
//alert(tmp);//有值
}
}
//alert(tmp);//没有值
xmlHttpRequest=null;
}
同步方法：

functiongetJSON2(){
vartmp;
varxmlHttpRequest=createAjaxObject();
false);//GET即采用get方法，url为请求的地址，false设置为同步，默认就是异步，所以也可以不用写
null);
varresult=xmlHttpRequest2.status;
if(result==200){
alert(xmlHttpRequest.responseText);
//varjson=eval('('+xmlHttpRequest.responseText+')');
//alert(json.Stops[0].StopName);
//tmp=json.Stops[0].StopName;
//alert(tmp);//有值
}
//alert(tmp);//有值,成功，但是破坏了ajax异步的初衷。
null;
}

总结：对于一些数据的获取，同步必须要等到服务器的响应。如果是异步(true)，返回值是null，因为程序执行完send后不等xmlhttp的响应，而继续执行下一条js语句，所以tmp还没有来的及变化就已经返回null了。所以如果想获得xmlhttp返回值必须用同步，异步无法得到返回值。这就是为什么我在后面的操作一直取不到这个函数的返回值的缘故了。ajax的同步破坏了ajax异步的初衷，除非忘不得已（比如需要对响应的数据进行进一步处理）才使用。
还有，同步异步使用xmlhttp池时都要注意：取得xmlhttp时只能新建xmlhttp，不能从池中取出已用过的xmlhttp，（这种情况主要发生在需要循环的时候）因为被使用过的xmlhttp的readyState为4，所以同步异步都会send但不执行onreadystatechange。

ajax数据处理

HTML

andy.html

<h2><a href="mailto:andy@clearleft.com">Andy Budd</a></h2>
<a href="http://andybudd.com/">http://andybudd.com/</a>

<h2><a href="mailto:jeremy@clearleft.com">Jeremy Keith</a></h2>
<a href="http://adactio.com/">http://adactio.com/</a>

<h2><a href="mailto:richard@clearleft.com">Richard Rutter</a></h2>
<a href="http://clagnut.com/">http://clagnut.com/</a>

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<Meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>People at Clearleft</title>
<style type="text/css">
@import url("clearleft.css");
</style>
<script type="text/javascript"></script>
<script>
	window.onload = function() {
		var aNodes = document.getElementsByTagName("a");
		for (var i = 0; i < aNodes.length; i++) {
			aNodes[i].onclick = function() {
				var request = new XMLHttpRequest();
				var method = "GET";
				var url = this.href;

				request.open(method,url);
				request.send(null);

				request.onreadystatechange = function() {
					if (request.readyState == 4) {
						if (request.status == 200 || request.status == 304) {
							document.getElementById("details").innerHTML = request.responseText;
						}
					}
				}
				return false;
			}
		}
	}
</script>
</head>
<body>
	<h1>People</h1>
	<ul>
		<li><a href="files/andy.html">Andy</a></li>
		<li><a href="files/richard.html">Richard</a></li>
		<li><a href="files/jeremy.html">Jeremy</a></li>
	</ul>
	<div id="details"></div>
</body>
</html>

XML

andy.xml

<?xml version="1.0" encoding="utf-8"?>
<details>
  <name>Andy Budd</name>
  <website>http://andybudd.com/</website>
  <email>andy@clearleft.com</email>
</details>

<?xml version="1.0" encoding="utf-8"?>
<details>
  <name>Jeremy Keith</name>
  <website>http://adactio.com/</website>
  <email>jeremy@clearleft.com</email>
</details>

<?xml version="1.0" encoding="utf-8"?>
<details>
  <name>Richard Rutter</name>
  <website>http://clagnut.com/</website>
  <email>richard@clearleft.com</email>
</details>

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">  <head>
  <Meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>People at Clearleft</title>
  <style type="text/css">
  	@import url("clearleft.css");
  </style>
  <script type="text/javascript">
	window.onload = function() {
		var aNodes = document.getElementsByTagName("a");
		for (var i = 0; i < aNodes.length; i++) {
			aNodes[i].onclick = function() {
				var request = new XMLHttpRequest();
				var method = "GET";
				var url = this.href;

				request.open(method,url);
				request.send(null);

				request.onreadystatechange = function() {
					if (request.readyState == 4) {
						if (request.status == 200 || request.status == 304) {
							//结果为xml格式，所以需要使用responseXML来获取
							var result=request.responseXML;
							//结果不能直接使用，必须先创建对应的节点，再把节点加入到#details中
							var name=result.getElementsByTagName("name")[0].firstChild.nodeValue;
							var website=result.getElementsByTagName("website")[0].firstChild.nodeValue;
							var email=result.getElementsByTagName("email")[0].firstChild.nodeValue;
							
							//alert(name);
							//alert(website);
							//alert(email);
							/*
							<h2><a href="mailto:andy@clearleft.com">Andy Budd</a></h2>
							<a href="http://andybudd.com/">http://andybudd.com/</a>
							*/
							var aNode=document.createElement("a");
							aNode.appendChild(document.createTextNode(name));
							aNode.href="mailto:"+email;
							
							var h2Node=document.createElement("h2");
							h2Node.appendChild(aNode);
							
							var aNode2=document.createElement("a");
							aNode2.appendChild(document.createTextNode(website));
							aNode2.href=website;
							
							var detailsNode=document.getElementById("details");
							detailsNode.innerHTML="";
							detailsNode.appendChild(h2Node);
							detailsNode.appendChild(aNode2);
						}
					}
				}
				return false;
			}
		}
	}
</script>
</head>
<body>
  <h1>People</h1>
  <ul>
    <li>
      <a href="files/andy.xml">Andy</a>
    </li>
    <li>
      <a href="files/richard.xml">Richard</a>
    </li>
    <li>
      <a href="files/jeremy.xml">Jeremy</a>
    </li>
  </ul>
  <div id="details"></div>
</body>
</html>

JSON

andy.js

{"person": {
  "name":"Andy Budd","website":"http://andybudd.com/","email":"andy@clearleft.com"
  }
}

{"person": {
	"name":"Jeremy Keith","website":"http://adactio.com/","email":"jeremy@clearleft.com"
	}
}

{"person": {
  "name":"Richard Rutter","website":"http://clagnut.com/","email":"richard@clearleft.com"
  }
}

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">  <head>
  <Meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>People at Clearleft</title>
  <style type="text/css">
  	@import url("clearleft.css");
  </style>
  <script type="text/javascript">
	window.onload = function() {
		var aNodes = document.getElementsByTagName("a");
		for (var i = 0; i < aNodes.length; i++) {
			aNodes[i].onclick = function() {
				var request = new XMLHttpRequest();
				var method = "GET";
				var url = this.href;

				request.open(method,url);
				request.send(null);

				request.onreadystatechange = function() {
					if (request.readyState == 4) {
						if (request.status == 200 || request.status == 304) {
							//结果为json格式
							var result=request.responseText;
							var jsonObj=eval("("+result+")")
							//结果不能直接使用，必须先创建对应的节点，再把节点加入到#details中
							var name=jsonObj.person.name;
							var website=jsonObj.person.website;
							var email=jsonObj.person.email;
							
							//alert(name);
							//alert(website);
							//alert(email);
							/*
							<h2><a href="mailto:andy@clearleft.com">Andy Budd</a></h2>
							<a href="http://andybudd.com/">http://andybudd.com/</a>
							*/
							var aNode=document.createElement("a");
							aNode.appendChild(document.createTextNode(name));
							aNode.href="mailto:"+email;
							
							var h2Node=document.createElement("h2");
							h2Node.appendChild(aNode);
							
							var aNode2=document.createElement("a");
							aNode2.appendChild(document.createTextNode(website));
							aNode2.href=website;
							
							var detailsNode=document.getElementById("details");
							detailsNode.innerHTML="";
							detailsNode.appendChild(h2Node);
							detailsNode.appendChild(aNode2);
						}
					}
				}
				return false;
			}
		}
	}
</script>
</head>

<body>
  <h1>People</h1>
  <ul>
    <li>
      <a href="files/andy.js">Andy</a>
    </li>
    <li>
      <a href="files/richard.js">Richard</a>
    </li>
    <li>
      <a href="files/jeremy.js">Jeremy</a>
    </li>
  </ul>
  <div id="details"></div>
</body>
</html>

clearleft.css

body {
  background: #fff url("logo.png") fixed no-repeat top left;
  color: #321;
  font-family: Myriad,"Lucida Grande","Trebuchet MS",Verdana,Helvetica,Arial,sans-serif;
  line-height: 1.6;
  margin: 1em 20%;
}
a {
  color: #674;
  font-weight: bold;
  text-decoration: none;
}
a:hover {
  color: #896;
  text-decoration: underline;
}

ajax的使用方法_例题、ajax的数据处理

下面我就为大家带来一篇关于ajax的使用方法_例题、ajax的数据处理。现在就分享给大家，也给大家做个参考。

需要注意的是，调用的封装的数据库，和jQuery的保存地址

一、注册

（1）写文本框来进行用户名的验证

<input type="text" id="uid" />
<span id="tishi"></span> //这个使用来显示提示信息的

登录后复制

（2）用jQuery语句写：用户名存在不能使用，用户名可以使用

$("#uid").blur(function(){
　　//取用户名
　　var uid = $(this).val();
　　//查数据库，调ajax
　　$.ajax({  //ajax方法中必须是json格式
  url: "zhucecl.php",  //处理页面的地址
  data:{u:uid},  //这里是Json的格式:u是起的个名字，uid才是值
  type:"POST", //数据提交方式
  dataType:"TEXT",  //返回的数据格式:字符串格式
  success:function(data){  //成功的话返回匿名函数（回调函数）
      //执行处理页面成功后的语句
      var str = "";
                 
      if(data=="OK")
      {
      　　str = "用户名可以使用";
      　　$("#tishi").css("color","green");
      }
      else
      {
      　　str = "已有用户名";  
      　　$("#tishi").css("color","red");
      }
      $("#tishi").text(str);
    　　}
　　　　　　});     
})

登录后复制

（3）注册的处理页面：写了很多遍的了，不再一句句解释

<?php
//调封装好的类：注意保存位置
include("DBDA.class.php");
$db = new DBDA();
 
//传的值起的名字
$uid = $_POST["u"];
$sql = "select count(*) from renyuan where username=&#39;{$uid}&#39;";
 
//调用封装的函数
$attr =$db->Query($sql);
 
//判断用户名是否存在
if($attr[0][0]>0)
{
　　echo "NO"; //有重复的用户名
}
else
{
　　echo "OK";  //没有重复的用户名
}
 
?>

登录后复制

二、登录

（1）写文本框和登录按钮

<p>账号：<input type="text" id="uid" /></p>
<p>密码：<input type="password" id="pwd" /></p>
<input type="button" value="登录" id="btn" />

登录后复制

（2）写jQuery的语句　　

$("#btn").click(function(){
　　var uid=$("#uid").val(); //找到用户
　　var pwd=$("#pwd").val(); //找到密码
 
　　//调ajax方法，里面要用json格式
　　$.ajax({
  url:"denglucl.php", //登陆的处理页面
  data:{uid:uid,pwd:pwd}, 
  type:"POST",
  dataType:"text",
  success: function(data)
  {
    if(data.trim()=="OK")
    {
      window.location.href="zhuce.php" rel="external nofollow" ; //用户名密码正确，进入一个页面
    }
    else
    {
      alert("用户名密码输入错误");
    }
  }
　　})
       
})

登录后复制

（3）登陆的处理页面：写了很多遍的了，不再一句句解释

<?php
include("DBDA.class.php");
$db = new DBDA();
 
$uid = $_POST["uid"];
$pwd = $_POST["pwd"];
 
$sql = "select mima from huiyuan where yonghu=&#39;{$uid}&#39;";
$attr = $db->Query($sql);
 
if(!empty($pwd) && !empty($attr) && $attr[0][0]==$pwd) //密码不为空，数组不为空，输入密码和查出的密码是否相同
{
　　echo "OK";  
}
else
{
　　echo "ON";  
}

登录后复制

登录成功：

三、ajax的数据处理

（1）先把名称行显示出来，正常编辑就可以，想显示的内容

<table width="100%" border="1" cellpadding="0" cellspacing="0">
　　<tr>
    <td>代号</td>
    <td>名称</td>
    <td>价格</td>
    <td>产地</td>
    <td>库存</td>
    <td>操作</td>
　　</tr>
</table>

登录后复制

（2）再写个显示内容的表

<tbody id="bg">
　　//里面放遍历的某个表中的数据内容
</tbody>

登录后复制

（3）写jQuery，页面加载完成后再执行

$(document).ready(function(e) {
　　$.ajax({
  url:"xianshicl.php",  
  dataType:"TEXT",
  success: function(data){
    //处理页面处理完成后执行的
    　　 });

登录后复制

（4）编写显示数据处理页面（两种方法）

include("DBDA.class.php"); //调用封装好的类：注意存在位置
$db = new DBDA(); //造新对象
   
$sql = "select * from fruit"; //写sql语句
   
echo $db->StrQuery($sql);  //1.调用封装好的拼接数组为字符串的方法
/* //2.
$attr = $db->Query($sql); //调用封装类中的方法来执行sql语句
$str = "";
foreach($attr as $v)
{
　　$str .= implode("^",$v)."|"; //拼接数组为字符串
}
       
echo substr($str,0,strlen($str)-1); //截取字符串：最后的拼接符不显示<br>*/

登录后复制

（5）处理页面结束后，在主页面的ajax中的成功方法中写入处理页面结束后的语句

success: function(data){
　　var hang = data.split("|"); //拆分字符“|”串：显示行
           
　　var str = "";
　　for(var i=0;i<hang.length;i++)
　　{
  var lie = hang[i].split("^"); //拆分字符串“^”:显示列
  str += "<tr><td>"+lie[0]+"</td><td>"+lie[1]+"</td><td>"+lie[2]+"</td><td>"+lie[3]+"</td><td>"+lie[5]+"</td><td>操作</td></tr>";  //显示的行和单元格
　　}
           
　　$("#bg").html(str);
}

登录后复制

这样就显示了：

上面是我整理给大家的，希望今后会对大家有帮助。

详解解读CSS样式中的!important、*、_符号

详解解读IE6中的position：fixed问题

JavaScript在IE9之前版本中内存泄露问题(详细总结)

以上就是ajax的使用方法_例题、ajax的数据处理的详细内容，更多请关注php中文网其它相关文章！

关于ajax异步提交有时会出现无bug的数据处理异常-----debug没有问题，正常运行却数据处理不正确，极少机会会出现正常的处理结果的问题就给大家分享到这里，感谢你花时间阅读本站内容，更多关于ajax 在debug和alert时都正确但是直接运行却报错、ajax异步提交后出现卡死现象、ajax数据处理、ajax的使用方法_例题、ajax的数据处理等相关知识的信息别忘了在本站进行查找喔。

本文标签：