JQuery处理json与ajax返回JSON实例

浅浅的花香味﹌ 2022-08-05 15:16 254阅读 0赞

# JQuery处理json与ajax返回JSON实例 #

来源： 时间：2013-09-05 20:24:54 阅读数：491515

分享到：     [25][]

**\[导读\]** json数据是一种经型的实时数据交互的数据存储方法，使用到最多的应该是ajax与json配合使用了，下面我来给大家介绍jquery处理json数据方法。一、JSON的一些基础知识。JSON中对象通过\{\}来标识，一个\{\}代表一个对象

json数据是一种经型的实时数据交互的数据存储方法，使用到最多的应该是ajax与json配合使用了，下面我来给大家介绍jquery处理json数据方法。

**一、JSON的一些基础知识。**

JSON中对象通过“\{\}”来标识，一个“\{\}”代表一个对象，如\{“AreaId”:”123”\}，对象的值是键值对的形式（key：value）。

“\[\]”，标识数组，数组内部各个数据之间通过“，”分割，如\[“AreaId”:”123”，”AreaId”:”345”\]。

很多情况下是对象数组，那就是这样：

<table style="background:rgb(255,187,119)"> 
 <tbody> 
  <tr> 
   <td>代码如下</td> 
   <td align="center" style="">复制代码</td> 
  </tr> 
  <tr> 
   <td colspan="2" style="padding-bottom:10px; padding-left:10px; padding-right:10px; padding-top:10px"> <p>[{“AreaId”:”123”},{“AreaId”:”345”}]</p> </td> 
  </tr> 
 </tbody> 
</table>

其实数组也是一个对象，上面的格式也可以写成这样：

<table style="background:rgb(255,187,119)"> 
 <tbody> 
  <tr> 
   <td>代码如下</td> 
   <td align="center" style="">复制代码</td> 
  </tr> 
  <tr> 
   <td colspan="2" style="padding-bottom:10px; padding-left:10px; padding-right:10px; padding-top:10px"> <p>{“Area”：[{“AreaId”:”123”},{“AreaId”:”345”}]}</p> </td> 
  </tr> 
 </tbody> 
</table>

这表示一个Area对象，他有两个子数据，每个子数据也是一个对象，每个子对象都是AreaId。

JSON中字符串和字符的定义格式和一般的类[C语言][C]定义是类似的，双引号定义字符串，单引号定义字符。

JSON的键（Key）用双引号括起来，比如上面的“Area“和”AreaId“，都是用双引号括起来的，在一些语言中构造JSON字符串的时候，可以使用转义字符转义双引号。

**二、[javascript][]操作JSON字符**

1、先要区分JSON字符串和JSON对象

JSON字符串：

<table style="background:rgb(255,187,119)"> 
 <tbody> 
  <tr> 
   <td>代码如下</td> 
   <td align="center" style="">复制代码</td> 
  </tr> 
  <tr> 
   <td colspan="2" style="padding-bottom:10px; padding-left:10px; padding-right:10px; padding-top:10px"> <p>Var strJSON = “{“Area”：[{“AreaId”:”123”},{“AreaId”:”345”}]}”，</p> </td> 
  </tr> 
 </tbody> 
</table>

其实也可以写成这样：

<table style="background:rgb(255,187,119)"> 
 <tbody> 
  <tr> 
   <td>代码如下</td> 
   <td align="center" style="">复制代码</td> 
  </tr> 
  <tr> 
   <td colspan="2" style="padding-bottom:10px; padding-left:10px; padding-right:10px; padding-top:10px"> <p>Var strJSON = ‘{“Area”：[{“AreaId”:”123”},{“AreaId”:”345”}]}’，</p> </td> 
  </tr> 
 </tbody> 
</table>

这表示一个JSON字符串，由于在Js中单引号和双引号都可以表示一个字符串，所以上面第一个使用双引号和第二个使用单引号的都表示一个JSON字符串。

下面看看JSON对象

<table style="background:rgb(255,187,119)"> 
 <tbody> 
  <tr> 
   <td>代码如下</td> 
   <td align="center" style="">复制代码</td> 
  </tr> 
  <tr> 
   <td colspan="2" style="padding-bottom:10px; padding-left:10px; padding-right:10px; padding-top:10px"> <p>Var JSON = {“Area”：[{“AreaId”:”123”},{“AreaId”:”345”}]},</p> </td> 
  </tr> 
 </tbody> 
</table>

看到了吧，JSON对象最外面是没有单引号或者双引号的，这就表示一个JSON对象。

在服务器断的脚本：

<table style="background:rgb(255,187,119)"> 
 <tbody> 
  <tr> 
   <td>代码如下</td> 
   <td align="center" style="">复制代码</td> 
  </tr> 
  <tr> 
   <td colspan="2" style="padding-bottom:10px; padding-left:10px; padding-right:10px; padding-top:10px"> <p>&lt;?php<br> $data['id'] = 1;<br> $dat['name'] = "mary";<br> $da['red']= array_merge($data,$dat);<br> $data1['id'] = 2;<br> $dat1['name'] = "燕子";<br> $da['blue']= array_merge($data1,$dat1);<br> print_r($da);///打印出来是一个二维数组（如下）</p> <p>/*<br> Array<br> (<br> [red] =&gt; Array<br> (<br> [id] =&gt; 1<br> [name] =&gt; mary<br> )<br> [blue] =&gt; Array<br> (<br> [id] =&gt; 2<br> [name] =&gt; 燕子<br> )<br> )<br> */</p> <p>echo json_encode($da);//输出的是一个转化成json格式的字符串，可以直接在js中用（如下）<br> /*<br> {"red":{"id":1,"name":"mary"},"blue":{"id":2,"name":"u71d5u5b50"}}<br> */<br> ?&gt;</p> </td> 
  </tr> 
 </tbody> 
