• 仿新浪新闻中异步替换关键字


          最近客户提出了一个新的需求,要求在报表中读出病例的手术信息,因病例不见得会做手术,故如果用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("");
           })
           }
           
          })
          

          运行结果却让人大跌眼镜,只替换了最后一行的“手术“那一列,百思不得其解,遂分别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("");
           })
           }
           
          })
  • 相关阅读:
    每周一练 之 数据结构与算法(Tree)
    每周一练 之 数据结构与算法(Dictionary 和 HashTable)
    【CuteJavaScript】GraphQL真香入门教程
    每周一练 之 数据结构与算法(LinkedList)
    每周一练 之 数据结构与算法(Stack)
    每周一练 之 数据结构与算法(Set)
    每周一练 之 数据结构与算法(Queue)
    《JavaScript 正则表达式迷你书》知识点小抄本
    玩转CSS3(二)---CSS3实现瀑布布局
    玩转CSS3(一)----CSS3实现页面布局
  • 原文地址:https://www.cnblogs.com/wishbay/p/2397961.html
Copyright © 2020-2023  润新知