ajax在jq中封裝的函數(shù)涉波，AIP。
1.請求加載胧瓜，錯誤處理，全局調(diào)用方法：
$(doucument)
//加載過程中函數(shù)
.ajaxStart(function(){
$('.loading').show();
})
//加載完成后函數(shù)
.ajaxStop(function(){
$('.loading').hide();
})
.ajaxSend(function(){
alert('發(fā)送請求之前執(zhí)行');
})
.ajaxComplete(function(){
alert('請求完成之后郑什，不論失敗還是成功');
})
.ajaxSuccess(function(){
alert('請求成功調(diào)用');
})
2.請求加載府喳，錯誤處理，局部調(diào)用方法：
$.post("test.php")
.success(function(){
alert('請求成功調(diào)用');
})
.complete(function(){
alert('請求完成之后蘑拯，不論失敗還是成功');
})
.error(function(){
alert('請求失敗調(diào)用');
})
3.load()用法：
load(url,data,callback)方法钝满。
url：鏈接的文件。
data：傳進去的參數(shù)申窘。
callback：回調(diào)數(shù)據(jù)弯蚜。
$("#div").load("text.html"); //在div下渲染text.html內(nèi)容。
$("#div").load("text.html .url"); //實現(xiàn)過濾效果偶洋，只顯示類為url的內(nèi)容熟吏。
$("#div").load("text.php?user=zhangsan&pw=123") //get方法傳參數(shù)。
//post方法傳參：
$("#div").load("text.php",{
url:"baidu" //data 方法玄窝。
},function(response,stutas,xht){
//response 回調(diào)的數(shù)據(jù)牵寺。
$("#div").html(response + 123456）;
//stutas 判斷請求成功或是失敗了。
alert(stutas)//返回值為success.error恩脂。
//xht 是對象的調(diào)用方法帽氓。
alert(xht.reponseText)//回調(diào)的數(shù)據(jù)，等同response
alert(xht.stutas) //請求返回時服務(wù)器狀態(tài)碼：200,404
alert(xht.statusText)//請求返回字符串：OK 或 NO
})
3.post與get的用法俩块，與區(qū)別：
get(url,data,callback,type);
post(url,data,callback,type);
//get 用法：
$.get('test.php?url=baidu',function(response,status,xhr){
$("#box").html(response);
})
$.get('test.php','url=baidu',function(response,status,xhr){
$("#box").html(response);
})
$.get('test.php',{url='baidu'},function(response,status,xhr){
$("#box").html(response);
})
//post 用法：
$.post('test.php',{url='baidu'},function(response,status,xhr){
$("#box").html(response);
})
//字符串方式也可以黎休，但不推薦使用
$.post('test.php','url=baidu',function(response,status,xhr){
$("#box").html(response);
})
$.post('test.xml',function(response,status,xhr){
alert($(response).find('root').find('url').text())
},'xml') //type參數(shù)為xml.
$.post('test.json',function(response,status,xhr){
alert(response[0].url);
},'json') //type參數(shù)為json.
$getJSOM('test.json',function(response,status,xhr){
alert(response[0].url);
}) //直接轉(zhuǎn)換json,沒有type參數(shù)浓领。
$getScript("test.js"); //動態(tài)加載js文件。安需求加載js势腮，增加性能联贩。
5.ajax技術(shù)
ajax({key:value})方法
表單序列化
jQuery的ajax模版:
$(function(){
$('input').click(function(){
$.ajax({
type:"post",
url:"test.php",
data:{
url:"baidu"
},
success:function(response){
$("#box").html(response);
}
});
})
})
test.php:
<?php
if($_POST['url']=='baidu')
echo "ajax request";
?>
表單序列化
html
<form>
用戶名:<input type="text" name="user" />
<input type="ardio" name="sex" value="男">男
<input type="ardio" name="sex" value="女">女
<input type="button" value="提交" />
</form>
<div id="box"></div>
test.php:
<?php
echo $_POST['user'];
?>
demo.js:
$(function(){
$('form input[type=button]').click(function(){
$.ajax({
type:"post",
url:"test.php",
data:{
user:$('form input[name=user]').val
},
success:function(response){
$("#box").html(response);
}
});
})
})
表單序列化：serialize()
$(function(){
$('form input[type=button]').click(function(){
$.ajax({
type:"post",
url:"test.php",
data:$('form').serialize(), //表單中所以值一次性存進去。
success:function(response){
$("#box").html(response);
}
});
})
})
獲取單選框?qū)傩陨诱担?/p>
$('form input[name=sex]').click(function(){
//$('#box').html($(this).serialize()); //有編碼功能泪幌；
//decodeURIComponent()將編碼進行轉(zhuǎn)換
$('#box').html(decodeURIComponent($(this).serialize()))
})
用json的方式：
$('form input[name=sex]').click(function(){
var json = $(this).serializeArray();
$('#box').html(json[0].name + ':' + json[0].value);
})
更好解析的處理多數(shù)據(jù)的表單。有param()轉(zhuǎn)換：
$(function(){
$('form input[type=button]').click(function(){
$.ajax({
type:"post",
url:"test.php",
data:$.param({
user:$('form input[name=user]').val
}),
success:function(response){
$("#box").html(response);
}
});
})
})
表單序列化還需要深入了解署照。謝謝支持祸泪。
基礎(chǔ)ajax技術(shù)。
