ajax如何處理服務器返回的3種數據格式

時間 2019-11-09

原文原文鏈接

這篇東西自己是很是基礎的，可是常常在處理ajax返回值的時候仍是會犯各類小錯誤，因此就想到把這些方法結合之前寫過的代碼片斷整理一下，方便之後複習和使用。另外呢，雖然能搜到不少相似的文檔，可是整理一份本身的仍是墜吼的=￣ω￣=php

ajax方法的參數

經常使用的ajax參數好比url,data,type,包括預期返回類型dataType，發送到服務器的數據的編碼類型contentType,成功方法，失敗方法，完成方法。除了這些之外還有不少其餘內置的參數
須要注意的是：
1.url:
要求爲String類型的參數，（默認爲當前頁地址）發送請求的地址。
2.type:
要求爲String類型的參數，請求方式（post或get）默認爲get。注意其餘http請求方法，例如put和delete也可使用，但僅部分瀏覽器支持。
3.timeout:
要求爲Number類型的參數，設置請求超時時間（毫秒）。此設置將覆蓋$.ajaxSetup()方法的全局設置。
4.async:
要求爲Boolean類型的參數，默認設置爲true，全部請求均爲異步請求。若是須要發送同步請求，請將此選項設置爲false。注意，同步請求將鎖住瀏覽器，用戶其餘操做必須等待請求完成才能夠執行。
5.cache:
要求爲Boolean類型的參數，默認爲true（當dataType爲script時，默認爲false），設置爲false將不會從瀏覽器緩存中加載請求信息。
6.data:
要求爲Object或String類型的參數，發送到服務器的數據。若是已經不是字符串，將自動轉換爲字符串格式。get請求中將附加在url後。防止這種自動轉換，能夠查看　　processData選項。對象必須爲key/value格式，例如{foo1:"bar1",foo2:"bar2"}轉換爲&foo1=bar1&foo2=bar2。若是是數組，JQuery將自動爲不一樣值對應同一個名稱。例如{foo:["bar1","bar2"]}轉換爲&foo=bar1&foo=bar2。
7.dataType:
要求爲String類型的參數，預期服務器返回的數據類型。若是不指定，JQuery將自動根據http包mime信息返回responseXML或responseText，並做爲回調函數參數傳遞。可用的類型以下：
xml：返回XML文檔，可用JQuery處理。
html：返回純文本HTML信息；包含的script標籤會在插入DOM時執行。
script：返回純文本JavaScript代碼。不會自動緩存結果。除非設置了cache參數。注意在遠程請求時（不在同一個域下），全部post請求都將轉爲get請求。
json：返回JSON數據。
jsonp：JSONP格式。使用SONP形式調用函數時，例如myurl?callback=?，JQuery將自動替換後一個「?」爲正確的函數名，以執行回調函數。
text：返回純文本字符串。
8.beforeSend：
要求爲Function類型的參數，發送請求前能夠修改XMLHttpRequest對象的函數，例如添加自定義HTTP頭。在beforeSend中若是返回false能夠取消本次ajax請求。XMLHttpRequest對象是唯一的參數。html

function(XMLHttpRequest){
           this;   //調用本次ajax請求時傳遞的options參數
        }

9.complete：
要求爲Function類型的參數，請求完成後調用的回調函數（請求成功或失敗時均調用）。參數：XMLHttpRequest對象和一個描述成功請求類型的字符串。web

function(XMLHttpRequest, textStatus){
         this;    //調用本次ajax請求時傳遞的options參數
      }

10.success：要求爲Function類型的參數，請求成功後調用的回調函數，有兩個參數。ajax

(1)由服務器返回，並根據dataType參數進行處理後的數據。
     (2)描述狀態的字符串。
     function(data, textStatus){
        //data多是xmlDoc、jsonObj、html、text等等
        this;  //調用本次ajax請求時傳遞的options參數
     }

11.error:
要求爲Function類型的參數，請求失敗時被調用的函數。該函數有3個參數，即XMLHttpRequest對象、錯誤信息、捕獲的錯誤對象(可選)。ajax事件函數以下：json

function(XMLHttpRequest, textStatus, errorThrown){
      //一般狀況下textStatus和errorThrown只有其中一個包含信息
      this;   //調用本次ajax請求時傳遞的options參數
   }

12.contentType：
要求爲String類型的參數，當發送信息至服務器時，內容編碼類型默認爲"application/x-www-form-urlencoded"。該默認值適合大多數應用場合。
13.dataFilter：
要求爲Function類型的參數，給Ajax返回的原始數據進行預處理的函數。提供data和type兩個參數。data是Ajax返回的原始數據，type是調用jQuery.ajax時提供的dataType參數。函數返回的值將由jQuery進一步處理。數組

