jQuery Ajax

Ajax "异步 Javascript 和 XML"

上层实现 和 下层基础

$.getScript()   $.getJSON()
load()  $.get()  $.post()
$.ajax()

load()

加载数据填入元素

.load( url [, data ] [, complete ] )

url
Type: String
URL 地址
data
Type: PlainObject or String
发送到服务器的 key/value 数据
complete
Type: Function( String responseText, String textStatus, jqXHR jqXHR )
回调函数, 不论成功和失败

筛选

"url selector"

$("#resText").load("test.html .para");

传递数据

// 无参数 GET
$("resText").load("test.php",function(){})
// 有参数 POST
$("resText").load("test.php",
    {name:"rain",age:"22"},
    function(){})

回调参数

function(responseText,textStatus,XMLHttpRequest){
    // responseText: 请求返回的内容
    // textStatus: 请求状态:success error notmodified timeout 4种
    // XMLHttpRequest: XMLHttpRequest 对象
}

$.get()

load()通常加载静态文件, $.get()传递参数

$.get(url[, data][, callback][, type])

JSON
必须有双引号

{"username":"张三"}

$.post()

$.getScript()

动态加载 Javascript

$("<script type="text/javascript" src="test.js"></script>")
.appendTo("head");

使用 getScript()

$(function(){
    $('#send').click(function(){
            $.getScript('test.js');
    });
});

$.getJSON()

可以用$.each()遍历JSON数组

$.each(data,function(){
   $.each(data,function(index,comment){
        html += comment['username']
        + comment['content'];
   }); 
});

$.ajax()


序列化元素

serialize() 方法

$("#send").click(function(){
    $.get("get.php",$("#form1").serialize,function(){}) 
});

serializeArray() 方法

$.param() 方法

Ajax 全局事件

$("#loading").ajaxStart(function(){
    $(this).show(); 
});
$("#loading").ajaxStop(function(){
    $(this).hide(); 
});

ajaxComplete()
ajaxError()
ajaxSend()
ajaxSuccess()