ajax 对 Json 格式的解析

深藏阁楼爱情的钟 2022-06-13 01:20 248阅读 0赞

转自：http://blog.csdn.net/asia\_kobe/article/details/50504279

**Json 的介绍：**

JSON 可以将 [JavaScript][] 对象中表示的一组数据转换为字符串，然后就可以在函数之间轻松地传递这个字符串，或者在异步应用程序中将字符串从 Web 客户机传递给服务器端程序。

按照最简单的形式，可以用下面这样的 JSON 表示名称/值对：

\{ “firstName”: “Brett” \}

这样的键/值对也可以是多个：

\{“name”:”aaa”,”sex”:”男”,”age”:”20”\}  
从语法方面来看，这与名称/值对相比并没有很大的优势，但是在这种情况下 JSON 更容易使用，而且可读性更好。

值的数组

当需要表示一组值时，JSON 不但能够提高可读性，而且可以减少复杂性。

如果使用 JSON，就只需将多个带花括号的记录分组在一起：

\{ “people”: \[  
\{ “firstName”: “Brett”, “lastName”:”McLaughlin”, “email”: “111111” \},  
\{ “firstName”: “Jason”, “lastName”:”Hunter”, “email”: “22222” \},  
\{ “firstName”: “Elliotte”, “lastName”:”Harold”, “email”: “33333” \}  
\]\}

可以使用相同的语法表示多个值（每个值包含多个记录）：

\{ “programmers”: \[  
\{ “firstName”: “Brett”, “lastName”:”McLaughlin”, “email”: “3333” \},  
\{ “firstName”: “Jason”, “lastName”:”Hunter”, “email”: “1222” \},  
\{ “firstName”: “Elliotte”, “lastName”:”Harold”, “email”: “3333” \}  
\],  
“authors”: \[  
\{ “firstName”: “Isaac”, “lastName”: “Asimov”, “genre”: “science fiction” \},  
\{ “firstName”: “Tad”, “lastName”: “Williams”, “genre”: “fantasy” \},  
\{ “firstName”: “Frank”, “lastName”: “Peretti”, “genre”: “christian fiction” \}  
\],  
“musicians”: \[  
\{ “firstName”: “Eric”, “lastName”: “Clapton”, “instrument”: “guitar” \},  
\{ “firstName”: “Sergei”, “lastName”: “Rachmaninoff”, “instrument”: “piano” \}  
\]  
\}

Json也可以这样写：

`{ "listaccountsresponse" : { "count":1 ,"account" : [ {"id":5,"name":"xian1","accounttype":0,"domainid"``:2,"domain":"Server","receivedbytes":649444,"sentbytes":175467975,"vmlimit":"20","vmtotal":2,"vmavailable"``:"18","iplimit":"20","iptotal":1,"ipavailable":"19","volumelimit":"20","volumetotal":2,"volumeavailable"``:"18","snapshotlimit":"20","snapshottotal":0,"snapshotavailable":"20","templatelimit":"20","templatetotal"``:0,"templateavailable":"20","vmstopped":0,"vmrunning":2,"state":"enabled","user":[{"id":5,"username"``:"xian1","firstname":"Eric","lastname":"Tang","email":"Wang-Ngai.Tang@pccw.com","created":"2012-03-22T09``:36:44+0800","state":"enabled","account":"xian1","accounttype":0,"domainid":2,"domain":"Server","timezone"``:"Asia/Shanghai"}]} ] } }`

**ajax对Json格式数据的解析** ：

1.对简单json格式的解析：

\{ “firstName”: “Brett” \}

写道

$.ajax(\{  
url:”这里是你要请求的地址”,  
data:\{“id”:id\}, //以键/值对的形式  
async : false,  
dataType : “json”,  
success : function(data) \{  
alert(“firstName = ” + data.firstName);  
\}  
\});

注：这里的data是你从后台穿过来的Json字符传串。

后台写法：

Java代码 ![收藏代码][icon_star.png]

1.  response.setCharacterEncoding(”utf-8”);
2.  response.setContentType(”text/json;charset=UTF-8”);
3.  PrintWriter out = null;
4.  String count = ”<span style=”color: \#000000;“>\{ ”firstName“: ”Brett” \}</span>
5.  
6.  ;
7.  try \{
8.  out = response.getWriter();
9.  \} catch (Exception e) \{
10. e.printStackTrace();
11. \}
12. out.print(count);
13. out.flush();

![save_snippets.png][]

这样就能在前台页面弹出提示框：firstName = Brett。

