目录
1 发送普通请求，后端返回普通页面
1.1 传统方式 @RequestMapping
前端的请求：
- 可以是超链接
<a></a> - 可以是表单提交的 action
- 也可以是 window.location 的跳转
- 可能还有很多，不一一列举
<a href="to/login/page">登录</a>
<form action="to/login/page" method="post"></form>
<script type="text/javascript">
window.location.href="to/login/page";
</script>
后端接收并跳转到 “admin-login.jsp” 页面：
@RequestMapping("/to/login/page")
public String toLoginPage(){
return "admin-login";
}
前提是 MVC 中已经配置好了视图解析器：
<bean id="viewResolver" class="org.springframework.web.servlet.view.InternalResourceViewResolver">
<property name="suffix" value=".jsp"/>
<property name="prefix" value="/WEB-INF/"/>
</bean>
1.2 配置 mvc:view-controller
- 因为是返回普通的页面，也没有任何处理逻辑，只是单纯的页面跳转，因此使用 mvc:view-controller 进行简单配置即可
- 但如果有处理逻辑，需要对请求进行操作、校验等，则不能使用 mvc:view-controller
前端请求：（同样是上面三个，可能还有更多）
<a href="to/login/page">登录</a>
<form action="to/login/page" method="post"></form>
<script type="text/javascript">
window.location.href="to/login/page";
</script>
后端接收并跳转到 “admin-login.jsp” 页面：
- 只需在 springmvc 配置文件中配置：
<mvc:view-controller path="/to/login/page" view-name="admin-login"/>
- 使用这种方式大大减少了 Handler 代码的编写
2 发送普通请求，后端返回数据或对象（如 json）
如果我们不想返回一个页面，只想返回一个数据或对象到前端，比如 json 对象，我们就可以使用 @ResponseBody
前端请求：（同样是上面三个，可能还有更多）
<a href="to/login/page">登录</a>
<form action="to/login/page" method="post"></form>
<script type="text/javascript">
window.location.href="to/login/page";
</script>
后端接收并返回数据：
@ResponseBody
@RequestMapping("/to/login/page")
public String testResponseBody(){
Map<String, String> map = new HashMap(){{
put("name", "hy");
put("sex", "man");
put("age", "20");
}};
return map.toString();
}
也可以直接返回一个字符串
return "success";
结果就不截图了
3 发送带参的普通请求，后端返回普通页面
前端请求：
<a href="do/login?name=Tom&password=123">登录</a>
<form action="do/login" method="post">
<input type="text" name="name"/>
<input type="text" name="password"/>
<button type="submit">登录</button>
</form>
<script type="text/javascript">
window.location.href="do/login?name=Tom&password=123";
</script>
后端接收参数并返回 “admin-success” 页面
@RequestMapping("/do/login")
public String doLogin(@RequestParam("name") String name, @RequestParam("password") String password){
return "admin-success";
}
对于表单数据、使用 ‘?’ 传递参数的请求我们都可以使用@RequestParam来接收，注意需要制定参数名
4 发送带参的普通请求，后端返回数据或对象（如 json）
这里与 9.2 类似，不作细述
5 Ajax请求
由于前后端分离的时代，json 格式的数据尤为重要，是前后端交互的基础，因此我们有必要了解一下
5.1 Json
5.1.1 Json 对象
什么是 Json 对象？顾名思义，对象是可以被调用属性的：
var user = {"name": "Tom", "sex": "man", "age": "20"};
console.log(user.sex); // 可以调用属性
上面 user 就是一个 json 对象，通过 alert(typeof(user)) 是可以看到打印的是 object
5.1.2 Json 字符串
顾名思义，字符串是用 “” 或 ‘’ 引起来的格式：
var user="{'name': 'Tom', 'sex': 'man', 'age': '20'}";
console.log(user);
上面 user 就是一个 json 字符串，通过 alert(typeof(user)) 是可以看到打印的是 string
5.1.3 对象与字符串转换
- json 对象转换为字符串，使用 stringify() 方法
var user = {"name": "Tom", "sex": "man", "age": "20"};
var userString = JSON.stringify(user);
console.log(userString);
- json 字符串转换为对象，使用 parse() 方法
var user="{'name': 'Tom', 'sex': 'man', 'age': '20'}";
var userObject = JSON.parse(user);
console.log(userObject.sex);
5.2 发送 Ajax 请求，后端返回数据或对象（如 json）
主要是前端 js 的书写，后端与上面类似，一般都是返回数据，不会返回一个页面
<script type="text/javascript">
$(function () {
// 为按钮添加单击响应函数
$("#ajaxBtn1").click(function () {
$.ajax({
url:"ajax/test",
type: "post",
dataType: "json",
success: function (response) {
alert("message:" + response);
},
error: function(response) {
alert(response.status + " " + response.statusText);
}
});
});
});
</script>
<body>
<button id="ajaxBtn1">发送ajax请求1</button>
</body>
常用参数解释：
url：后端进行请求处理的地址
type：请求的类型 get / post
data：需要向后端发送的数据
dataType：后端返回的数据类型，json 表示返回一个 json，text 表示返回一个普通文本
contentType：指定发送请求参数的类型，如果指定为 “application/json;charset=UTF-8”，表示发送一个 json 数据，后端需使用 @RequestBody 接收
error：请求失败的回调函数，一般用于通知开发人员哪里出错了
success：请求成功的回调函数
后端返回一个字符串，因为是返回数据，所以需要用 @ResponseBody
@ResponseBody
@RequestMapping("/ajax/test")
public String ajaxTest(){
return "ajaxSuccess";
}
5.3 发送带参 Ajax 请求，后端返回数据或对象（如 json）
如果前端发送的 data 是这样的：即发送 json 对象
$.ajax({
url:"ajax/test",
type: "post",
dataType: "json",
data: {
"name": "Tom",
"sex": "man",
"age": 20
},
success: function (response) {
alert("message:" + response);
},
error: function(response) {
alert(response.status + " " + response.statusText);
}
});
后端使用 @RequestParam 接收
@ResponseBody
@RequestMapping("/ajax/test")
public String ajaxTest(
@RequestParam("name") String name, // 获取前端参数
@RequestParam("sex") String sex, // 获取前端参数
@RequestParam("age") Integer age) { // 获取前端参数
System.out.println(name + " " + sex + " " + age);
return "ajaxSuccess";
}
下面例子都是在实际开发中的找出来的：
如果前端发送的 data 是这样的：即发送 json 字符串
var authIdArray = [];
// json对象
var requestBody = {
"authIdArray":authIdArray,
"roleId":[window.roleId]
};
// json 字符串
requestBody = JSON.stringify(requestBody);
$.ajax({
url:"assign/do/role/assign/auth",
type:"post",
data:requestBody, // 发送json字符串
contentType:"application/json;charset=UTF-8", // 告诉服务器端这是什么类型的数据
dataType:"json",
success:function (response) {
// ......
},
error:function (response) {
// ......
}
});
后端使用 Map 接收，然后 get 相应的 key 即可：
@ResponseBody
@RequestMapping("/assign/do/role/assign/auth")
public ResultEntity<String> saveRoleAuthRelationship(@RequestBody Map<String, List<Integer>> map){
map.get("authIdArray"); // 获取前端参数
map.get("roleId"); // 获取前端参数
return ResultEntity.successWithoutData();
}
如果发送的是 json 对象，也可以直接使用 Java 对象接收（不需要完全相符，发送的 json 对象中属性个数是 Java 实体类的子集即可）
$.ajax({
url: "role/save",
type: "post",
data: {
"name": "Janny"
},
dataType: "json",
success: function (response) {
// ......
},
error: function (response) {
// ......
}
});
// 实体类
public class Role {
private Integer id;
private String name;
}
@RequestMapping("/role/save")
public ResultEntity<String> saveRole(Role role){
role.getName(); // 获取前端参数
return ResultEntity.successWithoutData();
}
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