function(data, type){
            //返回處理後的數據
            return data;
        }

14.dataFilter：
要求爲Function類型的參數，給Ajax返回的原始數據進行預處理的函數。提供data和type兩個參數。data是Ajax返回的原始數據，type是調用jQuery.ajax時提供的dataType參數。函數返回的值將由jQuery進一步處理。瀏覽器

function(data, type){
            //返回處理後的數據
            return data;
        }

15.global：
要求爲Boolean類型的參數，默認爲true。表示是否觸發全局ajax事件。設置爲false將不會觸發全局ajax事件，ajaxStart或ajaxStop可用於控制各類ajax事件。
16.ifModified：
要求爲Boolean類型的參數，默認爲false。僅在服務器數據改變時獲取新數據。服務器數據改變判斷的依據是Last-Modified頭信息。默認值是false，即忽略頭信息。
17.jsonp：
要求爲String類型的參數，在一個jsonp請求中重寫回調函數的名字。該值用來替代在"callback=?"這種GET或POST請求中URL參數裏的"callback"部分，例如{jsonp:‘onJsonPLoad‘}會致使將"onJsonPLoad=?"傳給服務器。
18.username：
要求爲String類型的參數，用於響應HTTP訪問認證請求的用戶名。
19.password：
要求爲String類型的參數，用於響應HTTP訪問認證請求的密碼。
20.processData：
要求爲Boolean類型的參數，默認爲true。默認狀況下，發送的數據將被轉換爲對象（從技術角度來說並不是字符串）以配合默認內容類型"application/x-www-form-urlencoded"。若是要發送DOM樹信息或者其餘不但願轉換的信息，請設置爲false。
21.scriptCharset：
要求爲String類型的參數，只有當請求時dataType爲"jsonp"或者"script"，而且type是GET時纔會用於強制修改字符集(charset)。一般在本地和遠程的內容編碼不一樣時使用。
案例代碼：緩存

