ajax 处理请求回来的数据
发布日期:2021-05-09 00:41:48 浏览次数:12 分类:博客文章

本文共 2767 字,大约阅读时间需要 9 分钟。

比如接口 /test, 请求方式get, 请求过来的数据要处理在container 里,如下代码

 

$.get("/test", {}, function(result){          $(".container").html('');          if(result.length>0) {            for(var i =0; i 
"+ "
  • " + ""+ "

    "+ "张全蛋" +"

    "+ "

    "+ "" + "2017-9-11 12:05:30" + ""+ "

    "+ "
  • " ) } } else { $(".container").append( "

    result里没有数据哦

    " ) } });

    ps: 里面js 拼接的字符串可以用一个变量保存起来,然后统一追加到container 里面。在container里面可以做一个预处理,在里面可以放一个loading的图片,表示加载中。如 

     

    var templateStr = ''........'';$(".container").append(templateStr)

    这个时候,如果要给js拼接的字符串要绑定事件又该怎么处理呢? 要将事件绑定放在成功的回掉函数里,如下代码,

    $.get("/test", {}, function(result){          $(".container").html('');          if(result.length>0) {            for(var i =0; i 
    "+ "
  • " + ""+ "

    "+ "张全蛋" +"

    "+ "

    "+ "" + "2017-9-11 12:05:30" + ""+ "

    "+ "
  • " ) } //放在回调成功后的函数做触发事件 $(".a-link").click(function(e){ var _thisid = $(this).id; $.post("/test/one", {"www":xxx}, function(result){ .... }) }) } else { $(".container").append( "

    result里没有数据哦

    " ) } });

    之前我做了这样的处理

    $.get("/test", {}, function(result){          $(".container").html('');          if(result.length>0) {            for(var i =0; i 
    "+ "
  • " + ""+ "

    "+ "张全蛋" +"

    "+ "

    "+ "" + "2017-9-11 12:05:30" + ""+ "

    "+ "
  • " ) } } else { $(".container").append( "

    result里没有数据哦

    " ) } });$(".link").click(function(e){ e.preventDefault(); e.stopPropagation(); var _thisid = $(this).id; $.post("/msg/detail/view?msgid=" + _thisid, {}, function(result){ })})

     把绑定事件的函数放在ajax后面,无法触发点击事件。

    有些同学会有疑惑,如果把绑定事件的函数放在请求ajax函数的后面,明明看到页面上已经加载好了相关的dom ,为什么就触发不了该dom的绑定事件呢?这里有两个知识点,第一个是ajax是异步加载, 程序执行到$(".link").click(function(e){....}) 会优先找 $('.link'),然后放在内存里,第二个是每次点击的时候就会去这块内存里去找这个 dom ,在ajax的请求的时候,还没有生成 $(''l.link),jq已经存下 $('.link') 的内存,并且是空的,因此,不论ajax有没有请求完毕,这里的 $('.link') 都是为空的,因此没办法绑定过事件。

    除了这种在ajax 的回掉函数里,添加事件,也可以,在外面用jq 的代理来触发点击事件;

    $('body').on('click','.selector', function(){...........})

    这里可行的原因也是上面的分析,程序加载的时候,已经将$('body')存在内存里,这是有的,当触发的时候,就会找 .selector ,当然这时候是能找到的(页面已经渲染结束了)这是我的理解,如有错误欢迎来喷!

    上一篇:随机生成不重复的数组
    下一篇:多行文本文字过多显示 ...

    发表评论

    最新留言

    第一次来,支持一个
    [***.219.124.196]2025年03月23日 06时24分03秒

    关于作者

        喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
    -- 愿君每日到此一游!

    推荐文章