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

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

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

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

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

一.html片段

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

 $(function(){
$("#get").click(function(){
$.get("index.php",{username:$("#user").val(),
password:$("#password").val()},
function(data,textStatus){
$("#get").html(data)
})
})
})

二.xml格式

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

<?xml version="1.0" encoding="UTF-8"?>
<stulist>
<student email="1@1.com">
<name>zhangsan</name>
<id>1</id>
</student>
<student email="2@2.com">
<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; 
}); 
});  

ajax返回数据解析总结的更多相关文章

  1. Jquery 等待ajax返回数据loading控件ShowLoading组件

    1.意义 开发项目中,前台的页面要发请求到服务器,服务器响应请求返回数据到前台,这段时间,有可能因为返回的数据量较大导致前台页面出现短暂性的等待,此时如果用户因不知情而乱点击有可能造成逻辑混乱,所以此 ...

  2. 小笔记(一):ajax传递数组及将ajax返回数据赋值

    当使用ajax传递数据时,有可能传递多个数据,这是使用以下方法传递数据就会显得数据过多且混杂 $.ajax({ type:'post', url:url, data:{data:data,conten ...

  3. ajax返回数据为undefined

    在使用ajax异步请求后台返回数据后,使用console.log(data.message)打印返回数据,显示为undefined.苦恼了很久,终于在网上找到了答案. 先给大家看下异步代码: /*清零 ...

  4. ajax返回数据之前的loading等待

    首先,我们通过ajax请求,向后台传递参数,然后后台经过一系列的运算之后向前台返还数据,我希望在等待数据成功返还之前可以展示一个loading.gif图 不废话,在页面上执行点击事件(<a sc ...

  5. Ajax返回数据却一直进入error(已经解决)

    做asp.net项目  使用ajax $.ajax({ url: '../Music/Default2.aspx?Types=' + type + '&texts=' + text + '', ...

  6. AJAX 的 Ajax返回数据之前的loading等待效果(gif效果等)

    首先,我们通过ajax请求,向后台传递参数,然后后台经过一系列的运算之后向前台返还数据,我希望在等待数据成功返还之前可以展示一个loading.gif图 不废话,在页面上执行点击事件(<a sc ...

  7. Bootstrap分页插件ajax返回数据,工具类的编写

    使用Bootstrap分页插件时,需要返回指定的参数,这样Bootstrap才能够识别 需要引入的css: <!-- boostrap table --> <link href=&q ...

  8. ajax返回数据时,如何将javascript值(通常为对象或数组)转为json字符串

    ajax获取值时,返回的数据为空时 alert后出现 [ ]; 用if语句判断时不为空,此时如何判断返回的数据是否为空.可将返回的值转化为json字符串. JSON.stringify() 方法用于将 ...

  9. struts通过Ajax返回数据时,例如对象类型,没有执行Ajax的回调函数

    <result type="json"  name="success">                 <param name=" ...

随机推荐

  1. RO05 - 如何编写RemObjects SDK服务端 (Delphi Version)

    转载:http://blog.csdn.net/henreash/article/details/2261134 本文档向你展示如何使用RemObjects(Delphi版)创建第一个服务.读了本文档 ...

  2. RPM常用组合【转载】

    RPM常用组合 -ivh:安装显示安装进度--install--verbose--hash -Uvh:升级软件包--Update: -qpl:列出RPM软件包内的文件信息[Query Package ...

  3. JS 自定义正则表达式

    1. 正则表达式规则 1.1 普通字符 字母.数字.汉字.下划线.以及后边章节中没有特殊定义的标点符号,都是"普通字符".表达式中的普通字符,在匹配一个字符串的时候,匹配与之相同的 ...

  4. HXOI 2014 PSet 4 Day 1 一模04日1 题解

    1. 最小花费(money.pas/c/cpp) 问题描述 在n个人中,某些人的银行账号之间可以互相转账.这些人之间转账的手续费各不相同.给定这些人之间转账时需要从转账金额里扣除百分之几的手续费,请问 ...

  5. 一个很不错的适合PHPER们书单,推荐给大家【转】

    来我博客的访客们中,有一些是PHP的初学者,是不是很迷茫PHP应该怎么学?应该买什么样的书?到处问人,到处求助?这下好了. 正好看到黑夜路人在博客上推荐了一个书单,看上去都非常不错,很多我也没有读过, ...

  6. 【转】Oracle数据库中Sequence的用法

    在Oracle数据库中,sequence等同于序列号,每次取的时候sequence会自动增加,一般会作用于需要按序列号排序的地方. 1.Create Sequence (注释:你需要有CREATE S ...

  7. for循环,pydev提示未使用的变量,解决办法

    对于如下代码,pvdev会产生未使用变量的警告 for i in range(5): func() 解决办法: 把变量替换成下划线_,就不会生产告警了.改变后如下: for _ in range(5) ...

  8. php配置文件语法

    2013年12月11日 09:21:58 ; The syntax of the file is extremely simple. Whitespace and lines ; beginning ...

  9. elk平台分析nginx日志的基本搭建

    一.elk套件介绍 ELK 由 ElasticSearch . Logstash 和 Kiabana 三个开源工具组成.官方网站: https://www.elastic.co/products El ...

  10. 【python】any()和all()

    any(iterable) 版本:该函数适用于2.5以上版本,兼容python3版本. 说明:如果iterable的任一元素不为0.''.False,返回True. all(iterable) 说明: ...