|
jQuery 对 Ajax 操作进行了封装:
第一层是在 jQuery 中最底层的方法时 $.ajax()
第二层是 load(),$.get() 和 $.post()
第三层是 $.getScript() 和 $.getJSON()
load()
load(url,[data],[callback])载入远程 HTML 文件代码并插入至 DOM 中
data:发送至服务器的 key/value 数据。在jQuery 1.3中也可以接受一个字符串了。
callback:载入成功时回调函数。函数有三个参数:
其值可能为: succuss,error,notmodify,timeout 4 种)
默认使用 GET 方式 - 传递附加参数时自动转换为 POST 方式
可以指定选择符，来筛选载入的 HTML 文档，DOM 中将仅插入筛选出的 HTML 代码
|
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
|
<!DOCTYPE html PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"
>
<html>
<head>
<meta http-equiv=
"Content-Type"
content=
"text/html; charset=UTF-8"
>
<title>Insert title here</title>
<script type=
"text/javascript"
src=
"../js/jquery-1.8.3.js"
></script>
<script type=
"text/javascript"
>
$(
function
(){
$(
"#ajaxbutton"
).click(
function
(){
var
url =
"/jQuery2/Demo"
;
var
parme = {
"username"
:
"张三"
,
"password"
:
"1234"
};
$(
this
).load(url,parme,
function
(data){
alert(data);
var
dataparme = eval(
"("
+data+
")"
);
alert(dataparme.message);
});
});
});
</script>
</head>
<body>
<input id=
"ajaxbutton"
type=
"button"
value=
"发送ajax"
/>
</body>
</html>
|
Servlet
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
public
void
doGet(HttpServletRequest request,HttpServletResponse response)
throws
ServletException,IOException {
String username = request.getParameter(
"username"
);
String password = request.getParameter(
"password"
);
System.out.println(username+
":"
+password);
response.setContentType(
"text/html;charset=UTF-8"
);
String json =
"{"message":"操作成功"}"
;
response.getWriter().print(json);
}
|
jQuery.get(url,[callback],[type]) 通过远程 HTTP GET 请求载入信息。
type:返回内容格式
:xml,html,script,json,text,_default。
如果传递参数有中文,需要在服务器端接收时进行乱码处理
|
1
2
3
4
5
6
7
8
9
10
11
|
<script type=
"text/javascript"
>
$(
function
(){
$(
"#ajaxbutton"
).click(
function
(){
var
url =
"/jQuery2/Demo"
;
var
parme = {
"username"
:
"张三"
,
"password"
:
"1234"
};
$.get(url,
function
(data){
alert(data.message);
},
"json"
);
});
});
</script>
|
Servlet
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
public
void
doGet(HttpServletRequest request,IOException {
String username = request.getParameter(
"username"
);
String password = request.getParameter(
"password"
);
String string =
new
String(username.getBytes(
"iso-8859-1"
),
"utf-8"
);
System.out.println(string+
":"
+password);
response.setContentType(
"text/html;charset=UTF-8"
);
String json =
"{"message":"操作成功"}"
;
response.getWriter().print(json);
}
|
jQuery.post(url,[type]),通过远程 HTTP POST 请求载入信息。
type:返回内容格式，xml,_default。
|
1
2
3
4
5
6
7
8
9
10
11
12
|
<script type=
"text/javascript"
>
$(
function
(){
$(
"#ajaxbutton"
).click(
function
(){
var
url =
"/jQuery2/Demo"
;
var
parme = {
"username"
:
"张三"
,
"password"
:
"1234"
};
$.post(url,
function
(data){
alert(data.message);
},
"json"
);
});
});
</script>
|
Servlet
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
public
void
doGet(HttpServletRequest request,HttpServletResponse response)
throws
ServletException,IOException {
String username = request.getParameter(
"username"
);
String password = request.getParameter(
"password"
);
System.out.println(username+
":"
+password);
response.setContentType(
"text/html;charset=UTF-8"
);
String json =
"{"message":"操作成功"}"
;
response.getWriter().print(json);
}
|
|
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
31
32
33
34
35
36
|
<script type=
"text/javascript"
>
$(
function
(){
$(
"#ajaxbutton"
).click(
function
(){
var
url =
"/jQuery2/Demo"
;
var
parme = {
"username"
:
"张三"
,
"password"
:
"1234"
};
$.ajax({
"url"
:url,
"data"
:params,
"type"
:
"post"
,
"success"
:
function
(data){
alert(data);
},
"error"
:
function
(){
alert(
"服务器异常"
);
},
"dataType"
:
"json"
});
});
});
</script>
|
来自为知笔记(Wiz)
（编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
|
