ajax中get和post的提交、卻別、錯誤處理以及注意事項
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
$.get和$.post的不同
1、get通過url提交的，post是通過http訊息實體提交的
2、get提交大小限制為2kb，post不限制
3、get提交會被快取下來，有安全隱患，post沒有
4、get通過$_get[]，而post通過$_POSt[]獲取
$.get 和 $.post的幾種傳參方式
1、在url後面直接問號傳參： test.php?age=20
2、以字串鍵值對的方式傳參： 'age=20'
3、以物件鍵值對的方式傳參： {age:20}
$.get 以上三種方式都支援，但是$.post和$.ajax只支援後2種寫法
具體demo:
1、$.get('test.php?age=20',function(result){
alert(result)
})
2、$.get('test.php','age=20',function(result){
alert(result)
})
3、$.get('test.php',{age:20},function(result){
alert(result)
})
，php檔案非同步請求預設返回的是text或html的type型別，如果返回的是非json型別強制用type轉成json型別可能會報錯
三、getScript 一般就是引入一個js檔案
$.getScript('demo.js') 即可
四：getScript 請求一個json檔案，不必要指定返回的資料型別，而且如果制定了非json的type型別如type：html ，由於安全性高一點也不會返回html格式的資料
五、在用ajax 提交表單的時候可以用表單序列化獲取表單的傳參內容，而且傳參的形式是字串鍵值對,並且還會對url進行編碼
$('form').serialize();
如：$.ajax({
type:'POST',
url:'text.php',
data: $('form').serialize(),
success:function(response,status,xhr){
dosomething...
}
})
五-1；在一下html中可以用decodeURLComponent對序列化的資料進行解碼
<form>
<input type="checkbox" name="sex" value="男" id="">
<input type="checkbox" name="sex" value="女" id="">
</form>
<div id="box"></div>
<script>
$('form input[name=sex]').click(function(){
$('#box').html(decodeURLComponent($(this).serialize()))
})
</script>
5-2,以上的例子可以用serializeArray()可將資料格式化為json格式
六；ajaxSetup 是對ajax進行初始化，應用場景當多個ajax重複用到某些資料的時候可以分裝起來如：
$.ajaxSetup({
type:'POST',
url:'text.php',
data:'{}'
});
$('form :submit').click(function(){
$.ajax({
success:function(response,status,xhr){
}
})
});
7.$.param()方法可對複雜的json進行字串鍵值對解析r
進階：
8、$.ajaxstart()和$.ajaxStop()放置載入時間過長處理
在jq1.8版本後必須繫結在document上如：
$(document).ajaxStart(function(){
$('.loading').show()
}).ajaxStop(function(){
$('.loading').hide()
});
8-1 如果載入超時，可以用timeout設定超時限制
===============
$.ajax進階
1、載入請求
$.ajaxStart() 、$.ajaxStop 可以在對使用者等待時間載入loading圖片
2、錯誤處理
$.ajax的錯誤處理 可以在自己當前新增error方法,引數是(xhr,status,statusText) 如：
2-1： $.ajax的error處理
$.ajax({
url:'www.seogjgsdggd.com/test.php',
type:'POST',
data:'age=20',
error:function(xhr,status,statusText){
alert(xhr.status)
}
});
2-1：$.post的error錯誤處理，新增連綴的區域性方法error,引數是(xhr,errorText,errorType)如：
$.post('test.php','age=20',function(response,status,xhr){
alert(response+"//"+xhr.status)
}).error(function(xhr,errorText,errorType){
alert('錯誤')
});
也可以用全域性的ajaxError方法如(1.8版本建議吧事件繫結在document上)，但是引數有所不同(event,xhr,settings,errorType) 如：
$(document).ajaxError(function(event,xhr,settings,errorType){
event,xhr,settings都是物件，event一般就用(type,target)屬性，settings一般就用(url,type);
});
3/ 請求全域性事件有 $.ajaxstart(),$.ajaxstop()、$.ajaxError(),
$.ajaxSuccess(),$.ajaxComplete,$.ajaxSend()
前三個是請求時出發的全域性事件，
$.ajaxSuccess() 對應一個區域性方法 .success();
$.ajaxComplete()對應一個區域性方法 .complete();
$.ajaxSend()沒有對應的區域性方法，只有屬性beforeSend
例子：
$(document).ajaxSend(function(){
alert(傳送請求之前);
}).ajaxComplete(function(){
alert(請求成功和失敗之後都會出現，是出現在成功或者失敗的後面);
}).ajaxSuccess(function(){
alert(請求成功後);
}).ajaxError(function(){
alert(請求失敗後);
})
$.post('test.php',$('form').serialize()).success(function(){
alert(請求成功後);
}).complete(function({
alert(請求完成後);
}).error(function(){
alert(請求失敗後);
})
$.ajax({
url:'test.php',
type:'POST',
data:$('form').serialize(),
success:function(response,status,xhr){
alert(請求成功後);
},
complete:function(){
alert(請求完成後);
},
error:function(xhr,errorText,errorType){
alert(請求錯誤後);
},
beforSend:function(){
alert(請求之前);
}
})
</html>