$('#btn').on('click',function(){ $.getJSON('./ajaxdemo.php',function(res) { $.each(res,function(index,item) { $("#ajaxcontent").append( '<p>'+index+'-->'+item ); }); }); });

json数据

<?php $jsondata =' {"name":"dwqs","blog":"http://www.ido321.com","age":21}'; echo $jsondata; ?>

结果

$.each()用于遍历json对象，方法接受两个参数，第一个是需要遍历的对象集合（JSON对象集合），第二个是用来遍历的方法，这个方法又接受两个参数，第一个是遍历的index，第二个是当前遍历的值。

$.ajax(options)或者$.ajax(url[,options])：返回一个xhr实例。options是一个对象，用于定义ajax请求参数。完整的参数列表：https://api.jquery.com/jQuery.Ajax/

$.get()、$.post()和$.getJSON()都是简写的$.ajax()，其等价于

$.ajax({ url:url, data:data, success:callback, dataType:dataType });

改写上面的demo

$('#btn').on('click',function(){ $.ajax({ url:'./ajaxdemo.php', dataType:'json', success:function(res){ $.each(res,function(index,item) { $("#ajaxcontent").append( '<p>'+index+'-->'+item ); }); } }); });

对于没有指定的ajax参数，则使用默认值。如果发起很多相似的ajax请求，则可用$.ajaxSetup(options)设置默认值，options同$.ajax()中的options

三、Ajax事件

1、事件类型

事件名称类型说明

ajaxStart全局当Ajax请求开始时触发

beforeSend局部发起请求前触发，可在发送请求之前修改xhr实例或者return false 取消请求

ajaxSend全局发起请求前触发，可在发送请求之前修改xhr实例

success局部请求返回一个成功响应时调用

ajaxSuccess全局请求返回一个成功响应时调用

error局部请求返回一个错误响应时调用

ajaxError全局请求返回一个错误响应时调用

complete局部请求结束时调用

ajaxComplete全局请求结束时调用

ajaxStop全局请求结束并且没有其它并发的请求处于激活状态时调用

$('body').on('ajaxStart ajaxStop ajaxSend ajaxSuccess ajaxError ajaxComplete',function(e){ console.log(e.type); });

2、ajax事件创建器

Ajax提供了6个事件创建器：ajaxComplete(callback)、ajaxSuccess((callback)、ajaxError(callback)、ajaxStart(callback)、ajaxSend(callback)和ajaxStop(callback),callback是回调的事件处理函数，函数上下文是在其上创建的dom元素

$("#txt").ajaxStart(function(){ $("#wait").css("display","block"); }); $("#txt").ajaxComplete(function(){ $("#wait").css("display","none"); });

四、Ajax参数解析

1、JQuery.param(object,traditional)：创建数组或对象的序列化表示，object是要进行序列化的数组或对象，traditional规定是否使用传统的方式浅层进行序列化（参数序列化）

var params = { width:1900, height:1200 }; var str = jQuery.param(params); $("#results").text(str);

结果

width=1680&height=1050

var myObject = { a: { one: 1, two: 2, three: 3 }, b: [1,2,3] }; var str = jQuery.param(myObject); var ttt=decodeURIComponent(str); $("#ajaxcontent").html(str+"<br/>"+ttt);

结果

a%5Bone%5D=1&a%5Btwo%5D=2&a%5Bthree%5D=3&b%5B%5D=1&b%5B%5D=2&b%5B%5D=3 a[one]=1&a[two]=2&a[three]=3&b[]=1&b[]=2&b[]=3

2、.serialize()：创建以标准 URL 编码表示的文本字符串。它的操作对象是代表表单元素集合的 jQuery 对象。返回格式化的查询字符串

3、.serializeArray() ：方法通过序列化表单值来创建对象数组（名称和值），此方法返回的是 JSON 对象而非 JSON 字符串。

假设存在一个表单

SingleSingle2MultipleMultiple2Multiple3check1 check2 radio1 radio2

console.dir($('form').serializeArray()); jQuery.each( $('form').serializeArray(), function(i, field){ $("#ajaxcontent").append(field.value + " "); });

输出：

Single Multiple Multiple3 check2 radio1

)