仿新浪新闻中异步替换关键字
最近客户提出了一个新的需求,要求在报表中读出病例的手术信息,因病例不见得会做手术,故如果用inner join肯定不能实现需要,如果用先找出病例,然后对每行数据增加列查询的方式会极大拖慢界面相应速度。几番思索决定采用先加载其他数据,然后留出一列在界面显示完成后在替换该列信息。代码如下:
$("#showDetail").find("td").each(function(){
var sid="";
if($(this).attr("title")=="手术")
{
sid=$(this).attr("id");
$.post("handler/url.ashx",{id:""+sid""},function(res){
if(res!="")
$("#"+sid).html(res);
else
$("#"+sid).html("");
})
}
})
var sid="";
if($(this).attr("title")=="手术")
{
sid=$(this).attr("id");
$.post("handler/url.ashx",{id:""+sid""},function(res){
if(res!="")
$("#"+sid).html(res);
else
$("#"+sid).html("");
})
}
})
运行结果却让人大跌眼镜,只替换了最后一行的“手术“那一列,百思不得其解,遂分别alert第一个IF的SID和第2个IF后面的SID发现竟然不一样!
细想一想,原来是AJAX惹得祸!AJAX本身是个异步的过程,遍历完了TD后,AJAX才从服务器返回结果。
知道原因后当然就好办多了:
一、通过设置AJAX的async属性来调整
二、人为的将返回结果和这个ID链接起来
我选择了后者,更改后的代码如下:
$("#showDetail").find("td").each(function(){
if($(this).attr("title")=="手术")
{
$.post("handler/url.ashx",{id:""+$(this).attr("id")+""},function(res){
var arr=res.toString().split('|');
if(arr.length==2)
$("#"+arr[0]).html(arr[1]);
else
$("#"+arr[0]).html("");
})
}
})
if($(this).attr("title")=="手术")
{
$.post("handler/url.ashx",{id:""+$(this).attr("id")+""},function(res){
var arr=res.toString().split('|');
if(arr.length==2)
$("#"+arr[0]).html(arr[1]);
else
$("#"+arr[0]).html("");
})
}
})