Jquery中Ajax使用

Jquery中Ajax使用

 

1.load方法 载入远程HTML代码并插入DOM中

 

说明：

load(url [, data] [, callback])

url String 请求HTML页面的URL地址

data Object 发送至服务器的key/value数据

callback Function 请求完成时的回调函数，无论请求成功或失败

 

实例：

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

$("#resText").load("test.html .para");筛选class为para的内容

$("#resText").load("test.html",function(){});GET

$("#resText").load("test.html",{name:"rain", age:"22"},function(){});POST

$("#resText").load("test.html",function(responseText,textStatus,XMLHttpRequest){});回调参数

       responseText,请求返回的内容

       textStatus,请求状态：success,error,notmodified,timeout

       XMLHttpRequest

 

2.$.get()方法

 

说明：

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

url,data同load方法

callback 载入成功时回调函数（Response返回状态success）

type String 服务器端返回内容的格式，包括xml，html，script，json，text和_default

 

实例：

$.get("", {:,:}, function(data, textStatus){})

data返回内容

textStatus请求状态

 

数据格式：

HTML

       $("#resText").html(data);

XML attr() find() filter()等

       var username = $(data).find("comment").attr("username");

       var content = $(data).find("comment content").text();

       var txtHtml = "..." + username + "...";

       $("#resText").html(txtHtml);

       服务器端header("Content-Type:text/xml; charset=utf-8");

JSON

       var username = data.username;

       var content = data.content;

       var txtHtml = "..." + username + "...";

       $("#resText").html(txtHtml);

 

3.$.post()方法

 

GET和POST区别：

       GET参数跟在URL后，POST最为HTTP消息实体内容

       GET数据大小限制2KB，POST理论上不受限制

       GET请求数据被浏览器缓存，存在安全性问题

       服务器端获取方式也不同

 

$.post("", [

       username:$("#username").val(),

       content:$("#content").val()

]), function(data,textStatus) {

       $("#resText").append(data);

});

 

4.$.getScript()方法

 

$(function(){

       $.getScript("",function(){})

});

 

5.$.getJSON方法

 

$.getJSON("", function(date){

       $("#resText").empty;

       var html = '';

       $.each(data, function(commentIndex,comment){

              html += "..." + comment['username'] + "...";

       });

       $("#resText").html(html);

});

 

6.$.ajax(options)方法，jQuery最底层的Ajax实现

 

参数：

url

type POST/GET（默认）

timeout Number

data Object/String

dataType String xml,html,script,json.jsonp.text

beforeSend Function function(XMLHttpRequest){this} this调用本次Ajax请求时传递的options参数

complete Function function(XMLHttpRequest,textStatus){this}成功或失败均调用

success Function function(data,textStatus){}成功回调函数

error Function function(XMLHttpRequest,textStatus,errorThrown){}

global Boolean 默认true，表示是否触发全局Ajax事件

 

7.serialize()方法，将DOM元素序列化为字符串

 

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

$(":checkbox, :radio").serialize();

 

8.serializeArray()方法，返回JSON格式的数据

 

$(":checkbox, :radio").serializeArray();

 

9.$.param方法，对一个数组或对象按照key/value进行序列化

 

var obj = {a:1, b:2, c:3};

var k = $.param(obj);

alert(k);//输出a=1&b=2&c=3

 

10.Ajax全局事件

 

ajaxStart(callback)

ajaxStop(callback)

ajaxComplete(callback)

ajaxError(callback)

ajaxSend(callback)请求发送时

ajaxSuccess(callback)

 

$("#loading").ajaxStart(function(){

       $this.show();

});

$("#loading").ajaxStop(function(){

       $this.hide();

});