ajax返回数据解析总结

 ajax即异步 JavaScript 和 XML(Asynchronous JavaScript and XML)。

简短地说,在不重载整个网页的情况下,AJAX 通过后台加载数据,并在网页上进行显示。

使用 AJAX 的应用程序案例:谷歌地图、腾讯微博、优酷视频、人人网等等。

通过 jQuery AJAX 方法,您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON - 同时您能够把这些外部数据直接载入网页的被选元素中。

前面已经提过ajax的方法,这节主要记录针对ajax返回的数据处理方式。

 

一.html片段

由于服务端返回数据格式为html,因此并不需要特殊处理就可以直接加载到我们的主页面中。

1 $(function(){
2   $("#get").click(function(){
3        $.get("index.php",{username:$("#user").val(),
4          password:$("#password").val()},
5          function(data,textStatus){
6            $("#get").html(data)
7         }) 
8     })
9 })

 

二.xml格式

xml格式的数据需要经过处理,鉴于jquery强大的dom处理能力,处理xml文档也可以使用常规的attr(),find(),filter()以及其他方法。

 

<?xml version="1.0" encoding="UTF-8"?>
<stulist>
        <student  email="[email protected]"> 
                <name>zhangsan</name>
                <id>1</id>
        </student>
        <student  email="[email protected]">
               <name>lisi</name>
                <id>2</id>
        </student>
</stulist>


$.ajax({
    url:‘ajax.asp‘,
    type: ‘GET‘,
    dataType: ‘xml‘,//这里可以不写,但千万别写text或者html!!!
    timeout: 1000,
    error: function(xml){
        alert(‘Error loading XML document‘+xml);
    },
    success: function(xml){
        $(xml).find("student").each(function(i){
            var id=$(this).children("id"); //取对象
            var idvalue=$(this).children("id").text(); //取文本
            alert(id_value);//这里就是ID的值了。
            alert($(this).attr("email")); //这里能显示student下的email属性。
 
            //最后么输出了,这个是cssrain的写法,貌似比macnie更JQ一点
            $(‘<li></li>‘)
                .html(id_value)
                .appendTo(‘ol‘);
        });
    }
});

 

 

 

 

三.json(JavaScript Object Notation)格式

json数据是一种经型的实时数据交互的数据存储方法,JSON 是存储和交换文本信息的语法。类似 XML。JSON 比 XML 更小、更快,更易解析。

{
"employees": [
{ "firstName":"John" , "lastName":"Doe" },
{ "firstName":"Anna" , "lastName":"Smith" },
{ "firstName":"Peter" , "lastName":"Jones" }
]
}

var employees = [
{ "firstName":"Bill" , "lastName":"Gates" },
{ "firstName":"George" , "lastName":"Bush" },
{ "firstName":"Thomas" , "lastName": "Carter" }
];


可以这样访问:
1.如果为字符串格式:
如var arr = ‘{"red":{"id":1,"name":"mary"},"blue":{"id":2,"name":"u71d5u5b50"}}‘;//u71d5u5b50这个是php中自动转换的
var dataObj = eval("("+arr+")");//只能死记硬背
  $.each(dataObj,function(idx,item){   
   //输出  
   alert(item.id+"哈哈"+item.name);   
})

2.如果为对象格式
var arr = {"red":{"id":1,"name":"mary"},"blue":{"id":2,"name":"u71d5u5b50"}};
  $.each(arr,function(idx,item){     
   //输出
   alert(item.id+"哈哈"+item.name);
})



应用实例:

$(document).ready(function(){ 
$(‘#button‘).click(function(){ 
$.ajax({ 
type:"GET", 
url:"music.txt", 
dataType:"json", 
success:function(data){ 
var music="<ul>"; 
//i表示在data中的索引位置,n表示包含的信息的对象 
$.each(data,function(i,n){ 
//获取对象中属性为optionsValue的值 
music+="<li>"+n["optionValue"]+"</li>"; 
}); 
music+="</ul>"; 
$(‘#result‘).append(music); 

}); 
return false; 
}); 
});  

 

 

 

 

 

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。