基于$.ajax（）⽅法从服务器获取json数据的⼏种⽅式总结
⼀．什么是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的安装⽬录\l中就定义了⼤量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对象使⽤。
//Java代码：后台获取单个数控定位器的历史表格的数据
public void getHistorySingleData() throws IOException{
HttpServletRequest request = Request();
HttpServletResponse response = Response();
response.setHeader("Content-type", "text/html;charset=UTF-8");
response.setContentType("text/html;charset=utf-8");
String deviceName = Parameter("deviceName");
String startDate= Parameter("startDate");
String endDate = Parameter("endDate");
SingleHistoryData[] singleHistoryData = HistorySingleData(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对象就打印⼏个对象的 Writer().print(JSONArray.fromObject(singleHistoryData).toString());
}
jquery 字符串转数组/*js代码：选择查询某⼀时间段的数据，点击查询之后进⾏显⽰*/
$("#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":"运⾏ alert(String.call(data)); //--->弹出[object String]，说明获取的是String类型的数据
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("您选择的时间段⽆数据，请重新查询");
}
for(var i = 0; i < JsonObjs.length; i++){
var name = JsonObjs[i]['time'];//针对每⼀条数据：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};//个数与下⾯表头对应起来就可以了，⾄于叫什么名字并不影响控件的使⽤
}
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":["时间","运⾏状态","球头状态","X向位置/mm","Y向位置/mm","Z向位置/mm","X向承载⼒/Kg","Y向承载⼒/Kg","Z向承载⼒/Kg"], //必须 thead表头
"body":data1, //必须 tbody 后台返回的数据展⽰
"foot":true, // true/false 是否显⽰tfoot --- 默认false
"displayNum": 10, //必须默认 10 每页显⽰⾏数
"groupDataNum":6, //可选默认 10 组数
sort:false, // 点击表头是否排序 true/false --- 默认false
search:false, // 默认为false 没有搜索
lang:{
gopageButtonSearchText:"搜索"
}
}
var cs = new KingTable(null,userOptions);
}
});
});
2、$.ajax()参数中设置dataType="json"，则jquery会⾃动将返回的字符串转化为json对象。后台可以设置为：【推荐】response.setContentType("text/html;charset=utf-8")；或者
response.setContentType("application/json;charset=utf-8");
//Java代码：后台获取单个数控定位器的历史表格的数据
public void getHistorySingleData() throws IOException{
HttpServletRequest request = Request();
HttpServletResponse response = Response();
response.setHeader("Content-type", "text/html;charset=UTF-8");
response.setContentType("text/html;charset=utf-8");
String deviceName = Parameter("deviceName");
String startDate= Parameter("startDate");
String endDate = Parameter("endDate");
SingleHistoryData[] singleHistoryData = HistorySingleData(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对象就打印⼏个对象的 Writer().print(JSONArray.fromObject(singleHistoryData).toString());
}
/*js代码：页⾯⾸次加载时，显⽰规定时间段的数据*/
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":["时间","运⾏状态","球头状态","X向位置/mm","Y向位置/mm","Z向位置/mm","X向承载⼒/Kg","Y向承载⼒/Kg","Z向承载⼒/Kg"], //必须 thead表头
"body":data1, //必须 tbody 后台返回的数据展⽰
"foot":true, // true/false 是否显⽰tfoot --- 默认false
"displayNum": 10, //必须默认 10 每页显⽰⾏数
"groupDataNum":6, //可选默认 10 组数
sort:false, // 点击表头是否排序 true/false --- 默认false
search:false, // 默认为false 没有搜索
lang:{
gopageButtonSearchText:"搜索"
}
}
var cs = new KingTable(null,userOptions);
}
});
3、ajax⽅法参数中不指定dataType，后台设置返回类型为"application/json"。这样jquery就会根据mime类型来智能判断，并⾃动解析成json对象。
//Java代码：后台获取单个数控定位器的历史表格的数据
public void getHistorySingleData() throws IOException{
HttpServletRequest request = Request();
HttpServletResponse response = Response();
response.setHeader("Content-type", "text/html;charset=UTF-8");
response.setContentType("application/json;charset=utf-8");
String deviceName = Parameter("deviceName");
String startDate= Parameter("startDate");
String endDate = Parameter("endDate");
SingleHistoryData[] singleHistoryData = HistorySingleData(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对象就打印⼏个对象的 Writer().print(JSONArray.fromObject(singleHistoryData).toString());
}
/*js代码：页⾯⾸次加载时，显⽰规定时间段的数据*/
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":["时间","运⾏状态","球头状态","X向位置/mm","Y向位置/mm","Z向位置/mm","X向承载⼒/Kg","Y向承载⼒/Kg","Z向承载⼒/Kg"], //必须 thead表头
"body":data1, //必须 tbody 后台返回的数据展⽰
"foot":true, // true/false 是否显⽰tfoot --- 默认false
"displayNum": 10, //必须默认 10 每页显⽰⾏数
"groupDataNum":6, //可选默认 10 组数
sort:false, // 点击表头是否排序 true/false --- 默认false
search:false, // 默认为false 没有搜索
lang:{
gopageButtonSearchText:"搜索"
}
}
var cs = new KingTable(null,userOptions);
}
});
注意：只要前台或者后台有⼀处设置了返回json对象，就⽆需使⽤eval()⽅法或$.parseJSON()⽅法解析了，再解析就出错。
总结：以上⼏种⽅式，推荐使⽤第⼆种⽅式，⽅便且不易出错。
五．eval()⽅法
var json对象=eval('('+json数据+')');⼤括号括起来的内容被eval()执⾏后返回的是⼀个JSON对象。
eval函数的⼯作原理：eval函数会评估⼀个给定的含有JavaScript代码的字符串，并且试图去执⾏包含在字符串⾥的表达式或者⼀系列的合法的JavaScript语句。eval函数将把最后⼀个表达式或者语句所
包含的值或引⽤作为返回值。
为什么要 eval这⾥要添加 “("("+data+")");//”呢？
原因在于：eval本⾝的问题。由于json是以”{}”的⽅式来开始以及结束的，在JS中，它会被当成⼀个语句块来处理，所以必须强制性的将它转换成⼀种表达式。加上圆括号的⽬的是迫使eval函数在处理JavaScript代码的时候强制将括号内的表达式（expression）转化为对象，⽽不是作为语句（statement）来执⾏。举⼀个例⼦，例如对象字⾯量{}，如若不加外层的括号，那么eval会将⼤括号识别为JavaScript代码块的开始和结束标记，那么{}将会被认为是执⾏了⼀句空语句。
以上这篇基于$.ajax()⽅法从服务器获取json数据的⼏种⽅式总结就是⼩编分享给⼤家的全部内容了，希望能给⼤家⼀个参考，也希望⼤家多多⽀持。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论