2. 程式人生 > >$.ajax()方法從伺服器獲取json資料

$.ajax()方法從伺服器獲取json資料

阿新 • • 發佈：2019-02-09

一．什麼是json

json是一種取代xml的資料結構，和xml相比，它更小巧但描述能力卻很強，網路傳輸資料使用流量更少，速度更快。

json就是一串字串，使用下面的符號標註。

{鍵值對} ： json物件

[{},{},{}] ：json陣列

"" ：雙引號內是屬性或值

: ：冒號前為鍵，後為值（這個值可以是基本資料型別的值，也可以是陣列或物件），所以 {"age": 18} 可以理解為是一個包含age為18的json物件，而[{"age": 18},{"age": 20}]就表示包含兩個物件的json陣列。也可以使用{"age":[18,20]}來簡化上面的json陣列，這是一個擁有一個age陣列的物件。

二．$.ajax()方法中dataType屬性的取值

$.ajax()方法中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將自動替換後一個“?”為正確的函式名，以執行回撥函式。

三．Mime資料型別及response的setContentType()方法

什麼是MIME型別?在把輸出結果傳送到瀏覽器上的時候，瀏覽器必須啟動適當的應用程式來處理這個輸出文件。這可以通過多種型別MIME（多功能網際郵件擴充協議）來完成。在HTTP中，MIME型別被定義在Content-Type header中。

例 如，架設你要傳送一個Microsoft Excel檔案到客戶端。那麼這時的MIME型別就是“application/vnd.ms-excel”。在大多數實際情況中，這個檔案然後將傳送給 Execl來處理（假設我們設定Execl為處理特殊MIME型別的應用程式）。在Java中，設定MIME型別的方法是通過Response物件的ContentType屬性。比如常用：response.setContentType("text/html;charset=UTF-8")進行設定。

最早的HTTP協議中，並沒有附加的資料型別資訊，所有傳送的資料都被客戶程式解釋為超文字標記語言HTML 文件，而為了支援多媒體資料型別，HTTP協議中就使用了附加在文件之前的MIME資料型別資訊來標識資料型別。

每個MIME型別由兩部分組成，前面是資料的大類別，例如文字text、圖象image等，後面定義具體的種類。

常見的MIME型別：

超文字標記語言文字 .html,.html text/html

普通文字 .txt text/plain

RTF文字 .rtf application/rtf

GIF圖形 .gif image/gif

JPEG圖形 .ipeg,.jpg image/jpeg

au聲音檔案 .au audio/basic

MIDI音樂檔案 mid,.midi audio/midi,audio/x-midi

RealAudio音樂檔案 .ra, .ram audio/x-pn-realaudio

MPEG檔案 .mpg,.mpeg video/mpeg

AVI檔案 .avi video/x-msvideo

GZIP檔案 .gz application/x-gzip

TAR檔案 .tar application/x-tar

客戶程式從伺服器上接收資料的時候，它只是從伺服器接受資料流，並不瞭解文件的名字，因此伺服器必須使用附加資訊來告訴客戶程式資料的MIME型別。

伺服器在傳送真正的資料之前，就要先發送標誌資料的MIME型別的資訊，這個資訊使用Content-type關鍵字進行定義，例如對於HTML文件，伺服器將首先發送以下兩行MIME標識資訊,這個標識並不是真正的資料檔案的一部分。

Content-type: text/html

注意，第二行為一個空行，這是必須的，使用這個空行的目的是將MIME資訊與真正的資料內容分隔開。

如前面所說，在Java中，設定MIME型別的方法是通過Response物件的ContentType屬性,設定的方法是使用response.setContentType(MIME)語句，response.setContentType(MIME)的作用是使客戶端瀏覽器，區分不同種類的資料，並根據不同的MIME呼叫瀏覽器內不同的程式嵌入模組來處理相應的資料。

Tomcat的安裝目錄\conf\web.xml中就定義了大量MIME型別 ，可以參考。比如可以設定：

response.setContentType("text/html; charset=utf-8"); html

response.setContentType("text/plain; charset=utf-8"); 文字

application/json json資料

這個方法設定傳送到客戶端的響應的內容型別，此時響應還沒有提交。給出的內容型別可以包括字元編碼說明，例如：text/html;charset=UTF-8。如果該方法在getWriter()方法被呼叫之前呼叫，那麼響應的字元編碼將僅從給出的內容型別中設定。該方法如果在getWriter()方法被呼叫之後或者在被提交之後呼叫，將不會設定響應的字元編碼，在使用http協議的情況中，該方法設定 Content-type實體報頭。

四．使用$.ajax()方法獲取json資料的三種方式

dataType引數的配置決定了jquery如何幫助我們自動解析伺服器返回的資料，有幾種方式可以獲取後臺返回的json字串並解析為json物件，下面是Java為例解釋，下面三中方式的結果都是圖一所示，專案執行在內網，無法截圖，只能拍照，見諒。


