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

前端之家收集整理的这篇文章主要介绍了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","email": "3333" },"email": "1222" },"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":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","account":"xian1","domainid":2,"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. PrintWriterout=null;
  4. Stringcount="<spanstyle="color:#000000;">{"firstName":"Brett"}</span>
  5. ;
  6. try{
  7. out=response.getWriter();
  8. }catch(Exceptione){
  9. e.printStackTrace();
  10. }
  11. out.print(count);
  12. out.flush();

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

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

3.解析Json如下数组:

{

{ "firstName": "Brett","email": "33333" }
}

Js代码
    $.ajax({
  1. url:"这里是你要请求的地址",
  2. data:{"id":id},//以键/值对的形式
  3. async:false,250); line-height:18px"> dataType:"json",250); line-height:18px"> success:function(data){
  4. for(inti=0;i<data.length;i++){//循环后台传过来的Json数组
  5. vardatas=data[i];
  6. alert(datas.firstName);
  7. alert(datas.lastName);
  8. alert(datas.email);
  9. });

4.解析如下Json数据

varpro=data.programmers;//pro为programmers的一个数组
  • inti=0;i<pro.length;i++){vardatas=pro[i];
  • alert(pro.firstName);
  • alert(pro.lastName);
  • alert(pro.email);
  • varaut=data.authors;//aut为authors的一个数组
  • inti=0;i<aut.length;i++){vardatas=aut[i];
  • alert(aut.firstName);
  • alert(aut.lastName);
  • alert(aut.genre);
  • varmus=data.musicians;inti=0;i<mus.length;i++){vardatas=mus[i];
  • alert(mus.firstName);
  • alert(mus.lastName);
  • alert(mus.instrument);
  • 5.

    varaccounts=data.listaccountsresponse.account;//取到“account”中的数据

  • inti=0;i<accounts.length;i++){vardatas=accounts[i];
  • alert(datas.id);
  • alert(datas.name);
  • alert(datas.accounttype);
  • ..........
  • -----这里是自己写的一个后台传值----------------------------------------------------------------------------------------------------------

    @RequestMapping(value="/applyVm/listApplyVmCount",method={RequestMethod.GET,RequestMethod.POST})

  • publicvoidlistApplyVmCount(HttpServletRequestrequest,HttpServletResponseresponse){
  • Stringcount="";
  • Map<String,Integer>map=applyVmService.findApplyVmCount();
  • Gsongson=newGson();
  • count=gson.toJson(map);
  • out.flush();
  • }
  • 转载自http://xiaoxiong-it.iteye.com/blog/1485121 作者: 遇见未来

    猜你在找的Ajax相关文章