2.多个键/值对和上面的情况一样

3.解析Json如下数组：

\{ “firstName”: “Brett”, “lastName”:”McLaughlin”, “email”: “111111” \},  
\{ “firstName”: “Jason”, “lastName”:”Hunter”, “email”: “22222” \},  
\{ “firstName”: “Elliotte”, “lastName”:”Harold”, “email”: “33333” \}  
\}

Js代码 ![收藏代码][icon_star.png]

1.  $.ajax(\{
2.  url:”这里是你要请求的地址”,
3.  data:\{ ”id”:id\}, //以键/值对的形式
4.  async : false,
5.  dataType : ”json”,
6.  success : function(data) \{
7.  for(int i = 0; i < data.length; i++) \{ //循环后台传过来的Json数组
8.  var datas = data\[i\];
9.  alert(datas.firstName);
10. alert(datas.lastName);
11. alert(datas.email);
12. \}
13. \}
14. \});

![save_snippets.png][]

4.解析如下Json数据

Js代码 ![收藏代码][icon_star.png]

1.  $.ajax(\{
2.  url:”这里是你要请求的地址”,
3.  data:\{ ”id”:id\}, //以键/值对的形式
4.  async : false,
5.  dataType : ”json”,
6.  success : function(data) \{
7.  var pro = data.programmers; // pro为programmers的一个数组
8.  for(int i = 0; i < pro.length; i++) \{ //循环后台传过来的Json数组
9.  var datas = pro\[i\];
10. alert(pro.firstName);
11. alert(pro.lastName);
12. alert(pro.email);
13. \}
14. var aut = data.authors; // aut为authors的一个数组
15. for(int i = 0; i < aut.length; i++) \{ //循环后台传过来的Json数组
16. var datas = aut\[i\];
17. alert(aut.firstName);
18. alert(aut.lastName);
19. alert(aut.genre);
20. \}
21. var mus = data.musicians; // aut为authors的一个数组
22. for(int i = 0; i < mus.length; i++) \{ //循环后台传过来的Json数组
23. var datas = mus\[i\];
24. alert(mus.firstName);
25. alert(mus.lastName);
26. alert(mus.instrument);
27. \}
28. 
29. \}
30. \});

![save_snippets.png][]

Js代码 ![收藏代码][icon_star.png]

1.  $.ajax(\{
2.  url:”这里是你要请求的地址”,
3.  data:\{ ”id”:id\}, //以键/值对的形式
4.  async : false,
5.  dataType : ”json”,
6.  success : function(data) \{
7.  var accounts = data.listaccountsresponse.account; //取到“account”中的数据
8.  for(int i = 0; i < accounts.length; i++) \{ //循环后台传过来的Json数组
9.  var datas = accounts\[i\];
10. alert(datas.id);
11. alert(datas.name);
12. alert(datas.accounttype);
13. ……….
14. \}
15. \}
16. \});

![save_snippets.png][]

—–这里是自己写的一个后台传值———————————————————————————————————-

Js代码 ![收藏代码][icon_star.png]

1.  @RequestMapping(value=”/applyVm/listApplyVmCount”, method=\{RequestMethod.GET, RequestMethod.POST\})
2.  public void listApplyVmCount(HttpServletRequest request, HttpServletResponse response) \{
3.  response.setCharacterEncoding(”utf-8”);
4.  response.setContentType(”text/json;charset=UTF-8”);
5.  PrintWriter out = null;
6.  String count = ”“;
7.  try \{
8.  out = response.getWriter();
9.  Map<String, Integer> map = applyVmService.findApplyVmCount();
10. Gson gson = new Gson();
11. count = gson.toJson(map);
12. \} catch (Exception e) \{
13. e.printStackTrace();
14. \}
15. out.print(count);
16. out.flush();
17. \}

![save_snippets.png][]

document.getElementById("bdshell\_js").src = "http://bdimg.share.baidu.com/static/js/shell\_v2.js?cdnversion=" + Math.ceil(new Date()/3600000)

<div id="digg" articleid="50504279">
            <dl id="btnDigg" class="digg digg_enable" onclick="btndigga();">
    
                 <dt>顶</dt>
                <dd>0</dd>
            </dl>
    
    
            <dl id="btnBury" class="digg digg_enable" onclick="btnburya();">
    
                  <dt>踩</dt>
                <dd>0</dd>               
            </dl>
    
        </div>
     <div class="tracking-ad" data-mod="popu_222"><a href="javascript:void(0);" target="_blank"> </a>   </div>
    <div class="tracking-ad" data-mod="popu_223"> <a href="javascript:void(0);" target="_blank"> </a></div>
    <script type="text/javascript">
                function btndigga() {
                    $(".tracking-ad[data-mod='popu_222'] a").click();
                }
                function btnburya() {
                    $(".tracking-ad[data-mod='popu_223'] a").click();
                }
            </script>

