当前位置：首页 > news >正文

SpringMVC 通过ajax 前后端数据交互

news 来源：原创 2025/4/28 5:07:03

在前端的开发过程中，经常在html页面通过ajax进行前后端数据的交互，SpringMVC的controller进行数据的接收，但是有的时候后端会出现数据无法接收到的情况，这个是因为我们的参数和前端ajax的contentType参数类型不对应的情景，或者说contentType和后台controller 方法参数到底存在什么样的关系

普通的参数我们传递的时候往往是这样的两种情况：

contentType: "application/x-www-form-urlencoded",
contentType: "application/json",

这样的两种方式有什么样的区别，

第一种方式：application/x-www-form-urlencoded 参数会解析为参数表，比如：

```
name=John+Doe&age=30&city=New+York
```

通过ajax 传递，ajax写法如下：

           	let params={"username":"张三","password":"123456",}$.ajax({url: "dologin4",contentType: "application/x-www-form-urlencoded",headers: {  'Authorization': "****",'Access-Control-Allow-Origin':'*'},type: 'post',data: params,success: function(result) {console.log(result)},error: function(data) {console.log('接口不通');}});

这样的形式，后台接受的时候，使用：request.getParameter()或@RequestParam，比如：

	@RequestMapping("/dologin")public ModelAndView dologin(@RequestParam String username,@RequestParam String password) throws Exception {System.out.println(username);System.out.println(password);ModelAndView mav = new ModelAndView();mav.addObject("info", "欢迎你");mav.setViewName("success");return mav;}@ResponseBody@RequestMapping("/dologin2")public Map<String,Object> dologin2(HttpServletRequest request,HttpServletResponse response) throws Exception {String username=request.getParameter("username");System.out.println(username);Map<String,Object> map=new HashMap<>();map.put("aa", "1111");return map;}

适合 `x-www-form-urlencoded` 的情况：

传统HTML表单提交
简单的键值对数据
需要向后兼容老系统
文件上传（结合multipart/form-data）

第二种方式：contentType: "application/json", 整个body作为单一数据流处理，比如：

{"name": "John Doe","age": 30,"city": "New York","hobbies": ["reading", "swimming"]
}

通过ajax 传递，ajax写法如下：

           function dologin(){let params={"username":"张三","password":"123456",}$.ajax({url: "dologin4",contentType: "application/json",headers: {  'Authorization': "****",'Access-Control-Allow-Origin':'*'},type: 'post',data: JSON.stringify(params),success: function(result) {console.log(result)},error: function(data) {console.log('接口不通');}});}

Java后台接受前台传入参数的代码如下：@RequestBody

	@ResponseBody@RequestMapping("/dologin4")public Map<String,Object> dologin4(HttpServletRequest request,HttpServletResponse response) throws Exception {String uu=request.getParameter("username");System.out.println(uu);StringBuilder jsonBuilder = new StringBuilder();try (BufferedReader reader = request.getReader()) {String line;while ((line = reader.readLine()) != null) {jsonBuilder.append(line);}}String jsonString = jsonBuilder.toString();ObjectMapper mapper = new ObjectMapper();Map<String, Object> jsonMap = mapper.readValue(jsonString, Map.class);  String username = (String) jsonMap.get("username");System.out.println(username);Map<String,Object> map=new HashMap<>();map.put("aa", "1111");return map;   }@ResponseBody@RequestMapping("/dologin3")public Map<String,Object> dologin3(@RequestBody Map<String,Object> reqMap) throws Exception {String username=reqMap.get("username").toString();System.out.println(username);Map<String,Object> map=new HashMap<>();map.put("aa", "1111");return map;}