ajax()方法是jQuery底層的ajax實現，經過HTTP請求加載遠程數據。html
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
$.ajax({
type:
"GET"
,
url:
"handleAjaxRequest.action"
,
data: {paramKey:paramValue},
async:
true
,
dataType:
"json"
,
success:
function
(returnedData) {
alert(returnedData);
//請求成功後的回調函數
//returnedData--由服務器返回，並根據 dataType 參數進行處理後的數據；
//根據返回的數據進行業務處理
},
error:
function
(e) {
alert(e);
//請求失敗時調用此函數
}
});
}
|
參數說明:ajax
type:請求方式，「POST」或者「GET」,默認爲「GET」。json
url:發送請求的地址。數組
data:要向服務器傳遞的數據，已key:value的形式書寫（id:1）。GET請求會附加到url後面。服務器
async:默認true,爲異步請求，設置爲false,則爲同步請求。app
dataType:預期服務器返回的數據類型,能夠不指定。有xml、html、text等。異步
在開發中，使用以上參數已能夠知足基本需求。async
若是須要向服務器傳遞中文參數，可將參數寫在url後面，用encodeURI編碼就能夠了。ide
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
var
chinese =
"中文"
;
var
urlTemp =
"handleAjaxRequest.action?chinese="
+chinese;
var
url = encodeURI(urlTemp);
//進行編碼
$.ajax({
type:
"GET"
,
url: url,
//直接寫編碼後的url
success:
function
(returnedData) {
alert(returnedData);
//請求成功後的回調函數
//returnedData--由服務器返回，並根據 dataType 參數進行處理後的數據；
//根據返回的數據進行業務處理
},
error:
function
(e) {
alert(e);
//請求失敗時調用此函數
}
});
}
|
struts2的action對請求進行處理：函數
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
public void handleAjaxRequest() {
HttpServletRequest request = ServletActionContext.getRequest();
HttpServletResponse response = ServletActionContext.getResponse();
//設置返回數據爲html文本格式
response.setContentType(
"text/html;charset=utf-"
);
response.setHeader(
"pragma"
,
"no-cache"
);
response.setHeader(
"cache-control"
,
"no-cache"
);
PrintWriter out =
null
;
try
{
String chinese = request.getParameter(
"chinese"
);
//參數值是中文，須要進行轉換
chinese =
new
String(chinese.getBytes(
"ISO--"
),
"utf-"
);
System.out.println(
"chinese is : "
+chinese);
//業務處理
String resultData =
"hello world"
;
out = response.getWriter();
out.write(resultData);
//若是返回json數據，response.setContentType("application/json;charset=utf-");
//Gson gson = new Gson();
//String result = gson.toJson(resultData);//用Gson將數據轉換爲json格式
//out.write(result);
out.flush();
}
catch
(Exception e) {
e.printStackTrace();
}finally {
if
(out !=
null
) {
out.close();
}
}
}
|
struts.xml配置文件：不須要寫返回類型
|
1
2
3
|
<action name=
"handleAjaxRequest"
class=
"com.test.TestAction"
method=
"handleAjaxRequest"
>
</action>
|
分享AJAX先後臺交互方法
注：ajax經過async參數決定是異步仍是同步,false同步,true異步;
異步執行順序是先執行後續動做，再執行success裏代碼;
同步是先執行success裏代碼，再執行後續代碼;
驗證：同步時數據量大是否會卡頓？例如從後臺搜索大量數據時，頁面是否卡死？
一、(異步)方法調用，後續代碼不須要等待它的執行結果
後臺<C#>:
|
1
2
3
4
5
|
using System.Web.Script.Services;
public static string GetStr(string str1, string str2)
{
return
str1 + str2;
}
|
前臺<JQuery>:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
function
Test(strMsg1,strMsg2)
{
$.ajax({
type:
"Post"
,
url:
"Demo.aspx/GetStr"
,
async:
true
,
//方法傳參的寫法必定要對，與後臺一致，區分大小寫，不能爲數組等，str1爲形參的名字,str2爲第二個形參的名字
data:
"{'str1':'"
+strMsg1+
"','str2':'"
+strMsg2+
"'}"
,
contentType:
"application/json; charset=utf-8"
,
dataType:
"json"
,
success:
function
(data) {
//返回的數據用data.d獲取內容
alert(data.d);
},
error:
function
(err) {
alert(err);
}
});
//隱藏加載動畫
$(
"#pageloading"
).hide();
}
|
二、(同步)方法調用，可用於須要獲得返回值是執行後續代碼的前提
後臺<C#>:
|
1
2
3
4
5
|
using System.Web.Script.Services;
public static string GetStr(string str1, string str2)
{
return
str1 + str2;
}
|
前臺<JQuery>:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
function
Test(strMsg1,strMsg2)
{
var
str = 「」;
$.ajax({
type:
"Post"
,
url:
"Demo.aspx/GetStr"
,
async:
false
,
//方法傳參的寫法必定要對，與後臺一致，區分大小寫，不能爲數組等，str1爲形參的名字,str2爲第二個形參的名字
data:
"{'str1':'"
+strMsg1+
"','str2':'"
+strMsg2+
"'}"
,
contentType:
"application/json; charset=utf-8"
,
dataType:
"json"
,
success:
function
(data) {
//返回的數據用data.d獲取內容
str = data.d;
},
error:
function
(err) {
alert(err);
}
});
return
str;
|