*    
    
 *  上一篇深入浅出Mybatis系列（九）-强大的动态SQL
 *  下一篇Jquery ajax方法解析返回的json数据

<div style="clear:both; height:10px;"></div>
    
    
            <div class="similar_article">
                    <h4></h4>
                    <div class="similar_c" style="margin:20px 0px 0px 0px">
                        <div class="similar_c_t">
                            相关文章推荐
                        </div>
    
                        <div class="similar_wrap tracking-ad" data-mod="popu_36" style="max-height:195px;">                       
                            <ul class="similar_list fl">    
                                   <li>
                                       <em>•</em>
                                       <a href="http://blog.csdn.net/hulefei29/article/details/3345053" title="Ajax中XML和JSON格式的优劣比较" strategy="" target="_blank" style="width: 290px;">Ajax中XML和JSON格式的优劣比较</a>
                                   </li>
                                   <li>
                                       <em>•</em>
                                       <a href="http://dreams75.iteye.com/blog/512554" title="原生AJAX或jQuery实现二级联动选择以及解析XML和JSON数据格式" strategy="" target="_blank" style="width: 290px;">原生AJAX或jQuery实现二级联动选择以及解析XML和JSON数据格式</a>
                                   </li>
                                   <li>
                                       <em>•</em>
                                       <a href="http://blog.csdn.net/dainiao01/article/details/2471965" title="基于JSON格式报文的AJAX通用实现" strategy="" target="_blank" style="width: 290px;">基于JSON格式报文的AJAX通用实现</a>
                                   </li>
                                   <li>
                                       <em>•</em>
                                       <a href="http://blog.csdn.net/wk206612776/article/details/36503367" title="js/jquery解析json和数组格式的方法介绍" strategy="" target="_blank" style="width: 290px;">js/jquery解析json和数组格式的方法介绍</a>
                                   </li>
                                   <li>
                                       <em>•</em>
                                       <a href="http://baihe747.iteye.com/blog/2167169" title="js解析文本数据  xml格式数据,json数据和ajax和servlet交互乱码解决" strategy="" target="_blank" style="width: 290px;">js解析文本数据  xml格式数据,json数据和ajax和servlet交互乱码解决</a>
                                   </li>
                            </ul>
                              <ul class="similar_list fr">      
                                   <li>
                                       <em>•</em>
                                       <a href="http://film.iteye.com/blog/254911" title="extjs ajax方式前后台数据传送(json格式)" strategy="" target="_blank" style="width: 290px;">extjs ajax方式前后台数据传送(json格式)</a>
                                   </li>
                                   <li>
                                       <em>•</em>
                                       <a href="http://blog.csdn.net/liujiahan629629/article/details/17332297" title="AJAX——JSON数据格式" strategy="" target="_blank" style="width: 290px;">AJAX——JSON数据格式</a>
                                   </li>
                                   <li>
                                       <em>•</em>
                                       <a href="http://barabbas.iteye.com/blog/1773564" title="JSON格式解析 ." strategy="" target="_blank" style="width: 290px;">JSON格式解析 .</a>
                                   </li>
                                   <li>
                                       <em>•</em>
                                       <a href="http://blog.csdn.net/caozhi01/article/details/3414196" title="ajax打印对象时,转换由java对象转为Json格式的String时遇到的Hibernate问题" strategy="" target="_blank" style="width: 290px;">ajax打印对象时,转换由java对象转为Json格式的String时遇到的Hibernate问题</a>
                                   </li>
                                   <li>
                                       <em>•</em>
                                       <a href="http://yang7527.iteye.com/blog/768401" title="extjs ajax方式前后台数据传送(json格式 " strategy="" target="_blank" style="width: 290px;">extjs ajax方式前后台数据传送(json格式 </a>
                                   </li>
                            </ul>
                        </div>
                    </div>
                </div>

[JavaScript]: http://lib.csdn.net/base/javascript
[icon_star.png]: /images/20220613/d8b3404a907340709104b4be122e60e5.png
[save_snippets.png]: /images/20220613/3e69497d409c400ab1a272cc244d60b6.png