jquery通过ajax方式获取json数据和解析

傷城~ 2022-06-11 03:08 462阅读 0赞

一．jquery获取json数据：

Jquery发送ajax请求的语法：

$.ajax(*\{name:value, name:value, ... \}*)

该参数规定 AJAX 请求的一个或多个名称/值对。

下面是可能的名称/值：

<table> 
 <tbody> 
 <tr> 
 <td style="vertical-align:top;"> async </td> 
 <td style="vertical-align:top;"> 布尔值，表示请求是否异步处理。默认是 true。 </td> 
 </tr> 
 <tr> 
 <td> beforeSend(xhr) </td> 
 <td> 发送请求前运行的函数。 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;"> cache </td> 
 <td style="vertical-align:top;"> 布尔值，表示浏览器是否缓存被请求页面。默认是 true。 </td> 
 </tr> 
 <tr> 
 <td> complete(xhr,status) </td> 
 <td> 请求完成时运行的函数（在请求成功或失败之后均调用，即在 success 和 error 函数之后）。 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;"> contentType </td> 
 <td style="vertical-align:top;"> 发送数据到服务器时所使用的内容类型。默认是："application/x-www-form-urlencoded"。 </td> 
 </tr> 
 <tr> 
 <td> context </td> 
 <td> 为所有 AJAX 相关的回调函数规定 "this" 值。 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;"> data </td> 
 <td style="vertical-align:top;"> 规定要发送到服务器的数据。 </td> 
 </tr> 
 <tr> 
 <td> dataFilter(data,type) </td> 
 <td> 用于处理 XMLHttpRequest 原始响应数据的函数。 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;"> dataType </td> 
 <td style="vertical-align:top;"> 预期的服务器响应的数据类型。 </td> 
 </tr> 
 <tr> 
 <td> error(xhr,status,error) </td> 
 <td> 如果请求失败要运行的函数。 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;"> global </td> 
 <td style="vertical-align:top;"> 布尔值，规定是否为请求触发全局 AJAX 事件处理程序。默认是 true。 </td> 
 </tr> 
 <tr> 
 <td> ifModified </td> 
 <td> 布尔值，规定是否仅在最后一次请求以来响应发生改变时才请求成功。默认是 false。 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;"> jsonp </td> 
 <td style="vertical-align:top;"> 在一个 jsonp 中重写回调函数的字符串。 </td> 
 </tr> 
 <tr> 
 <td> jsonpCallback </td> 
 <td> 在一个 jsonp 中规定回调函数的名称。 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;"> password </td> 
 <td style="vertical-align:top;"> 规定在 HTTP 访问认证请求中使用的密码。 </td> 
 </tr> 
 <tr> 
 <td> processData </td> 
 <td> 布尔值，规定通过请求发送的数据是否转换为查询字符串。默认是 true。 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;"> scriptCharset </td> 
 <td style="vertical-align:top;"> 规定请求的字符集。 </td> 
 </tr> 
 <tr> 
 <td> success(result,status,xhr) </td> 
 <td> 当请求成功时运行的函数。 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;"> timeout </td> 
 <td style="vertical-align:top;"> 设置本地的请求超时时间（以毫秒计）。 </td> 
 </tr> 
 <tr> 
 <td> traditional </td> 
 <td> 布尔值，规定是否使用参数序列化的传统样式。 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;"> type </td> 
 <td style="vertical-align:top;"> 规定请求的类型（GET 或 POST）。 </td> 
 </tr> 
 <tr> 
 <td> url </td> 
 <td> 规定发送请求的 URL。默认是当前页面。 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;"> username </td> 
 <td style="vertical-align:top;"> 规定在 HTTP 访问认证请求中使用的用户名。 </td> 
 </tr> 
 <tr> 
 <td> xhr </td> 
 <td> 用于创建 XMLHttpRequest 对象的函数。 </td> 
 </tr> 
 </tbody> 
</table>

下面是我自己写的一个实例：

url返回的json数据如下：

\[\{"id":1,"title":"耳温枪","start":"2017-08-05  05:00:00","end":"2017-07-28 17:00:00","allDay":0,"color":"\#360","date":"2017:7:27"\}\]

ajax请求与解析如下：

$.ajax({
 				url : '${basePath}/calendar/getdata.action?date='
 						+ date.getFullYear() + ':' + (date.getMonth() + 1)
 						+ ':' + date.getDate(),
 				success : function(json) {
 					$.each(json, function(i, item) {
 						//循环获取数据 
 						var Id = item.id;
 						var title = item.title;
 						var start = item.start;
 						var end = item.end;
 						$("#ul").append(
 								"<li class='list-group-item'> <h5 class='list-group-item-heading'>"
 										+ title
 										+ "</h5> "
 										+ end
 										+ "</li>");
 
 					});
 
 				}
 			});

二．当然不同的json返回的数据解析方式也不一样：

大概有以下几种：

1.json数据 :\{"id":1,"title":"耳温枪","start":"2017-08-05  05:00:00","end":"2017-07-28 17:00:00","allDay":0,"color":"\#360","date":"2017:7:27"\}

解析方法：

该json本身就是一个json对象，所以可以直接获取：

**var** Id = json.id;

**var** title = json.title;

**var** start = json.start;

**var** end = json.end;

2.json数据：\[\{"id":1,"title":"耳温枪","start":"2017-08-05  05:00:00","end":"2017-07-28 17:00:00","allDay":0,"color":"\#360","date":"2017:7:27"\}\]

解析方法：

$.each(json, **function**(i, item) \{