前端的菜鸡,我,搞个前端真的怀疑人生。
(文末有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: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, ),两个参数,
//一个是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