基于$从服务器获取json数据的几种方法总结。ajax()方法

一.什么是json

Json是一种取代xml的数据结构。与xml相比，JSON更小但描述能力强，网络传输数据使用流量更少，速度更快。

Json是一个字符串，用以下符号标记。

{键值对}: JSON对象

}来简化上面的json数组，这是一个带有age数组的对象。

第二，$中dataType属性的值。Ajax()方法

$中的数据类型属性。ajax()方法需要一个String类型的参数，服务器返回的数据类型是预期的。如果没有指定，JQuery会根据http包的mime信息自动返回responseXML或responseText，在第三部分进行解释，并作为回调函数参数传递。可用类型如下:

Xml:返回一个XML文档，可以由JQuery处理。

html:返回纯文本HTML信息；插入DOM时会执行包含的脚本标记。

脚本:返回普通的JavaScript代码。结果不会自动缓存。除非设置了缓存参数。请注意，当发出远程请求时(不在同一个域中)，所有post请求都将被转换为get请求。

Json:返回JSON数据。

Jsonp:JSONP格式。当调用SONP形式的函数时，比如myurl？回拨=？，JQuery将自动替换最后一个“？”是执行回调函数的正确函数名。

三。。Mime数据类型和setContentType()方法的响应。

什么是哑剧类型？当将输出结果传输到浏览器时，浏览器必须启动适当的应用程序来处理输出文档。这可以通过各种类型的MIME(多功能互联网邮件扩展协议)来完成。在HTTP中，MIME类型在Content-Type头中定义。

例如，如果您想向客户端发送一个Microsoft Excel文件。那么此时的MIME类型就是“application/vnd.ms-excel”。在大多数实际情况下，该文件将被发送到Execl进行处理(假设我们将Execl设置为处理特殊MIME类型的应用程序)。在Java中，设置MIME类型的方法是通过响应对象的ContentType属性。比如常用的:response . set content type(" text/html；Charset=UTF-8”)。

在最早的HTTP协议中，没有额外的数据类型信息，所有传输的数据都被客户端程序解释为HTML文档。为了支持多媒体数据类型，在HTTP协议中使用附加到文档的MIME数据类型信息来标识数据类型。

每个MIME类型由两部分组成，第一部分是大类数据，如文本、图像等。，二是具体类别。

常见MIME类型:

超文本标记语言文本。html，。html文本/html

纯文本。txt文本/纯文本

RTF文本。rtf应用程序/rtf

GIF图形。gif图像/gif

JPEG图形。ipeg，。jpg图像/jpeg

Au声音文件。au音频/基本

MIDI音乐文件。midi音频/midi，音频/x-midi。

真实音频音乐文件。ra，。ram音频/x-pn-realaudio

Mpg，MPEG视频/mpeg。

AVI档案。avi视频/x-ms视频

GZIP档案。gz应用程序/x-gzip

TAR文件。焦油应用/x-焦油

当客户端程序从服务器接收数据时，它只接受来自服务器的数据流，不知道文档的名称，因此服务器必须使用附加信息来告诉客户端程序数据的MIME类型。

在发送真实数据之前，服务器应该发送标记数据的MIME类型信息。该信息由Content-type关键字定义。例如，对于一个HTML文档，服务器将首先发送下面两行MIME标识信息，它不是真实数据文件的一部分。

内容类型:文本/html

注意第二行是空行，这是必须的。使用这个空行的目的是将MIME信息与真实数据内容分开。

如前所述，在Java中，设置MIME类型的方法是通过Response对象的ContentType属性，设置方法是使用response.setContentType(MIME)语句。response.setContentType(MIME)的作用是让客户端浏览器区分不同种类的数据，根据不同的MIME调用浏览器中不同的程序嵌入模块处理相应的数据。

Tomcat的安装目录\conf\web.xml中定义了大量的MIME类型，可以参考。例如，您可以设置:

response . set content type(" text/html；charset = utf-8 ")；超文本标记语言

response . setcontenttype(" text/plain；charset = utf-8 ")；文本

应用程序/json

该方法设置发送给客户端的响应的内容类型，并且该响应尚未提交。给定的内容类型可以包括字符编码描述，例如:text/html；字符集=UTF-8 .如果在调用getWriter()方法之前调用此方法，则响应的字符编码将仅根据给定的内容类型进行设置。如果在调用或提交getWriter()方法之后调用此方法，将不会设置响应的字符编码。在使用http协议的情况下，该方法设置Content-type实体头。

四个。使用$获取json数据的三种方法。ajax()方法

dataType参数的配置决定了jquery如何帮助我们自动解析服务器返回的数据。有几种方法可以获得后台返回的json字符串，并将其解析为json对象。下面是一个Java的例子，下面三种方式的结果都如图1所示。项目在内网运行，不能截图，只能拍照。请原谅我。

1, $.ajax()参数没有设置数据类型，后台响应没有设置返回类型。默认情况下，response . setcontenttype(" text/html；charset = utf-8 ")；同样作为文本处理，js需要手动使用eval()或$等方法。parsejson()将返回的字符串转换成json对象。

//Java代码:后台获取单台数控定位器历史表的数据。

public void getHistorySingleData()抛出IOException{

http servlet request request = servletactioncontext . get request()；

http servlet response response = servletactioncontext . getresponse()；

response . set header(" Content-type "，" text/html；charset = UTF-8 ")；

response . set content type(" text/html；charset = utf-8 ")；

string device name = request . getparameter(" device name ")；

string start date = request . getparameter(" start date ")；

string end date = request . getparameter(" end date ")；

singlethistorydata[]singlethistorydata = chartservice . gethistorysingledata(device name，startDate，end date)；

system . out . println(singlehistorydata . length)；

system . out . println(JSON array . from object(singleHistoryData)。toString())；//Print:[{ " time ":" 2016-11110:00 "，" State": "Run "，" ball ":" { " time ":" 2016-11110:05 "，" State "...{} ...]打印几个singleHistoryData对象的信息{ " time ":" 2016-111110:05 "，" State "。

response.getWriter()。print(JSON array . from object(singleHistoryData))。toString())；

}