</table>

**[jquery][]脚本：**

返回到js后的处理：  
第一种要用到varl转化的：是字符串的时候就要用eval转化成jquery对象（如下）

<table style="background:rgb(255,187,119)"> 
 <tbody> 
  <tr> 
   <td>代码如下</td> 
   <td align="center" style="">复制代码</td> 
  </tr> 
  <tr> 
   <td colspan="2" style="padding-bottom:10px; padding-left:10px; padding-right:10px; padding-top:10px"> var arr = '{"red":{"id":1,"name":"mary"},"blue":{"id":2,"name":"u71d5u5b50"}}';//u71d5u5b50这个是php中自动转换的<br> var dataObj = eval("("+arr+")");//这里要加上加好括号和双引号的原因我也不知道，就当是json语法，只能死记硬背了<br> $.each(dataObj,function(idx,item){ <br> //输出 <br> alert(item.id+"哈哈"+item.name); <br> })</td> 
  </tr> 
 </tbody> 
</table>

第二种：不需要转化的：

<table style="background:rgb(255,187,119)"> 
 <tbody> 
  <tr> 
   <td>代码如下</td> 
   <td align="center" style="">复制代码</td> 
  </tr> 
  <tr> 
   <td colspan="2" style="padding-bottom:10px; padding-left:10px; padding-right:10px; padding-top:10px"> var arr = {"red":{"id":1,"name":"mary"},"blue":{"id":2,"name":"u71d5u5b50"}};<br> $.each(arr,function(idx,item){ <br> //输出<br> alert(item.id+"哈哈"+item.name);<br> })</td> 
  </tr> 
 </tbody> 
</table>

循环也有两种方法：  
//方法一：

<table style="background:rgb(255,187,119)"> 
 <tbody> 
  <tr> 
   <td>代码如下</td> 
   <td align="center" style="">复制代码</td> 
  </tr> 
  <tr> 
   <td colspan="2" style="padding-bottom:10px; padding-left:10px; padding-right:10px; padding-top:10px"> $.each(arr,function(idx,item){ <br> //输出<br> alert(item.id+"哈哈"+item.name);<br> })</td> 
  </tr> 
 </tbody> 
</table>

//方法二：

<table style="background:rgb(255,187,119)"> 
 <tbody> 
  <tr> 
   <td>代码如下</td> 
   <td align="center" style="">复制代码</td> 
  </tr> 
  <tr> 
   <td colspan="2" style="padding-bottom:10px; padding-left:10px; padding-right:10px; padding-top:10px"> for(var key in arr){ <br> alert(key);<br> alert(arr[key].status);<br> }</td> 
  </tr> 
 </tbody> 
</table>

大家可以试试效果。

**ajax返回JSON时的处理方式**

1,使用普通的aspx页面来处理  
本人觉得这种方式处理起来是最简单的了,看下面的代码吧

<table style="background:rgb(255,187,119)"> 
 <tbody> 
  <tr> 
   <td>代码如下</td> 
   <td align="center" style="">复制代码</td> 
  </tr> 
  <tr> 
   <td colspan="2" style="padding-bottom:10px; padding-left:10px; padding-right:10px; padding-top:10px"> $.ajax({ <br> type: "post", <br> url: "Default.aspx", <br> dataType: "json", <br> success: function (data) { <br> $("input#showTime").val(data[0].demoData); <br> }, <br> error: function (XMLHttpRequest, textStatus, errorThrown) { <br> alert(errorThrown); <br> } <br> });</td> 
  </tr> 
 </tbody> 
</table>

这里是后台传递数据的代码

<table style="background:rgb(255,187,119)"> 
 <tbody> 
  <tr> 
   <td>代码如下</td> 
   <td align="center" style="">复制代码</td> 
  </tr> 
  <tr> 
   <td colspan="2" style="padding-bottom:10px; padding-left:10px; padding-right:10px; padding-top:10px"> Response.Clear(); <br> Response.Write("[{"demoData":"This Is The JSON Data"}]"); <br> Response.Flush(); <br> Response.End();</td> 
  </tr> 
 </tbody> 
</table>

这种处理的方式将传递过来的数据直接解析为json数据，也就是说这里的前台js代码可能直接把这些数据解析成json对象数据，而并非字符串数据，如data\[0\].demoData，这里就直接使用了这个json对象数据

[25]: http://www.php100.com/html/program/jquery/2013/0905/5912.html#
[C]: http://www.php100.com/list-34/
[javascript]: http://www.php100.com/js_a/js.html
[jquery]: http://www.php100.com/list-139/