前端的菜鸡，我，搞个前端真的怀疑人生。
（文末有json解析要的jar包下载）
在做个项目，购物车，前台如果全部要买，要传多个购买的订单信息，本来简单传个主键数组就行了，可偏偏想尝试下传整个信息对象过去。
网上很多办法，坑也多，也只能说，网上的不一定适合自己，只能自己填坑。
如果一开始，是传一个对象，比如这个：
<script type="text/javascript">
function testJson(){
// 获取输入的用户名和密码
var username = $("#username").val();
var password = $("#password").val();
$.ajax({
url : "${pageContext.request.contextPath }/testJson",
type : "post",
// data表示发送的数据
data :JSON.stringify({username:username,password:password}),
// 定义发送请求的数据格式为JSON字符串
contentType : "application/json;charset=UTF-8",
//定义回调响应的数据格式为JSON字符串,该属性可以省略
dataType : "json",
//成功响应的结果
success : function(data){
if(data != null){
alert("您输入的用户名为："+data.username+
"密码为："+data.password);
}
}
});
}
</script>
</head>
<body>
<form>
用户名：<input type="text" name="username" id="username"><br />
密 码：
<input type="password" name="password" id="password"><br />
<input type="button" value="测试JSON交互" onclick=" testJson()" />
</form>
后台就这样子就行：
@RequestMapping("/testJson")
@ResponseBody
public User testJson(@RequestBody User user) {
// 打印接收的JSON格式数据
System.out.println(user);
// 返回JSON格式的响应
return user;
}
---------------------分割线------------------
（当然你可能后台获取的数据需要解码，看下面）
如果前端的js是这样，！！！看注释！！！
顺便说下，如果想在JSTL嵌套JSTL，多少JSTL放一起，都一个${…}就行了，下面代码就是，那东西里面其实就是放java代码的，我是这么理解的。
<script>
function subs() {
//这里是我获取表单信息的，记得一定要加value,不然后面会报500我错误，还是415来着
var phone = document.getElementById("orderphone").value;
var address = document.getElementById("orderaddress").value;
var saveDataAry = new Array(); //这个用来存储对象的一个数组
//这里是jstl，用j每个for设值加一，来当index,或者想用
// <c:foreach 里面的varStatus也行
<c:set var="j" value="0"></c:set>
for (var i = 0; i < ${allBuyOrders.size()}; ++i) {
//这里allBuyOrder和j是不用JSTL的东西，直接放进去就行了
var data1={orderimgname:"${allBuyOrders.get(j).orderimgname}",
ordername:"${allBuyOrders.get(j).ordername}",
orderprice:${allBuyOrders.get(j).orderprice},
orderphone:phone, //不加双引号，后台获取可以当int用
orderaddress:address,
username:"${username}",
ordernum:1,
sign:0
};
saveDataAry.push(data1);
console.log(data1);
<c:set var="j" value="${j+1}"></c:set>
}
//console.log("2");
$.ajax({
type:"POST",
url: "${pageContext.request.contextPath}/buyIt",
dataType:"json",
contentType:"application/json;charset=utf-8",
//网上有其他教程，就是下面这个data,这样写，但是这样写的话，我这边后台会那样，看下面
data:{list:JSON.stringify(saveDataAry)}, //这里是重点
success:function(data){
alert("购买成功");
}
});
}
</script>
后台获取：
@RequestMapping("/buyIt") //后台获取数据
@ResponseBody //这个注释要的，还有下面参数那个注释也要
public ModelAndView buyIt(@RequestBody String list) throws UnsupportedEncodingException {
//这样的话，后台会这样
System.out.println(list);
ModelAndView modelAndView = new ModelAndView();
modelAndView.setViewName("login");
return modelAndView;
}
后台：
会出现list=%5B%7B…巴拉巴拉一大堆，这个好像是浏览器自动解码还是什么的
其实这个应该这样处理：
@RequestMapping("/buyIt") //后台获取数据
@ResponseBody
public ModelAndView buyIt(@RequestBody String list) throws UnsupportedEncodingException {
ModelAndView modelAndView = new ModelAndView();
//没错，就是下面这个东西，能转成人看的东西，例如下面的截图
String deurl = URLDecoder.decode(list,"UTF-8");
System.out.println(deurl);
modelAndView.setViewName("login");
return modelAndView;
}
------------------分割线--------------
这里下面又是进一步的解析了，百度都有，如果前端是下面这样：（就下面data变了）
<script>
function subs() {
var phone = document.getElementById("orderphone").value;
var address = document.getElementById("orderaddress").value;
var saveDataAry = new Array();
<c:set var="j" value="0"></c:set>
for (var i = 0; i < ${allBuyOrders.size()}; ++i) {
var data1={orderimgname:"${allBuyOrders.get(j).orderimgname}",
ordername:"${allBuyOrders.get(j).ordername}",
orderprice:${allBuyOrders.get(j).orderprice},
orderphone:phone,
orderaddress:address,
username:"${username}",
ordernum:1,
sign:0
};
saveDataAry.push(data1);
console.log(data1);
<c:set var="j" value="${j+1}"></c:set>
}
console.log("2");
$.ajax({
type:"POST",
url: "${pageContext.request.contextPath}/buyIt",
dataType:"json",
contentType:"application/json;charset=utf-8",
//只有这一个参数，json格式，后台解析为实体，后台可以直接用
data:JSON.stringify(saveDataAry),
success:function(data){
alert("购买成功");
}
});
}
</script>
后台直接输入list会是这样：
是的，你没看错，不用那句String deurl = URLDecoder.decode(list,“UTF-8”);，直接就出来了
下面就开始解析json数组了
@RequestMapping("/buyIt") //后台获取数据
@ResponseBody
public ModelAndView buyIt(@RequestBody String list) throws UnsupportedEncodingException {
Orders orders;
ModelAndView modelAndView = new ModelAndView();
// String deurl = URLDecoder.decode(list,"UTF-8");
// System.out.println(deurl);
//把list转为jsonarry，就是一数组
JSONArray ary = JSONArray.fromObject(list);
for(int i=0;i<ary.size();i++) {
//下面这句很关键
//用jsonobject.tobean(jsonObject, <bean>)，两个参数，
//一个是jsonobject,一个是bean类型，别忘了bean后面有个 .class
orders = (Orders)JSONObject.toBean(ary.getJSONObject(i), Orders.class) ;
System.out.println(orders);
}
modelAndView.setViewName("login");
return modelAndView;
}
如果上面的解析看不懂，看下面：
@RequestMapping("/buyIt") //后台获取数据
@ResponseBody
public ModelAndView buyIt(@RequestBody String list) throws UnsupportedEncodingException {
ModelAndView modelAndView = new ModelAndView();
Orders orders; //这里实例一个bean
//把list转为jsonarry，就是一数组
JSONArray ary = JSONArray.fromObject(list);
JSONObject object; //实例一个jsonobject
for(int i=0;i<ary.size();i++) {
object = ary.getJSONObject(i); //每次获取一个obj出来
//然后再通过tobean转为javabean
orders = (Orders)JSONObject.toBean(object, Orders.class) ;
System.out.println(orders);
}
modelAndView.setViewName("login");
return modelAndView;
}
bean都出来了，还不会转为bean数组或者Array?那就留言吧。。。
-----------------分割线------------------------------------
所以最后的代码就是：
前端js:
<script>
function subs() {
var phone = document.getElementById("orderphone").value;
var address = document.getElementById("orderaddress").value;
var saveDataAry = new Array();
<c:set var="j" value="0"></c:set>
for (var i = 0; i < ${allBuyOrders.size()}; ++i) {
var data1={orderimgname:"${allBuyOrders.get(j).orderimgname}",
ordername:"${allBuyOrders.get(j).ordername}",
orderprice:${allBuyOrders.get(j).orderprice},
orderphone:phone,
orderaddress:address,
username:"${username}",
ordernum:1,
sign:0
};
saveDataAry.push(data1);
console.log(data1);
<c:set var="j" value="${j+1}"></c:set>
}
console.log("2");
$.ajax({
type:"POST",
url: "${pageContext.request.contextPath}/buyIt",
dataType:"json",
contentType:"application/json;charset=utf-8",
data:JSON.stringify(saveDataAry), //只有这一个参数，json格式，后台解析为实体，后台可以直接用
success:function(data){
alert("购买成功");
}
});
}
</script>
后端没带进bean数组的的代码是：
（ModelAndView）是ssm的那个啥，你们懂的，如果是jsp web的话，关键代码知道就行了。
@RequestMapping("/buyIt") //后台获取数据
@ResponseBody
public ModelAndView buyIt(@RequestBody String list) throws UnsupportedEncodingException {
Orders orders;
ModelAndView modelAndView = new ModelAndView();
JSONArray ary = JSONArray.fromObject(list);
JSONObject object;
for(int i=0;i<ary.size();i++) {
object = ary.getJSONObject(i);
orders = (Orders)JSONObject.toBean(object, Orders.class) ;
System.out.println(orders);
}
modelAndView.setViewName("login");
return modelAndView;
}
有错误请指出来，谢谢，有问题可以留言。
我目前ssm要用到的所有jar,我也懒得找解析包了
链接：https://pan.baidu.com/s/1fgWOGqJWrPmtMT4d7zW-QQ
提取码：x3cx
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
