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; }); });  
时间: 2024-10-17 05:48:50

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

JavaScript之Ajax-4 XML解析(JavaScript中的XML、Ajax返回并解析XML)

一.JavaScript中的XML XML DOM对象 - IE 浏览器通过 ActiveXObject 对象得到 XML DOM 对象 - 其他浏览器通过 DOMParser 对象得到 XML DOM 对象 XML DOM对象的支持 - XML DOM(XML Document Object Model)定义了访问和操作XML文档的标准方法 - DOM 把 XML 文档作为树结构来查看.能够通过DOM树来访问所有元素 加载并解析XML字符串 二.Ajax返回并解析XML 使用XHR发送XML字

jquery ui autocomplete ajax返回数据自定义显示

1.body里面的内容 <input type="text" class="inputTxt" id="txtJigou" autocomplete="off"/> 2.引入jquery.ui.min.js和他的样式 3.js代码如下<script type="text/javascript"> $(function(){ $("#txtJigou").autoc

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

1.意义 开发项目中,前台的页面要发请求到服务器,服务器响应请求返回数据到前台,这段时间,有可能因为返回的数据量较大导致前台页面出现短暂性的等待,此时如果用户因不知情而乱点击有可能造成逻辑混乱,所以此时需要在加载数据中将前台进行提示在加载数据中,利用jquery的遮罩组件可以完成这个功能需求. 2.实现步骤 (1).下载 showLoading.css    jquery.showLoading.min.js  两个文件. (2).在jsp中引入这两个文件 <link href="styl

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

当使用ajax传递数据时,有可能传递多个数据,这是使用以下方法传递数据就会显得数据过多且混杂 $.ajax({ type:'post', url:url, data:{data:data,content1:content1,content2:content2,content3:content3,...........}, success:function(data){ alert(data) } }); 这时我们就可以先在传递数据之前,将数据封装在数组中,但是要注意,定义数组的时候要用arr={

ajax返回数据之前的loading等待

首先,我们通过ajax请求,向后台传递参数,然后后台经过一系列的运算之后向前台返还数据,我希望在等待数据成功返还之前可以展示一个loading.gif图 不废话,在页面上执行点击事件(<a sceneid="@scene.ID" href="javascript:void(0)" onclick="build(this)">生成</a>) 调用下面方法: function build(sender) { var jqSen

java 调用wsdl接口同时将返回数据解析成json

package com.haiersoft.ushequmobile.utils; import java.io.ByteArrayInputStream; import java.io.ByteArrayOutputStream; import java.io.IOException; import java.io.InputStream; import java.io.StringReader; import java.util.List; import java.util.Map; imp

jquery中获取ajax返回数据的方法

//此处需要注意的是要想获取ajax返回的值时这个ajax请求必须是同步的,否则获取不到返回值 function getPageTotalAndDataTotal(page) { //设置一个变量用于接收ajax返回的值 var pageTotal = 0; // 获取页数与数据总数 $.ajax({ url : "你的url地址", type : "post", async : false, data : {}, dataType : "json&quo

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

做asp.net项目  使用ajax $.ajax({ url: '../Music/Default2.aspx?Types=' + type + '&texts=' + text + '', type: 'GET', // data: '&texts=' + text + '',dataType: 'json', success: function (data) { console.log(data); } }); 都没有问题   返回数据,打印出data  结果 发现没有数据 去Net

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

使用Bootstrap分页插件时,需要返回指定的参数,这样Bootstrap才能够识别 需要引入的css: <!-- boostrap table --> <link href="css/bootstrap-table.min.css" rel="stylesheet" /> 需要引入的js: 1 <!-- boostrap table --> 2 <script type="text/javascript&quo