前端jQuery传递JSON给SpringMVC接收并返回JSON

最新推荐文章于 2021-12-10 10:46:23 发布

原创最新推荐文章于 2021-12-10 10:46:23 发布 · 284 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ajax #json

本文详细介绍了前后端通过JSON进行数据交换的过程，包括前端使用jQuery发起AJAX请求、JSON数据的序列化与发送，以及后端SpringMVC如何配置与接收JSON数据，最后解析并返回JSON响应。

萌新记录下自己踩过的坑把我写的前后端传递JSON的流程写下来

为了实现功能也翻过许多文章弄了一天才把这点东西打通呜呜呜我实在是太菜了

1.首先在ready函数里面用一个click触发ajax contentType写'application/json'，dataType写'json'，然后把JSON对象转换为json字符串 var myJSON = JSON.stringify(obj)；用ajax传递myJSON就可以了。

$("#bit").click(function(){
       var zio2 = "zio2";
       var obj = {"build":"123","zio":"zio"};
       var myJSON = JSON.stringify(obj);
       console.log(myJSON);//必须传String类型的json
       $.ajax({
               type:"post",
               url:"testMVC",
               dataType:'json',
               contentType:'application/json',//必须传String类型的json 传到后端后变成JSON对象
               data:myJSON,
               success:(msg)=>{//后端传的是字符串,转化为json 前端接收到的是JSON的数据
                   console.log(msg.exaid);
                   $('#data').html(msg.exaid);
               },
               error:(xhr)=>{
                   alert(xhr.status);
               }
           });

}

2.然后下载这三个包jackson-databind-2.11.0.jar，jackson-core-2.11.0.jar，jackson-annotations-2.11.0.jar，fastjson-1.2.70.jar

3.springmvc.xml文件里面要有这个元素

<mvc:annotation-driven/>
<mvc:default-servlet-handler/>

4.SpringMVC里面用Map接收也可以用其他的对象接收不过我没用试过

5.要传递JSON对象先转换成 json字符串用这个函数：JSON.toJSONString(map);然后写入response.setContentType("application/json");

6.最后打印想要传递的 json字符串：response.getWriter().print(json);

@RequestMapping(value="/testMVC",method=RequestMethod.POST)
@ResponseBody
public void testMVC( @RequestBody(required=true) Map<String,Object> map ,HttpServletRequest request, HttpServletResponse response) {
           map.put("exaid","exaid");
           String json = JSON.toJSONString(map);
           System.out.println(json);
           System.out.println(String.class.isInstance(json));
           response.setContentType("application/json");
           try {
               response.getWriter().print(json);
           } catch (IOException e) {
               // TODO Auto-generated catch block
               e.printStackTrace();
           }
   }

7.前端ajax的success函数直接接受

success:(msg)=>{//后端传的是json字符串,转化为json 前端接收到的是JSON的数据
                   console.log(msg.exaid);
                   $('#data').html(msg.exaid);
               },