ajax 处理请求回来的数据

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

 

$.get("/test", {}, function(result){
          $(".container").html('');
          if(result.length>0) {
            for(var i =0; i <result.length; i++) {
              $(".container").append(
                "<a >"+
                  "<li>" +
                    "<span  style='background-image:url(/sys-img/default.jpg)'></span>"+
                    "<p > <span ></span>"+ "张全蛋" +"</p>"+
                    "<p '>"+
                      "<span >" + "2017-9-11 12:05:30" + "</span>"+
                    "</p>"+
                  "</li></a>"
              )
            }
          } else {
            $(".container").append(
                "<h4 class='text-gray'>result里没有数据哦</h4>"
            )
          }
        });

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

　

var templateStr = ''<span>........</span>'';
$(".container").append(templateStr)

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

$.get("/test", {}, function(result){
          $(".container").html('');
          if(result.length>0) {
            for(var i =0; i <result.length; i++) {
              $(".container").append(
                "<a class="a-link">"+
                  "<li>" +
                    "<span  style='background-image:url(/sys-img/default.jpg)'></span>"+
                    "<p > <span ></span>"+ "张全蛋" +"</p>"+
                    "<p '>"+
                      "<span >" + "2017-9-11 12:05:30" + "</span>"+
                    "</p>"+
                  "</li></a>"
              )
            }
            //放在回调成功后的函数做触发事件
            $(".a-link").click(function(e){
                var _thisid = $(this).id;
                $.post("/test/one", {"www":xxx},     function(result){
                   ....
                })
              })

          } else {
            $(".container").append(
                "<h4 class='text-gray'>result里没有数据哦</h4>"
            )
          }
        });                    

之前我做了这样的处理

$.get("/test", {}, function(result){
          $(".container").html('');
          if(result.length>0) {
            for(var i =0; i <result.length; i++) {
              $(".container").append(
                "<a class='link'>"+
                  "<li>" +
                    "<span  style='background-image:url(/sys-img/default.jpg)'></span>"+
                    "<p > <span ></span>"+ "张全蛋" +"</p>"+
                    "<p '>"+
                      "<span >" + "2017-9-11 12:05:30" + "</span>"+
                    "</p>"+
                  "</li></a>"
              )
            }
            

          } else {
            $(".container").append(
                "<h4 class='text-gray'>result里没有数据哦</h4>"
            )
          }
 });

$(".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 ,当然这时候是能找到的（页面已经渲染结束了）这是我的理解，如有错误欢迎来喷！