所有方法亲测可用
测试环境:
windows10(64 位) + idea 2020.3 + jdk1.8(8u221) + tomcat 8.5.50
spring 4.3.7.RELEASE + spring-mvc 4.3.7.RELEASE + mybatis 3.4.2
firefox (版本81.0) + Google Chrome 85.0.4183.121(正式版本)[两个浏览器都通过测试]
1 后端给前端传数据
后端(发送方)
@ResponseBody @RequestMapping(value = "getsData",method = RequestMethod.POST) public String getsData(String id){ //发送方要先构造数据,比如此处是通过service层调用mybatis以获得数据 List<String> Data= Service.getDataByid(id); //将Data转换为json对象,此处的JsonUtil为自定义的类 //因为返回的是String,所以最后的json变为了String传给了前端 return new JsonUtil().Object2Json(Data); }
前端(接收方)
$.post({ url:"getsData", //此处参数名为id,后端要根据这个id查询,所以后端变量名要为id data:{'id':"cb1b23b"}, success:function (someData){ //执行成功时你要执行的js代码 //通常要根据返回的someData修改html代码 //其中,someData[i]表示第i个对象,此处为字符串 //因为后端传的是List<String>,如果是List<Person>的话 //(其中Person为自定义类型,属性为String name,int age) //someData[i]["name"]表示第i个对象的name属性的值 } });
2 前端给后端传数据
前端(发送方)
//发送方要先构造数据,此处是通过构造数组来创建要传送的data var params = []; //相当于 let obj = new Object(); let obj= {}; //obj需要什么属性,就直接打点就好了,比如需要性别属性,就直接obj.sex obj.name="张三"; obj.age=100; params.put(obj); obj.name="李四"; obj.age=1; params.put(obj); //以上构造了两个person对象,(属性为String name,int age) //并将它们加入了参数数组中 params= JSON.stringify(params); $.post({ url:"postData", //后端要接收,变量名要为people data:{'people':params}, success:function (){ //执行成功时你要执行的js代码 //比如:location.reload(); //此时你的数据应该已经提交完毕了 } });
后端(接收方)
//如果要返回结果,就加上@ResponseBody //@ResponseBody @RequestMapping("postData") public String postData(@Param("people") String people){ System.out.println("String: "+people); //如果后端还需返回给前端数据就写在这个return里,注意要return json字符串 //如果不需要返回结果,随便return个字符串就好了. return "index"; }
3.其他疑虑
在前端给后端发送数据的情况下:使用 “JSON.stringify();” 前,
js的typeof打印的是Object,
使用后打印的是String,所以最终传给后端的data应该是String类型才对。
可是,后端接收段接收一个Object类型的参数也可以(只要参数名正确),且用 “instanceof” 判断结果竟然不是String,直接输出显示java.lang.Object@573effb3,也就是说后端接受到的其实不是一个String,只是可以通过toString()转换成String而已,是json数组对象吗?尚未解决!!!