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 ,當然這時候是能找到的（頁面已經渲染結束了）這是我的理解，如有錯誤歡迎來噴！