本文主要是介绍SpringMVC 通过ajax 前后端数据交互的实现方法,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
《SpringMVC通过ajax前后端数据交互的实现方法》:本文主要介绍SpringMVC通过ajax前后端数据交互的实现方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价...
在前端的开发过程中,经常在html页面通过AJAX进行前后端数据的交互,SpringMVC的controller进行数据的接收,但是有的时候后端会出现数据无法接收到的情况,这个是因为我们的参数和前端ajax的contentType参数 类型不对应的情景,或者说contentType和后台controller 方法参数到底存在什么样的关系
普通的参数我们传递的时候往往是这样的两种情况:
contentType: "application/xhttp://www.chinasem.cn-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('接口不通'); javascript } });
这样的形式,后台接受的时候,使用: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 { Stwww.chinasem.cnring 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", 整个China编程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; }
适合 application/json
的情况:
两种情景是不一样的,如果你前端传入的是json格式,那么后端你用:
String uu=request.getParameter("username"); System.out.println(uu);
这样是无法接收到数据的,接收到的参数一直为null,因为json是整体作为一个流传入到后台的
这篇关于SpringMVC 通过ajax 前后端数据交互的实现方法的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!