1、$.ajax()引數中不設定dataType，後臺response也不設定返回型別，則預設會以普通文字處理【response.setContentType("text/html;charset=utf-8");也是作為文字處理】，js中需要手動使用eval()或$.parseJSON()等方法將返回的字串轉換為json物件使用。

  1. //Java程式碼：後臺獲取單個數控定位器的歷史表格的資料
  2.     publicvoid getHistorySingleData() throws IOException{  
  3.         HttpServletRequest request = ServletActionContext.getRequest();  
  4.         HttpServletResponse response = ServletActionContext.getResponse();  
  5.         response.setHeader("Content-type", "text/html;charset=UTF-8");  
  6.         response.setContentType("text/html;charset=utf-8");  
  7.         String deviceName = request.getParameter("deviceName");  
  8.         String startDate= request.getParameter("startDate");  
  9.         String endDate = request.getParameter("endDate");  
  10.         SingleHistoryData[] singleHistoryData = chartService.getHistorySingleData(deviceName,startDate, endDate);  
  11.         System.out.println(singleHistoryData.length);  
  12.         System.out.println(JSONArray.fromObject(singleHistoryData).toString());//列印：[{"time":"2016-11-11 10:00:00","state":"執行","ball":"鎖緊",....},{"time":"2016-11-11 10:00:05","state":"執行","ball":"鎖緊",....},{},{}....]查到幾條singleHistoryData物件就列印幾個物件的資訊{"time":"2016-11-11 10:00:05","state":"執行","ball":"鎖緊",....}
  13.         response.getWriter().print(JSONArray.fromObject(singleHistoryData).toString());  
  14.     }  

[javascript] view plain copy
  1. /*js程式碼：選擇查詢某一時間段的資料，點選查詢之後進行顯示*/
  2.    $("#search").click(function () {  
  3.     var data1 = [];  
  4.     var n;  
  5.     var deviceName=$("body").attr("id");   
  6.        var startDate = $("#startDate").val();  
  7.        var endDate = $("#endDate").val();  
  8.        $.ajax({  
  9.           url:"/avvii/chart/getHistorySingleData",  
  10.           type:"post",  
  11.           data:{  
  12.               "deviceName":deviceName,  
  13.               "startDate": startDate,  
  14.               "endDate": endDate  
  15.           },  
  16.           success: function (data) {  
  17.            alert(data);//---->彈出[{"time":"2016-11-11 10:00:00","state":"執行","ball":"鎖緊",....},{"time":"2016-11-11 10:00:05","state":"執行","ball":"鎖緊",....},{},{}....]，後臺傳過來幾條singleHistoryData物件就列印幾個物件的資訊{"time":"2016-11-11 10:00:05","state":"執行","ball":"鎖緊",....}
  18.            alert(Object.prototype.toString.call(data));  //--->彈出[object String]，說明獲取的是String型別的資料
  19.            var JsonObjs = eval("(" + data + ")");      //或者：var JsonObjs = $.parseJSON(data);
  20.            alert(JsonObjs);//alert(JsonObjs);---->彈出[object Object],[object Object],[object Object][object Object],[object Object],[object Object]……後臺傳過來幾條singleHistoryData物件就列印幾個[object Object]
  21.               n=JsonObjs.length;  
  22.               if(n==0){  
  23.                alert("您選擇的時間段無資料，請重新查詢");  
  24.               }  
  25.            for(var i = 0; i < JsonObjs.length; i++){                         
  26.                     var name  = JsonObjs[i]['time'];//針對每一條資料：JsonObjs[i]，或者：JsonObjs[i].time
  27.                     var state = JsonObjs[i]['state'];  
  28.                     var ball  = JsonObjs[i]['ball'];  
  29.                     var xd    = JsonObjs[i]['xd'];  
  30.                     var yd    = JsonObjs[i]['yd'];  
  31.                     var zd    = JsonObjs[i]['zd'];  
  32.                     var xf    = JsonObjs[i]['xf'];  
  33.                     var yf    = JsonObjs[i]['yf'];  
  34.                     var zf    = JsonObjs[i]['zf'];  
  35.                        data1[i] = {name:name,state:state,ball:ball,xd:xd,yd:yd,zd:zd,xf:xf,yf:yf,zf:zf};//個數與下面表頭對應起來就可以了，至於叫什麼名字並不影響控制元件的使用
  36.               }  
  37.            if(JsonObjs.length != 10){  
  38.                for(var j=0;j<(10-((JsonObjs.length)%10));j++){               //補全最後一頁的空白行，使表格的長度保持不變
  39.                    data1[j+JsonObjs.length] = {name:" ",state:"",ball:"",xd:"",yd:"",zd:"",xf:"",yf:"",zf:""};   
  40.                }  
  41.            }  
  42.               var userOptions = {  
  43.                       "id":"kingTable",                                             //必須 表格id
  44.                       "head":["時間","執行狀態","球頭狀態","X向位置/mm","Y向位置/mm","Z向位置/mm","X向承載力/Kg","Y向承載力/Kg","Z向承載力/Kg"],  //必須 thead表頭
  45.                       "body":data1,                                                 //必須 tbody 後臺返回的資料展示
  46.                       "foot":true,                                                      // true/false  是否顯示tfoot --- 預設false
  47.                       "displayNum": 10,                                                 //必須   預設 10  每頁顯示行數
  48.                       "groupDataNum":6,                                                 //可選    預設 10  組數
  49.                       sort:false,                                                       // 點選表頭是否排序 true/false  --- 預設false
  50.                       search:false,                                                     // 預設為false 沒有搜尋
  51.                       lang:{  
  52.                           gopageButtonSearchText:"搜尋"
  53.                       }  
  54.               }  
  55.               var cs = new KingTable(null,userOptions);  

  56. 相關推薦

    no