$(function(){
    $(‘#send‘).click(function(){
        $.ajax({
            type: "GET",
            url: "test.json",
            data: {username:$("#username").val(), content:$("#content").val()},
            dataType: "json",
            success: function(data){
                $(‘#resText‘).empty();  //清空resText裏面的全部內容
                var html = ‘‘;
                $.each(data, function(commentIndex, comment){
                      html += ‘<div class="comment"><h6>‘ + comment[‘username‘]
                                + ‘:</h6><p class="para"‘ + comment[‘content‘]
                                + ‘</p></div>‘;
                });
                $(‘#resText‘).html(html);
            }
        });
    });
});

22.順便說一下$.each()函數:
$.each()函數不一樣於JQuery對象的each()方法，它是一個全局函數，不操做JQuery對象，而是以一個數組或者對象做爲第1個參數，以一個回調函數做爲第2個參數。回調函數擁有兩個參數：第1個爲對象的成員或數組的索引，第2個爲對應變量或內容。服務器

須要注意的地方：app

1. 若是不指定dataType的話，會根據返回的頭部信息判斷（就是Content-type）。

綜論

ajax返回3種數據格式：html文本格式，xml通用格式，json格式，
數據類型：整數，字符串，數組，對象

ajax返回整數類型

/**
 * ajax_delete
 */
$(".delete").click(function(){
  var id = $(this).attr('id');
  var flag = confirm("肯定要刪除第"+id+"條信息嗎？");
  if(flag){
    var tr = $(this).parent().parent();
    $.get("index.php?r=demo1/delete",{id:id},function(data){
      console.log(data);
      if(data==1){
        tr.remove();
        alert("刪除成功");
      }else{
        alert("刪除失敗");
      }
    })
  }
})

這樣，後臺一個判斷，執行則返回1就行了，能夠說是最簡單的ajax了。
一般返回整形都是作判斷用。是否刪除啊，.....，雖然簡單，可是很經常使用。

ajax返回Html/text（字符串類型）

與上面返回int相對應的呢...好比ajax添加，就會返回html或者text，也就是string類型的數據。

ajax返回json

由於json沒有格式，相同內容佔用空間少處理快，因此較xml，字符串(text/html)而言，咱們更常常處理json。

$.ajax({
      type:"GET",
      url:"address_do.php",
      //dataType:"json",
      data:{postcode:postcode},

      success:function(data){
      console.log(data);
      location.href="address_do.php";
        if(data.success == 1){
          var str = "";
          str += "<p>"+data.result.lists[0].simcall+"</p>";
          str += "<p>"+data.result['asc']+"</p>";
          $("button").after("<span>"+str+"</span>");
        }
      }
})

$(function(){
    $("#search").click(function(){
      var title = $("#title").val();/*alert(title);*/
      $.ajax({
        type:"GET",
        url:"index_baidu_do.php",//
        dataType:"json",
        data:{"title":title},

        success:function(data){
          var str = "";
          if(data == 0){
            str+="<tr>沒有搜索到相關數據</tr>";
          }else{
            for(var i=0;i<data.length;i++){
              str+='<tr>';
              str+='<td>'+data[i].title+'</td>';
              str+='<td>'+data[i].content+'</td>';
              str+='<td>'+data[i].website+'</td>';
              str+='<td>'+data[i].time+'</td>';
              str+='<tr>';
            }
          }
          $("#table").html(str);
        }
      })
    })
  })

$.get(url,data,function(msg){
  msg = eval("("+msg+")");
  if(!(/^[0-9][0-9]{5}$/.test(postcode))){
    str += "<p>您輸入的郵政編碼不正確</p>";
    $("button").after("<span>"+str+"</span>");
  }else{
    str += "<p>"+msg.result.lists[0].simcall+"</p>";
    str += "<p>"+msg.result['asc']+"</p>";
    $("button").after("<span>"+str+"</span>");
  }
},'json');alert(data);

success:function(data){
  console.log(data);
  var result = data['result'];
  var str = "";
  str += "<table border='1'><tr><td>手機號</td><td>歸屬地</td><td>區號</td><td>數據來源</td></tr><tr><td>"+result['phone']+"</td><td>"+result['att']+"</td><td>"+result['postno']+"</td><td></td></tr></table>";
  $("#click").after(str);
}

$.ajax({
    type: "GET",
    url: "Ajax/Test.ashx",
    data: "HandleType=GetList&PName=" + escape($("#localvalue").val()), //要發送的數據   
    dataType: "text",
    success: function (data) {
        if (data != null && data != "") {
            var dataObj = eval("(" + data + ")"); //轉換爲json對象 
            var html = "";
            for (var i = 0; i < dataObj.length; i++) {            
                html += "<tr style=\'cursor:pointer;\' onclick=\"InfoWindow(\'" + dataObj[i].Name + "\',\'" + dataObj[i].ID + "\',\'" + dataObj[i].Code + "\');\">";
                html += "<td>" + (parseInt(i) + parseInt(1)) + "</td><td>" + dataObj[i].Name + "</td>";
                html += "</tr>";             
            }
            $("#table").html(html);
        }
    }
})


html部分
 <table id="table"  style="line-height:25px; margin:2px; "></table>

eval的使用

PS：紅色部分是容易出錯的地方，也就是ajax返回數據的拼接,也是ajax的難點之一。
另外，須要注意的是，這段代碼裏設定返回數據類型是text，因此須要用eval把返回數據處理
參考http://blog.csdn.net/ztzy520/...
用eval()方法把返回來的json數據轉換成數組
data=eval('('+data+')');

$("#search").click(function(){
      var obj = $(this);
      var searchContent = obj.prev().val();
      alert(searchContent);
      $.ajax({
        url:"index.php?r=news/search",
        type:"post",
        dataType:"json",
        data:{searchContent:searchContent},
        success:function(data){
          var str = "";
          str+='<table border="1" id="table">';
          str+='<tr>';
          str+='<td>ID</td>';
          str+='<td>新聞標題</td>';
          str+='<td>新聞內容</td>';
          str+='<td>分類</td>';
          str+='<td>圖片</td>';
          str+='<td>操做</td>';
          str+='</tr>';
          if(data == 0){
            str+="<tr>沒有搜索到相關數據</tr>";
          }else{
            for(var i=0;i<data.length;i++){

              str+='<tr>';
              str+='<td>'+data[i].news_id+'</td>';
              str+='<td>'+data[i].newsTitle+'</td>';
              str+='<td>'+data[i].newsContent+'</td>';
              str+='<td>'+data[i].cate_name+'</td>';
              str+='<td><img src="'+data[i].img_name+'" alt="" width="100px" height="60"></td>';
              str+='<td><a href="'+data[i].news_id+'">刪除</a>/<a href="'+data[i].news_id+'">修改</a></td>';
              str+='</tr>';
            }
          }
          $("#table").html(str);

        }
      })
    })

說實話，即便把這個掌握了，即便是處理一些最簡單的項目也並非能輕易拿下，由於實際生產環境涉及到的業務邏輯啊，框架啊（好比yii框架會默認加載模板，這樣返回值會很難處理）等等一些咱們意想不到的東西。可是我目前的見解是，ajax處理的話代碼邏輯會很是清晰，再者說ajax的確是做爲一個碼農最基本的技能之一。第一次寫博客兼學識有限，之後還會有修改，求輕拍。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。