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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
| /**
* @ResponseBody注解
* 场景：
* 1.为手机端提供json数据（前后端代码分离）
* 2.为PC前端页面 提供json数据（前后端代码分离）
* 3.配合JQ中的ajax来使用（所有代码都自己写）
* 用法：
* 1.如果导入3个jar包（jackson）
* 2.注解要写在方法定义处
* 作用：
* 1.将处理器方法的返回值 格式化为json返回（需要将哪个类型格式化为json，就将哪个类型作为方法返回值）
* 注意：
* 1.如果处理器被注解了@ResponseBody，那么将不在能返回视图，任何方式都不能返回视图
* 2.如果处理器被注解了@ResponseBody，那么使用request.setAttribute是无用的
* 3.如果使用ajax向处理器发送了请求，那么处理器一定要注解@ResponseBody，不然ajax拿不到返回值
*/
将一个字符串输出到浏览器
@RequestMapping(value="/jsonStr",produces="application/json;charset=utf8")
@ResponseBody
public String jsonStr(){
return "我是一个字符串";
}
将一个实体类格式化为json返回
/**
* 将一个实体类格式化为json
* @return
*/
@ResponseBody
@RequestMapping("/jsonModel")
public StuModel jsonModel(){
StuModel stuModel = new StuModel();
stuModel.setAddress("北京");
stuModel.setAge(88);
stuModel.setStuName("张三");
return stuModel;
}
将一个集合格式化为json返回
@ResponseBody
@RequestMapping("/jsonList")
public List<StuModel> jsonList(@RequestParam(value="id") Integer id,
StuModel model){
List<StuModel> list = new ArrayList<StuModel>();
StuModel stuModel = new StuModel();
stuModel.setAddress("北京");
stuModel.setAge(88);
stuModel.setStuName("张三");
list.add(stuModel);
StuModel stuModel1 = new StuModel();
stuModel1.setAddress("上海");
stuModel1.setAge(99);
stuModel1.setStuName("李四");
list.add(stuModel1);
return list;
}
使用ajax向处理器发起请求
<button type="button" onclick="ajaxModel()">ajax操作json实体类</button>
function ajaxModel(){
//使用ajax 向处理器发起请求
$.ajax({
url:"/SpringMvc_04/jsonModel",//请求路径
data:"",//请求参数，没有参数，不需要传递参数时，该属性可以省略
//返回值类型 text,json,如果处理器返回值为String，那么使用text，处理器返回值为实体类，或者集合，那么使用json
//该属性可以省略
dataType:"json",
type:"post",//请求方式 get post
async:true,//同步和异步，true 异步 false 同步, 默认true
success:function(data){
//执行成功时的回调函数，200
//回调函数中的变量，可以接收到处理器所返回的json数据
//操作json的方式 与实体类基本一致 （与el表达式取值基本一致，只不过没有了）
alert(data.stuName);
// alert(data.address);
},error:function(){
//执行时发生错误，500
}
})
}
操作json数组
function ajaxList(){
$.ajax({
url:"/SpringMvc_04/jsonList?id=1",
data:"",
success:function(data){
//1.for循环
for(var i=0;i<data.length;i++){
alert(data[i].stuName);
alert(data[i].age);
}
//2.each循环
//第一个参数，用来计数使用，当前循环时第几次
//第二个参数，是每次循环时数组中的真正元素
$.each(data,function(key,i){
alert(i.stuName);
alert(i.age);
})
}
})
}
使用ajax实现新增学生的流程
1.新建form表单
<!-- 虽然有一个form表单，但是不使用表单进行提交，
使用form表单，是为了获取表单中的所有参数
使用ajax进行提交，然后将表单中的所有参数，传递到处理器，
在处理器中使用实体类接收请求参数
-->
<form id="editForm">
<input type="text" name="stuName" />
<input type="text" name="age" />
<button type="button" onclick="addStu()">新增学生</button>
</form>
2.编写js方法
function addStu(){
$.ajax({
url:"/SpringMvc_04/addStu",
//格式化表单中的所有参数
//将表单中所有带有name属性的元素当做参数，传递
data:$("#editForm").serialize(),
success:function(data){
if(data == 'success'){
alert("新增成功");
//跳转
window.location = "/SpringMvc_04/xxxx";
}else{
alert("新增失败");
}
}
})
}
3.编写Handler进行对应的处理
/**
* 接收ajax传递过来的表单中请求参数
* 1.form表单指定id属性，不需要action 和 method
* 2.要传递的元素，还是要写name属性
* 3.在ajax的data属性 根据id获取表单，调用serialize();
* $("#editForm").serialize()
* 4.在处理器中，可以使用@RequestParam注解分别接收，也可以使用实体类接收
*/
@ResponseBody
@RequestMapping("/addStu")
public String addStu(StuModel stuModel){
System.out.println(stuModel);
//1.插入
//2.如果插入方法返回true，那么我向ajax返回一个成功的 字符串 success
//如果插入方法返回false，那么我向ajax返回一个失败的字符串 failed
return "success";
}
|
扫一扫
3329
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
