版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_34802416/article/details/81780741
目录
文章目录
#SpringMVC接收Json数据
之前学习使用SSM框架来开发程序前端使用的是JSP,使用JSP虽然开发方便,但实在太不优雅了!还是通过Json来实现前后端的数据交互更爽!所以这就涉及到两个问题:
- 如何通过前端页面发送Json数据?
- 如何通过SpringMVC来接收并处理Json数据?
带着以上两个问题阅读下面的部分,你应该很快就能理解并掌握最基本的Json数据交互。
本文中使用的FastJson来处理Json数据。
##1 前端页面
前端页面通过三个按钮触发点击事件,调用js代码,向后台分别发送字符串、数字、List数据。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<!-- 引用jquery文件 -->
<script src="js/JQuery3.3.1.js"></script>
</head>
<body>
<input type="button" onclick="ajaxString()" value="send String"></input>
<input type="button" onclick="ajaxInteger()" value="send Integer"></input>
<input type="button" onclick="ajaxList()" value="send List"></input>
</body>
<script type="text/javascript">
//发送字符串
function ajaxString(){
$.post("ajax/String",
{
str1:'Hello',
str2:'World'
},
function(data){
alert("success");
});
}
//发送数值
function ajaxInteger(){
$.post("ajax/Integer",
{
val1:2018,
val2:2019
},
function(data){
alert("success");
});
}
//发送List,使用Json数据格式
function ajaxList(){
var myList = new Array('hello','ajax');
var myMap = {
'a':'1',
'b':'2'
}
$.ajax({
type:"post",
url:"ajax/List",
contentType:'application/json;charset=UTF-8', //发送信息至服务器时内容编码类型
traditional:true, //传统的方式来序列化数据
data:JSON.stringify({uid:233, myList: myList, myMap: myMap}),
success:function(data){
alert("success");
}
});
}
</script>
</html>
ajax方法的属性(了解更多)很多,这里不细说。
2 后台代码
package com.rhine.studySSM.controller;
import java.util.ArrayList;
import java.util.Iterator;
import java.util.List;
import java.util.Map;
import java.util.Set;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.JSONObject;
import com.rhine.studySSM.domain.User;
@Controller
@RequestMapping("/ajax")
public class AjaxController {
@RequestMapping("/String")
@ResponseBody
public void getString(String str1, String str2) {
System.out.println(str1+" "+str2);
}
@RequestMapping("/Integer")
@ResponseBody
public void getInteger(int val1, String val2) {
System.out.println(val1+" "+val2);
}
//接收json数据格式,注意@RequestBody注解的使用
@RequestMapping("/List")
@ResponseBody
public void getList(@RequestBody JSONObject json) {
//去除字符串
String uid = json.getString("uid");
System.out.println("uid:" + uid);
//转换成List
List<String> myList = json.getObject("myList", List.class);
for(String str : myList) {
System.out.println(str);
}
//转换成Map类型
Map<String, String> myMap = json.getObject("myMap", Map.class);
Set<String> myMapKeySet = myMap.keySet();
for(Iterator<String> iter = myMapKeySet.iterator(); iter.hasNext(); ){
String index = iter.next();
System.out.println("key: " + index + " value: " + myMap.get(index));
}
}
}
用到的注解:
- @ResponseBody注解
- 表示该方法的返回值直接写入HTTP response body中,而不是将返回值作为跳转路径(在以后利用SpringMvc向前端发送数据时,它就能派上大用场了!)。
- 你可以尝试去掉ResponseBody注解后,观察前端页面是否还会在按钮点击后,弹出success的消息框。并且此时打开浏览器F12后台调试页面,可以在console中找到页面404的错误。
- @RequestBody注解
- 常用于处理Content-Type
- 由于application/json,application/xml都不是application/x-www-form-urlencoded字符编码的内容,所以需要使用这个注解来进行处理。
##3 效果
最后还是放个图,看看效果。
##4 最后
回答文章开始的两个问题:
- 如何通过前端页面发送Json数据?
- jQuery
- ajax
- 如何通过SpringMVC来接收并处理Json数据?
- 使用@ResponseBody、@RequestBody注解
下一篇:[《SpringMVC发送Json数据》](https://blog.csdn.net/qq_34802416/article/details/81783280)