/*js代码:选择查询一定时间段内的数据，点击〖查询〗按钮显示*/

$("#search ")。单击(函数(){

var data 1 =[]；

var n；

var device name = $(“body”)。attr(" id ")；

var startDate = $("#startDate ")。val()；

var endDate = $("#endDate ")。val()；

$.ajax({

URL:"/av VII/chart/getHistorySingleData "，

类型:“帖子”，

数据:{

“设备名称”:设备名称，

“开始日期”:开始日期，

“结束日期”:结束日期

成功:函数(数据){

警报(数据)；//-& gt；弹出[{ " time ":" 2016-11110:00 "，" State": "Run "，" ball": "Lock "。{ "时间": " 2016-11-110:00:05 "，"状态":"跑"，"球":"锁"，...当后台出现几个singleHistoryData对象时，打印几个对象的信息{ " time ":" 2016-11-11 10:05 "，" State": "Run "，

alert(object . prototype . tostring . call(data))；//-& gt；弹出【对象字符串】，表示获取了字符串类型的数据。

var JsonObjs = eval("+data+")；//或者:var JsonObjs = $。parseJSON(数据)；

alert(JsonObjs)；//alert(JsonObjs)；-& gt；弹出[object Object]，[object object]，[object object]，[object object]，[object object]后台发送几个singleHistoryData对象，然后打印几个[object object]。

n = JsonObjs.length

if(n==0){

Alert("您选择的时间段内没有数据，请重新查询")；

}

for(var I = 0；我& ltJsonObjs.lengthi++){

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 & lt(10-((jsonobjs . length)% 10))；J++){ //填充最后一页的空行，保持表格长度不变。

data 1[j+jsonobjs . length]= { name:" "，state:" "，ball:" "，xd:" "，yd:" "，zd:" "，xf:" "，yf:" "，ZF:" " }；

}

var userOptions = {

" id": id":"kingTable "，///表id是必需的。

“头”:[“时间”、“跑步状态”、“球头状态”、“X方向位置/mm”、“Y方向位置/mm”、“X方向承重/Kg”、“Y方向承重/Kg”]、//

“body”:data 1，//后台显示tbody必须返回的数据。

“foot”:true，//true/false是否显示tfoot -默认为false。

" displaynum": 10。//默认情况下，每页显示的行数必须是10。

“group data num”:6。//默认的组数是10。

Sort:false，///点击表头是否排序true/false——默认为false。

Search:false，///默认为false。没有搜索。

郎:{

GopageButtonSearchText:"搜索"

}

var cs = new KingTable(null，user options)；

}

});

2.在＄中设置dataType="json"。ajax()参数，jquery会自动将返回的字符串转换成json对象。后台可以设置为:推荐回复。setcontenttype(" text/html；charset = utf-8 ")；或response . setcontenttype(" application/JSON；charset = utf-8 ")；

//Java代码:后台获取单台数控定位器历史表的数据。

public void getHistorySingleData()抛出IOException{

http servlet request request = servletactioncontext . get request()；

http servlet response response = servletactioncontext . getresponse()；

response . set header(" Content-type "，" text/html；charset = UTF-8 ")；

response . set content type(" text/html；charset = utf-8 ")；

string device name = request . getparameter(" device name ")；

string start date = request . getparameter(" start date ")；

string end date = request . getparameter(" end date ")；

singlethistorydata[]singlethistorydata = chartservice . gethistorysingledata(device name，startDate，end date)；

system . out . println(singlehistorydata . length)；

response.getWriter()。print(JSON array . from object(singleHistoryData))。toString())；

}

/*js代码:第一次加载页面时，会显示指定时间段的数据*/

var data 1 =[]；

var device name = $(“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:"/av VII/chart/getHistorySingleData "，

类型:“帖子”，

数据:{

“设备名称”:设备名称，

“开始日期”:“2000-01-01 00:00:00”，

"结束日期":" 2018-01-01 00:00:00 "

数据类型:“json”，

成功:函数(数据){

警报(数据)；//-& gt；[对象对象]，[对象对象]，[对象对象][对象对象]，[对象对象]，[对象对象]弹出。后台来了几个singleHistoryData对象就打印几个json对象吧:[ObjectObject]。

for(var I = 0；我& lt数据长度；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 & lt(10-((数据.长度)% 10))；J++){ //填充最后一页的空行，保持表格长度不变。

data 1[j+data . length]= {名称:""，状态:""，球:" "，xd:" "，yd:" "，zd:" "，xf:" "，yf:" "，ZF:" " }；

}