Ajax技术(6)--ajax 对 html和Json 格式的解析

一、解析html页面

有的时候会将一段HTML片段保存在HTML文件中，在另外的主页面直接读取该HTML文件，然后解析里面的HTML代码片段融入到主页面中。

a.html页面内容

<div>hello Jquery</div>

在其他页面解析a.html代码如下:

$("#a1").click(function(){
$("#div2").load('fragment.html');
return false;
});

二、解析json格式的数据

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代码  

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();  

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

 

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

 

3.解析Json如下数组：

{

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

Js代码  

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. });  

 

4.解析如下Json数据

{ "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" }
 ]
}

 

Js代码  

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. });  

 

 5.

{ "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"}]} ] } }

 

 

 

 

Js代码  

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. });  

 

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

 

Js代码  

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.     }   

转载自http://xiaoxiong-it.iteye.com/blog/1485121 作者: 遇见未来