js中ajax使用方法（$.ajax（）方法怎样从服务器里获取json数据）

本文目录

• $.ajax（）方法怎样从服务器里获取json数据
• js怎么使用ajax接受数据

$.ajax（）方法怎样从服务器里获取json数据

这次给大家带来$.ajax()方法怎样从服务器里获取json数据，$.ajax()方法从服务器里获取json数据的注意事项有哪些，下面就是实战案例，一起来看一下。
一．什么是json
json是一种取代xml的数据结构，和xml相比，它更小巧但描述能力却很强，网络传输数据使用流量更少，速度更快。
json就是一串字符串，使用下面的符号标注。
{键值对} ： json对象
：json数组
"" ：双引号内是属性或值
: ：冒号前为键，后为值（这个值可以是基本数据类型的值，也可以是数组或对象），所以 {"age": 18}
可以理解为是一个包含age为18的json对象，而[{"age": 18},{"age":
20}]就表示包含两个对象的json数组。也可以使用{"age":}来简化上面的json数组，这是一个拥有一个age数组的对象。
二．$.ajax()方法中dataType属性的取值
***隐藏网址***
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的安装目录confweb.xml中就定义了大量MIME类型 ，可以参考。比如可以设置：
response.setContentType("text/html; charset=utf-8"); html
response.setContentType("text/plain; charset=utf-8"); 文本
application/json json数据
***隐藏网址***
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 = 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());//打印：查到几条singleHistoryData对象就打印几个对象的信息{"time":"2016-11-11 10:00:05","state":"运行","ball":"锁紧",....}
response.getWriter().print(JSONArray.fromObject(singleHistoryData).toString());
}/*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);//----》弹出，后台传过来几条singleHistoryData对象就打印几个对象的信息{"time":"2016-11-11 10:00:05","state":"运行","ball":"锁紧",....}
alert(Object.prototype.toString.call(data)); //---》弹出，说明获取的是String类型的数据
var JsonObjs = eval("(" + data + ")"); //或者：var JsonObjs = $.parseJSON(data);
alert(JsonObjs);//alert(JsonObjs);----》弹出
n=JsonObjs.length;
if(n==0){
alert("您选择的时间段无数据，请重新查询");
}
for(var i = 0; i 《 JsonObjs.length; i++){
var name = JsonObjs.time
var state = JsonObjs;
var ball = JsonObjs;
var xd = JsonObjs;
var yd = JsonObjs;
var zd = JsonObjs;
var xf = JsonObjs;
var yf = JsonObjs;
var zf = JsonObjs;
data1 = {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 = {name:" ",state:"",ball:"",xd:"",yd:"",zd:"",xf:"",yf:"",zf:""};
}
}
var userOptions = {
"id":"kingTable", //必须 表格id
"head":, //必须 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 = 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());//打印：查到几条singleHistoryData对象就打印几个对象的信息{"time":"2016-11-11 10:00:05","state":"运行","ball":"锁紧",....}
response.getWriter().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"
},
data

js怎么使用ajax接受数据

• 1. 用get方式 通过url传送数据，读取url里的数据。

  2. 用post方式 传送数据，数据会传送的更多。
     

• 用ajax请求地址，然后会返回一个data，自己修改一下数据格式就行了