本文详述了如何利用jQuery AJAX向后台SSM框架提交包含一对多关系的订单数据，通过实例展示了前端数据收集、实体类映射及后端处理的全过程。
Java向后台提交表格数据
- 介绍: jquery的ajax向后台SSM提交实体类数据,主要典型:网络商城中购物,提交订单.需要提交一个一对多的订单.此样例的功能介绍,将页面的上的主订单,与订单详情一起提交到后台,进行数据持久化.
我的表达能力很差,所以直接上代码,代码中有详细注解
前端代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no">
<link rel="stylesheet" href="../../layui/css/layui.css" media="all" />
<link rel="stylesheet" href="../../css/public.css" media="all" />
</head>
<body class="childrenBody">
<form class="layui-form" style="width: 400px;">
<div class="layui-form-item layui-row layui-col-xs12">
<label class="layui-form-label"><font color="red">*</font>发货人</label>
<div class="layui-input-block">
<input type="text" class="layui-input addresserName" lay-verify="required" placeholder="请输入登录名">
</div>
</div>
<div class="layui-form-item layui-row layui-col-xs12">
<label class="layui-form-label"><font color="red">*</font>发货人电话</label>
<div class="layui-input-block">
<input type="text" class="layui-input addresserPhone" lay-verify="phone" placeholder="输入联系方式">
</div>
</div>
<div class="layui-form-item layui-row layui-col-xs12">
<label class="layui-form-label"><font color="red">*</font>发货人证件</label>
<div class="layui-input-block">
<input type="text" class="layui-input addresserCard" lay-verify="idCard" placeholder="输入身份证号码">
</div>
</div>
<div id="idCardinfo" class="layui-form-item layui-row layui-col-xs12">
<label class="layui-form-label"><font color="red">*</font>收货人</label>
<div class="layui-input-block">
<input type="text" class="layui-input recipientsName" lay-verify="required" placeholder="请输入收件人">
</div>
</div>
<div id="idCardinfo" class="layui-form-item layui-row layui-col-xs12">
<label class="layui-form-label"><font color="red">*</font>收货人电话</label>
<div class="layui-input-block">
<input type="text" class="layui-input recipientsPhone" lay-verify="phone" placeholder="请输入收件人联系方式">
</div>
</div>
<div class="layui-form-item layui-row layui-col-xs12">
<label class="layui-form-label"><font color="red">*</font>收货地址</label>
<div class="layui-input-block" style="width: 200px;">
<select name="province" class="province" lay-filter="province">
<option value="">请选择省</option>
</select>
<select name="city" class="city" lay-filter="city" disabled>
<option value="">请选择市</option>
</select>
<select name="area" class="area" lay-filter="area" disabled>
<option value="">请选择县/区</option>
</select>
</div>
</div>
<div class="layui-form-item layui-row layui-col-xs12">
<label class="layui-form-label">备注</label>
<div class="layui-input-block">
<textarea placeholder="请输入备注" class="layui-textarea remark"></textarea>
</div>
</div>
<div class="layui-form-item layui-row layui-col-xs12">
<div class="layui-input-block">
<button type="button" class="layui-btn layui-btn-sm" lay-submit="" id="submitinfo" lay-filter="addUser">添加订单详情</button>
<button type="reset" id="reset" class="layui-btn layui-btn-sm layui-btn-primary">取消</button>
</div>
</div>
</form>
<div style="display: none; width: 800px;position:absolute;right: 300px ;" id="historyDiv">
<table id="historyTable" class="layui-table" lay-size="sm">
<tr>
<th>订单号</th>
<th>备注</th>
<th>操作</th>
</tr>
<tr class='historyTable'>
<td style="padding:0px">
<input type="text" class="layui-input historyID" lay-verify="required" placeholder="请输入单号">
</td>
<td style="padding:0px">
<input type="text" class="layui-input historyRemark" placeholder="请输入备注">
</td>
<td style="padding:0px;width: 50px;">
<input id="delDevice" class="layui-btn layui-btn-normal" type="button" value="删除" onclick="deleteLine(this)" />
</td>
</tr>
</table>
<button class="layui-btn" style="position:absolute;right:100px;" id="SubNext" lay-filter="addOrder" lay-submit>提交</button>
<button class="layui-btn" style="position:absolute;right:0px;" id="addNext">继续添加</button>
</div>
<script type="text/javascript" src="../../layui/layui.js"></script>
<script type="text/javascript" src="orderAdd.js"></script>
<script type="text/javascript" src="../../js/address.js"></script>
<script>
function deleteLine(but) {
$(but).parent().parent().remove();
}
</script>
</body>
</html>
前端代码实现功能: 点击添加详情,出现左侧表格,然后在左侧表格可以操作继续添加下一行与删除当前行. 提交:表示吧信息统一提交后台;
JS代码:
var form, $, areaData;
layui.config({
base: "../../js/"
}).extend({
"address": "address"
})
layui.use(['form', 'layer', 'address'], function() {
var form = layui.form
layer = parent.layer === undefined ? layui.layer : top.layer,
$ = layui.jquery;
address = layui.address;
//获取省信息
address.provinces();
//添加详情
form.on("submit(addUser)", function(data) {
$("#historyDiv").show();
})
//取消事件
$("#reset").click(function() {
$("#historyDiv").hide();
})
//添加下一行
$("#addNext").click(function() {
$("#historyTable").append("<tr class='historytr'><td style='padding:0px'><input type='text' class='layui-input historyID' lay-verify='required' placeholder='请输入单号'></td>" +
"<td style='padding:0px'><input type='text' class='layui-input historyRemark' placeholder='请输入备注''></td>" +
"<td style='padding:0px; width:50px;'><input type='button' class='layui-btn layui-btn-normal' value='删除' onclick='deleteLine(this)' /></td></tr>");
})
//订单实体类 与后台实体类对应
var orderEntity=function(addresserName,addresserPhone,addresserCard,recipientsName,recipientsPhone,endSite,remark,historyArr){
this.addresserName=addresserName;
this.addresserPhone=addresserPhone;
this.addresserCard=addresserCard;
this.recipientsName=recipientsName;
this.recipientsPhone=recipientsPhone;
this.endSite=endSite;
this.remark=remark;
//一对多关联关系
this.orderhistorys=historyArr;
}
//订单详情类 与后台实体类对应
var historyEntity=function(carId,remark){
this.carId=carId;
this.remark=remark;
}
//添加
form.on("submit(addOrder)",function(){
var order=[];
//获取订单类的对象
var ord=new orderEntity();
//获取数据
ord.addresserName=$(".addresserName").val();
ord.addresserPhone=$(".addresserPhone").val();
ord.addresserCard=$(".addresserCard").val();
ord.recipientsName=$(".recipientsName").val();
ord.recipientsPhone=$(".recipientsPhone").val();
ord.endSite=$(".province").val()+"-"+$(".city").val()+"-"+$(".area").val();
ord.remark=$(".remark").val();
//创建Array Array表示在一个对象中存储多个数值
var historyArr = new Array();
//循环取值,多条数据.就是那个订单详情的table
$(".historytr").each(function(index){ //循环式tr节点. 不是table 按照class属性进行循环
var history=new historyEntity();
var id=$(this).find(".historyID").val();
var val=$(this).find(".historyRemark").val();
history.carId=id;
history.remark=val;
//利用循环将实体数据逐步添加到Array中
historyArr[index]=history;
});
//再将实体写入映射关系中
ord.orderhistorys=historyArr;
//给订单类数据
order.push(ord);
alert(JSON.stringify(order));
$.ajax({
url: "http://localhost:8080/lms/order/inserOrders.do",
dataType:"json",//返回值类型Json
contentType: "application/json",//请求内容为Json
type:"POST",
async:false,
data: JSON.stringify(order), //将参数转换为json
success: function(data) {
alert(data.code);
if(data.code == "0") {
//top.layer.close(index);
top.layer.msg("订单添加成功！");
layer.closeAll("iframe");
//刷新父页面
parent.location.reload();
} else {
layer.alert("订单添加失败");
}
},
//前后端分离,同步session的
xhrFields: {
withCredentials: true
},
error: function() {
layer.msg("请求失败,请稍后重试!")
}
});
})
})
里面最重要的代码块,已添加详细注释.
后端代码controller层代码:
@RequestMapping(value = "inserOrders.do", method = { RequestMethod.POST })
@ResponseBody
public ServerResponse insertOrders1(@RequestBody String o) {//@RequestBody表示接受的数据是json格式字符串
//前端传递的参数中两端带有[],所以要截掉,否则无法反序列化.
//根据情况,来看具体数据是否要进行截取
o = o.substring(1, o.length() - 1);
//反序列化json 反序列化的Order实体 要跟前端的实体一样 并且里面也要做订单与订单详情的一对多映射关系
Orders order = JSON.parseObject(o, Orders.class);
boolean bool = ordersService.insertOrder(order);
if (bool) {
logger.info("增加订单信息成功");
return ServerResponse.createBySuccessMessage("增加订单信息成功");
} else {
logger.info("增加车辆信息失败");
return ServerResponse.createBySuccessMessage("增加车辆信息失败");
}
}
后台实体类就贴上来了. 这个传递json的主要核心主要在js的实体映射那个地方.已有详细注释, 后台处理也有详细注释.这只是一个例子,需要根据实际业务进行实际开发.希望能帮到大家, 我是菜鸟一枚,以上如有错误地点,请指出.
扫一扫
2951
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
