非同步請求
阿新 • • 發佈：2020-08-19
$.ajax({
url:'UserAdd.action',
data:user,
type:'post',
dataType:'text',
} url那裡寫上地址
跨域請求：
$.ajax({
2 type:"get", //請求方式
3 async:true, //是否非同步
4 url:"http://www.domain.net/url",
5 dataType:"jsonp", //跨域json請求一定是jsonp
6 jsonp: "callbackparam", //跨域請求的引數名，預設是callback
7 //jsonpCallback:"successCallback", //自定義跨域引數值，回撥函式名也是一樣，預設為jQuery自動生成的字串
8 data:{"query":"civilnews"}, //請求引數
9
10 beforeSend: function() {
11 //請求前的處理
12 },
13
14 success: function(data) {
15 //請求成功處理，和本地回撥完全一樣
16 },
17
18 complete: function() {
19 //請求完成的處理
20 },
21
22 error: function() {
23 //請求出錯處理
24 }
25 });
js 之 Post傳送請求
// ajax 物件
function ajaxObject() {
var xmlHttp;
try {
// Firefox, Opera 8.0+, Safari
xmlHttp = new XMLHttpRequest();
}
catch (e) {
// Internet Explorer
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
alert("您的瀏覽器不支援AJAX！");
return false;
}
}
}
return xmlHttp;
}
// ajax post請求：
function ajaxPost ( url , data , fnSucceed , fnFail , fnLoading ) {
var ajax = ajaxObject();
ajax.open( "post" , url , true );
ajax.setRequestHeader( "Content-Type" , "application/x-www-form-urlencoded" );
ajax.onreadystatechange = function () {
if( ajax.readyState == 4 ) {
if( ajax.status == 200 ) {
fnSucceed( ajax.responseText );
}
else {
fnFail( "HTTP請求錯誤！錯誤碼："+ajax.status );
}
}
else {
fnLoading();
}
}
ajax.send( data );
}或者使用jQuery的$.post方法可以以POST形式向伺服器發起AJAX請求。$.post方法是jQuery的實用工具方法。
$.post方法語法
|
$.post(url,parameters,callback) |
|
|
引數 |
|
|
url |
(字串)伺服器端資源地址。 |
|
parameter |
(物件)需要傳遞到伺服器端的引數。 引數形式為“鍵/值”。 |
|
callback |
(函式)在請求完成時被呼叫。該函式引數依次為響應體和狀態。 |
|
返回值 |
XHR例項 |
例項：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$().ready(function () {
$('#selectNum').change(function () {
var idValue = $(this).val();
//採用POST方式呼叫服務
$.post('Server.aspx', { id: idValue }, function (text, status) { alert(text); });
})
})
</script>
</head>
<body>
<select id="selectNum">
<option value="0">--Select--</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</body>
</html>