Ajax(异步请求 局部刷新)
局部刷新:通过异步请求,请求到服务器资源数据后,过脚本修改页面中部分内容
JQuery中ajax分类
第一层：$.ajax({属性名1:值，属性名2:值})
本层是jquery中功能最全(代码写起来相对麻烦)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| <script type="text/javascript">
$(function(){
$("a").click(function(){
$.ajax({
url:'demo',
data:{"name":"zhangsan"},
dataType:'html',
error:function(){
alert("请求出错.")
},
success:function(data){
alert("请求成功"+data)
},
type:'POST'
});
return false;
})
});
</script>
|
其中属性：
1. url：请求服务器地址
2. data：请求参数
3. dataType：服务器返回数据类型
4. error：请求出错执行的功能
5. success:请求成功执行的功能(function(data)：data是服务器返回的数据)
第二层(简化$.ajax)
1. $.get(url,data,success,dataType)
2. $.post(url,data,success,dataType) --常用 但是没有出错提示!!
第三层(简化$.get())
1. $.getJSON(url,data,success) 相当于设置dataType="json"
2. $.getScript(url,data,success) 相当于设置dataType="script"
json概述
服务器返回数据是从表取出，为了方便服务器操作返回的数据，服务器返回的数据设置为json
json数据类型：
1. JsonObject -- json对象
{"key":value,"key":value}
2. JsonArray -- json数组
[{"key":value,"key":value},{}]
json案例
导入jar包
生成Users实体类
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
| public class Users {
private int id;
private String username;
private String password;
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getUsername() {
return username;
}
public void setUsername(String username) {
this.username = username;
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
}
|
生成DemoServlet类
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
| @WebServlet("/demo")
public class DemoServlet extends HttpServlet{
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
System.out.println("执行控制器");
String name=req.getParameter("name"); // 从index页面获取name
Users users=new Users();
users.setId(1);
users.setPassword("123");
users.setUsername("张三"); // 添加users的信息( 1 123 张三 )
Users users1=new Users();
users1.setId(2);
users1.setPassword("22");
users1.setUsername("李四"); // 添加users1的信息( 2 22 李四 )
List<Users> list=new ArrayList<Users>(); //list集合将users和users1加进去
list.add(users1);
list.add(users);
ObjectMapper mapper = new ObjectMapper();
String result = mapper.writeValueAsString(list); //通过ObjectMapper对象方法把list添加进去
resp.setContentType("application/json;charset=utf-8"); //设置返回文件类型 json
PrintWriter out=resp.getWriter();
out.print(result); // 打印result
out.flush();
out.close();
}
}
|
生成 index.jsp页面
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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
| <%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!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.7.2.js"></script> //jQuery必备的
<script type="text/javascript">
$(function(){
$("a").click(function(){
//第二种方式：
$.post("demo",{"name":"zhangsan"},function(data){
//定义空字符串 存结果
var result="";
for(var i=0;i<data.length;i++) //因为是两个对象 list集合要循环输出
{
result+="<tr>";
result+="<td>"+data[i].id+"</td>"
result+="<td>"+data[i].username+"</td>"
result+="<td>"+data[i].password+"</td>"
result+="</tr>";
// alert(data.id+" "+data.username+" "+data.password); 弹出结果
}
//第一种：
// $("table").append(result); 一次次加
//第二种：
$("#mytbody").html(result); //使用分组标签 放入东西
})
return false;
})
});
</script>
</head>
<body>
<a href="demo">跳转</a>
<table border="1">
<tr>
<td>编号</td>
<td>姓名</td>
<td>密码</td>
</tr>
<tbody id="mytbody"></tbody> //使用分组标签 存放结果!!!
</table>
</body>
</html>
|
