基于$.ajax()方法從服務(wù)器獲取json數(shù)據(jù)的幾種方式總結(jié)
一．什么是json
json是一種取代xml的數(shù)據(jù)結(jié)構(gòu)，和xml相比，它更小巧但描述能力卻很強，網(wǎng)絡(luò)傳輸數(shù)據(jù)使用流量更少，速度更快。
json就是一串字符串，使用下面的符號標(biāo)注。
{鍵值對} ： json對象
[{},{},{}] ：json數(shù)組
"" ：雙引號內(nèi)是屬性或值
: ：冒號前為鍵，后為值（這個值可以是基本數(shù)據(jù)類型的值，也可以是數(shù)組或?qū)ο螅?，所?{"age": 18} 可以理解為是一個包含age為18的json對象，而[{"age": 18},{"age": 20}]就表示包含兩個對象的json數(shù)組。也可以使用{"age":[18,20]}來簡化上面的json數(shù)組，這是一個擁有一個age數(shù)組的對象。
二．$.ajax()方法中dataType屬性的取值
$.ajax()方法中dataType屬性要求為String類型的參數(shù)，預(yù)期服務(wù)器返回的數(shù)據(jù)類型。如果不指定，JQuery將自動根據(jù)http包mime信息返回responseXML或responseText【在第三部分解釋】，并作為回調(diào)函數(shù)參數(shù)傳遞?？捎玫念愋腿缦拢?/p>
xml：返回XML文檔，可用JQuery處理。
html：返回純文本HTML信息；包含的script標(biāo)簽會在插入DOM時執(zhí)行。
script：返回純文本JavaScript代碼。不會自動緩存結(jié)果。除非設(shè)置了cache參數(shù)。注意在遠程請求時（不在同一個域下），所有post請求都將轉(zhuǎn)為get請求。
json：返回JSON數(shù)據(jù)。
jsonp：JSONP格式。使用SONP形式調(diào)用函數(shù)時，例如myurl?callback=?，JQuery將自動替換后一個“?”為正確的函數(shù)名，以執(zhí)行回調(diào)函數(shù)。
三．Mime數(shù)據(jù)類型及response的setContentType()方法
什么是MIME類型?在把輸出結(jié)果傳送到瀏覽器上的時候，瀏覽器必須啟動適當(dāng)?shù)膽?yīng)用程序來處理這個輸出文檔。這可以通過多種類型MIME（多功能網(wǎng)際郵件擴充協(xié)議）來完成。在HTTP中，MIME類型被定義在Content-Type header中。
例 如，架設(shè)你要傳送一個Microsoft Excel文件到客戶端。那么這時的MIME類型就是“application/vnd.ms-excel”。在大多數(shù)實際情況中，這個文件然后將傳送給 Execl來處理（假設(shè)我們設(shè)定Execl為處理特殊MIME類型的應(yīng)用程序）。在Java中，設(shè)定MIME類型的方法是通過Response對象的ContentType屬性。比如常用：response.setContentType("text/html;charset=UTF-8")進行設(shè)置。
最早的HTTP協(xié)議中，并沒有附加的數(shù)據(jù)類型信息，所有傳送的數(shù)據(jù)都被客戶程序解釋為超文本標(biāo)記語言HTML 文檔，而為了支持多媒體數(shù)據(jù)類型，HTTP協(xié)議中就使用了附加在文檔之前的MIME數(shù)據(jù)類型信息來標(biāo)識數(shù)據(jù)類型。
每個MIME類型由兩部分組成，前面是數(shù)據(jù)的大類別，例如文本text、圖象image等，后面定義具體的種類。
常見的MIME類型：
超文本標(biāo)記語言文本 .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
客戶程序從服務(wù)器上接收數(shù)據(jù)的時候，它只是從服務(wù)器接受數(shù)據(jù)流，并不了解文檔的名字，因此服務(wù)器必須使用附加信息來告訴客戶程序數(shù)據(jù)的MIME類型。
服務(wù)器在發(fā)送真正的數(shù)據(jù)之前，就要先發(fā)送標(biāo)志數(shù)據(jù)的MIME類型的信息，這個信息使用Content-type關(guān)鍵字進行定義，例如對于HTML文檔，服務(wù)器將首先發(fā)送以下兩行MIME標(biāo)識信息,這個標(biāo)識并不是真正的數(shù)據(jù)文件的一部分。
Content-type: text/html
注意，第二行為一個空行，這是必須的，使用這個空行的目的是將MIME信息與真正的數(shù)據(jù)內(nèi)容分隔開。
如前面所說，在Java中，設(shè)定MIME類型的方法是通過Response對象的ContentType屬性,設(shè)置的方法是使用response.setContentType(MIME)語句，response.setContentType(MIME)的作用是使客戶端瀏覽器，區(qū)分不同種類的數(shù)據(jù)，并根據(jù)不同的MIME調(diào)用瀏覽器內(nèi)不同的程序嵌入模塊來處理相應(yīng)的數(shù)據(jù)。
Tomcat的安裝目錄\conf\web.xml中就定義了大量MIME類型 ，可以參考。比如可以設(shè)置：
response.setContentType("text/html; charset=utf-8"); html
response.setContentType("text/plain; charset=utf-8"); 文本
application/json json數(shù)據(jù)
這個方法設(shè)置發(fā)送到客戶端的響應(yīng)的內(nèi)容類型，此時響應(yīng)還沒有提交。給出的內(nèi)容類型可以包括字符編碼說明，例如：text/html;charset=UTF-8。如果該方法在getWriter()方法被調(diào)用之前調(diào)用，那么響應(yīng)的字符編碼將僅從給出的內(nèi)容類型中設(shè)置。該方法如果在getWriter()方法被調(diào)用之后或者在被提交之后調(diào)用，將不會設(shè)置響應(yīng)的字符編碼，在使用http協(xié)議的情況中，該方法設(shè)置 Content-type實體報頭。
四．使用$.ajax()方法獲取json數(shù)據(jù)的三種方式
dataType參數(shù)的配置決定了jquery如何幫助我們自動解析服務(wù)器返回的數(shù)據(jù)，有幾種方式可以獲取后臺返回的json字符串并解析為json對象，下面是Java為例解釋，下面三中方式的結(jié)果都是圖一所示，項目運行在內(nèi)網(wǎng)，無法截圖，只能拍照，見諒。
1、$.ajax()參數(shù)中不設(shè)置dataType，后臺response也不設(shè)置返回類型，則默認會以普通文本處理【response.setContentType("text/html;charset=utf-8");也是作為文本處理】，js中需要手動使用eval()或$.parseJSON()等方法將返回的字符串轉(zhuǎn)換為json對象使用。
//Java代碼：后臺獲取單個數(shù)控定位器的歷史表格的數(shù)據(jù)
public void getHistorySingleData() throws IOException{
HttpServletRequest request = ServletActionContext.getRequest();
HttpServletResponse response = ServletActionContext.getResponse();
response.setHeader("Content-type", "text/html;charset=UTF-8");
response.setContentType("text/html;charset=utf-8");
String deviceName = request.getParameter("deviceName");
String startDate= request.getParameter("startDate");
String endDate = request.getParameter("endDate");
SingleHistoryData[] singleHistoryData = chartService.getHistorySingleData(deviceName,startDate, endDate);
System.out.println(singleHistoryData.length);
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":"鎖緊",....}
response.getWriter().print(JSONArray.fromObject(singleHistoryData).toString());
}
/*js代碼：選擇查詢某一時間段的數(shù)據(jù)，點擊查詢之后進行顯示*/
$("#search").click(function () {
var data1 = [];
var n;
var deviceName=$("body").attr("id");
var startDate = $("#startDate").val();
var endDate = $("#endDate").val();
$.ajax({
url:"/avvii/chart/getHistorySingleData",
type:"post",
data:{
"deviceName":deviceName,
"startDate": startDate,
"endDate": endDate
},
success: function (data) {
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":"鎖緊",....}
alert(Object.prototype.toString.call(data)); //--->彈出[object String]，說明獲取的是String類型的數(shù)據(jù)
var JsonObjs = eval("(" + data + ")"); //或者：var JsonObjs = $.parseJSON(data);
alert(JsonObjs);//alert(JsonObjs);---->彈出[object Object],[object Object],[object Object][object Object],[object Object],[object Object]……后臺傳過來幾條singleHistoryData對象就打印幾個[object Object]
n=JsonObjs.length;
if(n==0){
alert("您選擇的時間段無數(shù)據(jù)，請重新查詢");
}
for(var i = 0; i < JsonObjs.length; i++){
var name = JsonObjs[i]['time'];//針對每一條數(shù)據(jù)：JsonObjs[i]，或者：JsonObjs[i].time
var state = JsonObjs[i]['state'];
var ball = JsonObjs[i]['ball'];
var xd = JsonObjs[i]['xd'];
var yd = JsonObjs[i]['yd'];
var zd = JsonObjs[i]['zd'];
var xf = JsonObjs[i]['xf'];
var yf = JsonObjs[i]['yf'];
var zf = JsonObjs[i]['zf'];
data1[i] = {name:name,state:state,ball:ball,xd:xd,yd:yd,zd:zd,xf:xf,yf:yf,zf:zf};//個數(shù)與下面表頭對應(yīng)起來就可以了，至于叫什么名字并不影響控件的使用
}
if(JsonObjs.length != 10){
for(var j=0;j<(10-((JsonObjs.length)%10));j++){ //補全最后一頁的空白行，使表格的長度保持不變
data1[j+JsonObjs.length] = {name:" ",state:"",ball:"",xd:"",yd:"",zd:"",xf:"",yf:"",zf:""};
}
}
var userOptions = {
"id":"kingTable", //必須 表格id
"head":["時間","運行狀態(tài)","球頭狀態(tài)","X向位置/mm","Y向位置/mm","Z向位置/mm","X向承載力/Kg","Y向承載力/Kg","Z向承載力/Kg"], //必須 thead表頭
"body":data1, //必須 tbody 后臺返回的數(shù)據(jù)展示
"foot":true, // true/false 是否顯示tfoot --- 默認false
"displayNum": 10, //必須 默認 10 每頁顯示行數(shù)
"groupDataNum":6, //可選 默認 10 組數(shù)
sort:false, // 點擊表頭是否排序 true/false --- 默認false
search:false, // 默認為false 沒有搜索
lang:{
gopageButtonSearchText:"搜索"
}
}
var cs = new KingTable(null,userOptions);
}
});
});
2、$.ajax()參數(shù)中設(shè)置dataType="json"，則jquery會自動將返回的字符串轉(zhuǎn)化為json對象。后臺可以設(shè)置為：【推薦】response.setContentType("text/html;charset=utf-8");或者response.setContentType("application/json;charset=utf-8");
//Java代碼：后臺獲取單個數(shù)控定位器的歷史表格的數(shù)據(jù)
public void getHistorySingleData() throws IOException{
HttpServletRequest request = ServletActionContext.getRequest();
HttpServletResponse response = ServletActionContext.getResponse();
response.setHeader("Content-type", "text/html;charset=UTF-8");
response.setContentType("text/html;charset=utf-8");
String deviceName = request.getParameter("deviceName");
String startDate= request.getParameter("startDate");
String endDate = request.getParameter("endDate");
SingleHistoryData[] singleHistoryData = chartService.getHistorySingleData(deviceName,startDate, endDate);
System.out.println(singleHistoryData.length);
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":"鎖緊",....}
response.getWriter().print(JSONArray.fromObject(singleHistoryData).toString());
}
/*js代碼：頁面首次加載時，顯示規(guī)定時間段的數(shù)據(jù)*/
var data1 = [];
var deviceName=$("body").attr("id");
var startDate = $("#startDate").val("2000-01-01 00:00:00");
var endDate = $("#endDate").val("2018-01-01 00:00:00");
$.ajax({
url:"/avvii/chart/getHistorySingleData",
type:"post",
data:{
"deviceName":deviceName,
"startDate": "2000-01-01 00:00:00",
"endDate": "2018-01-01 00:00:00"
},
dataType:"json",
success: function (data) {
alert(data);//---->彈出[object Object],[object Object],[object Object][object Object],[object Object],[object Object]……后臺傳過來幾條singleHistoryData對象就打印幾個json對象：[object Object]
for(var i = 0; i < data.length; i++){
var name = data[i]['time'];
var state = data[i]['state'];
var ball = data[i]['ball'];
var xd = data[i]['xd'];
var yd = data[i]['yd'];
var zd = data[i]['zd'];
var xf = data[i]['xf'];
var yf = data[i]['yf'];
var zf = data[i]['zf'];
data1[i] = {name:name,state:state,ball:ball,xd:xd,yd:yd,zd:zd,xf:xf,yf:yf,zf:zf};
}
if(data.length != 10){
for(var j=0;j<(10-((data.length)%10));j++){ //補全最后一頁的空白行，使表格的長度保持不變
data1[j+data.length] = {name:" ",state:"",ball:"",xd:"",yd:"",zd:"",xf:"",yf:"",zf:""};
}
}
var userOptions = {
"id":"kingTable", //必須 表格id
"head":["時間","運行狀態(tài)","球頭狀態(tài)","X向位置/mm","Y向位置/mm","Z向位置/mm","X向承載力/Kg","Y向承載力/Kg","Z向承載力/Kg"], //必須 thead表頭
"body":data1, //必須 tbody 后臺返回的數(shù)據(jù)展示
"foot":true, // true/false 是否顯示tfoot --- 默認false
"displayNum": 10, //必須 默認 10 每頁顯示行數(shù)
"groupDataNum":6, //可選 默認 10 組數(shù)
sort:false, // 點擊表頭是否排序 true/false --- 默認false
search:false, // 默認為false 沒有搜索
lang:{
gopageButtonSearchText:"搜索"
}
}
var cs = new KingTable(null,userOptions);
}
});
3、ajax方法參數(shù)中不指定dataType，后臺設(shè)置返回類型為"application/json"。這樣jquery就會根據(jù)mime類型來智能判斷，并自動解析成json對象。
//Java代碼：后臺獲取單個數(shù)控定位器的歷史表格的數(shù)據(jù)
public void getHistorySingleData() throws IOException{
HttpServletRequest request = ServletActionContext.getRequest();
HttpServletResponse response = ServletActionContext.getResponse();
response.setHeader("Content-type", "text/html;charset=UTF-8");
response.setContentType("application/json;charset=utf-8");
String deviceName = request.getParameter("deviceName");
String startDate= request.getParameter("startDate");
String endDate = request.getParameter("endDate");
SingleHistoryData[] singleHistoryData = chartService.getHistorySingleData(deviceName,startDate, endDate);
System.out.println(singleHistoryData.length);
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":"鎖緊",....}
response.getWriter().print(JSONArray.fromObject(singleHistoryData).toString());
}
/*js代碼：頁面首次加載時，顯示規(guī)定時間段的數(shù)據(jù)*/
var data1 = [];
var deviceName=$("body").attr("id");
var startDate = $("#startDate").val("2000-01-01 00:00:00");
var endDate = $("#endDate").val("2018-01-01 00:00:00");
$.ajax({
url:"/avvii/chart/getHistorySingleData",
type:"post",
data:{
"deviceName":deviceName,
"startDate": "2000-01-01 00:00:00",
"endDate": "2018-01-01 00:00:00"
},
success: function (data) {
alert(data);//---->彈出[object Object],[object Object],[object Object][object Object],[object Object],[object Object]……后臺傳過來幾條singleHistoryData對象就打印幾個json對象：[object Object]
for(var i = 0; i < data.length; i++){
var name = data[i]['time'];
var state = data[i]['state'];
var ball = data[i]['ball'];
var xd = data[i]['xd'];
var yd = data[i]['yd'];
var zd = data[i]['zd'];
var xf = data[i]['xf'];
var yf = data[i]['yf'];
var zf = data[i]['zf'];
data1[i] = {name:name,state:state,ball:ball,xd:xd,yd:yd,zd:zd,xf:xf,yf:yf,zf:zf};
}
if(data.length != 10){
for(var j=0;j<(10-((data.length)%10));j++){ //補全最后一頁的空白行，使表格的長度保持不變
data1[j+data.length] = {name:" ",state:"",ball:"",xd:"",yd:"",zd:"",xf:"",yf:"",zf:""};
}
}
var userOptions = {
"id":"kingTable", //必須 表格id
"head":["時間","運行狀態(tài)","球頭狀態(tài)","X向位置/mm","Y向位置/mm","Z向位置/mm","X向承載力/Kg","Y向承載力/Kg","Z向承載力/Kg"], //必須 thead表頭
"body":data1, //必須 tbody 后臺返回的數(shù)據(jù)展示
"foot":true, // true/false 是否顯示tfoot --- 默認false
"displayNum": 10, //必須 默認 10 每頁顯示行數(shù)
"groupDataNum":6, //可選 默認 10 組數(shù)
sort:false, // 點擊表頭是否排序 true/false --- 默認false
search:false, // 默認為false 沒有搜索
lang:{
gopageButtonSearchText:"搜索"
}
}
var cs = new KingTable(null,userOptions);
}
});
注意：只要前臺或者后臺有一處設(shè)置了返回json對象，就無需使用eval()方法或$.parseJSON()方法解析了，再解析就出錯。
總結(jié)：以上幾種方式，推薦使用第二種方式，方便且不易出錯。
五．eval()方法
var json對象=eval('('+json數(shù)據(jù)+')');大括號括起來的內(nèi)容被eval()執(zhí)行后返回的是一個JSON對象。
eval函數(shù)的工作原理：eval函數(shù)會評估一個給定的含有JavaScript代碼的字符串，并且試圖去執(zhí)行包含在字符串里的表達式或者一系列的合法的JavaScript語句。eval函數(shù)將把最后一個表達式或者語句所包含的值或引用作為返回值。
為什么要 eval這里要添加 “("("+data+")");//”呢？
原因在于：eval本身的問題。 由于json是以”{}”的方式來開始以及結(jié)束的，在JS中，它會被當(dāng)成一個語句塊來處理，所以必須強制性的將它轉(zhuǎn)換成一種表達式。加上圓括號的目的是迫使eval函數(shù)在處理JavaScript代碼的時候強制將括號內(nèi)的表達式（expression）轉(zhuǎn)化為對象，而不是作為語句（statement）來執(zhí)行。舉一個例子，例如對象字面量{}，如若不加外層的括號，那么eval會將大括號識別為JavaScript代碼塊的開始和結(jié)束標(biāo)記，那么{}將會被認為是執(zhí)行了一句空語句。
以上這篇基于$.ajax()方法從服務(wù)器獲取json數(shù)據(jù)的幾種方式總結(jié)就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
本周公司技術(shù)講座輪到我了，準(zhǔn)備說說現(xiàn)在流行的jQuery，下面是概要提綱，關(guān)鍵是看custom.js，已上傳源碼，程序中“//##”是分段用的，大家可以根據(jù)每一段取消注釋，然后找到相應(yīng)的id或class名查看效果。2010-01-01
這篇文章主要介紹了基于jQuery實現(xiàn)仿百度首頁選項卡切換效果的相關(guān)資料,非常不錯具有參考借鑒價值，需要的朋友可以參考下2016-05-05
ligerGrid是ligerui系列插件的核心控件，用戶可以快速地創(chuàng)建一個美觀,而且功能強大的表格,支持排序、分頁、多表頭、固定列等等2012-01-01
本篇文章是對jQuery中的自動完成組件進行了詳細的分析介紹，需要的朋友參考下2013-06-06
本文主要介紹了jQuery實現(xiàn)頁面滾動時智能浮動定位的方法。附上完整代碼，具有一定的參考價值，下面跟著小編一起來看下吧2017-01-01
這篇文章主要介紹了jquery的方法屬性,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2021-11-11
這篇文章主要介紹了jQuery實現(xiàn)簡單的DIV拖動效果,涉及jQuery針對鼠標(biāo)事件的響應(yīng)及頁面元素的動態(tài)操作技巧,需要的朋友可以參考下2016-02-02
jQuery實現(xiàn)IE輸入框完成placeholder標(biāo)簽功能的方法
這篇文章主要介紹了jQuery實現(xiàn)IE輸入框完成placeholder標(biāo)簽功能的方法,涉及jQuery事件響應(yīng)及針對頁面元素屬性的動態(tài)操作相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2017-09-09
用戶管理的設(shè)計_jquery的ajax實現(xiàn)二級聯(lián)動效果
下面小編就為大家?guī)硪黄脩艄芾淼脑O(shè)計_jquery的ajax實現(xiàn)二級聯(lián)動效果。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
jquery實現(xiàn)帶漸變淡入淡出并向右依次展開的多級菜單效果實例
這篇文章主要介紹了jquery實現(xiàn)帶漸變淡入淡出并向右依次展開的多級菜單效果,涉及jquery鼠標(biāo)事件及頁面元素動態(tài)樣式設(shè)置的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-08-08