歡迎來到Linux教程網
Linux教程網
Linux教程網
Linux教程網
您现在的位置: Linux教程網 >> UnixLinux >  >> Linux編程 >> Linux編程

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();
});

Copyright © Linux教程網 All Rights Reserved