提交的使用场景
后台的是 使用 java的 springmvc 框架， 那么想 后台 提交 对象的时候， 特别是对象 比较复杂，后台的对象 关联了其他对象，而且还有 关联其他 数组或者list 对象的情况下， 一般我们都是 通过 from 表单 提交 给后台的。
那么如果我们需要更好的体验和 前端交互，在提交的时候，我们就需要 使用 ajax 技术， 然后数据呢，我们就 使用 比如 data: $("#progressOrderForm").serialize() 来达到我们的目的。
$.ajax({
type: 'POST',
url: $("#rootPath").val() + "/buyer/process/order/fast/orderSave.htm",
data: $("#progressOrderForm").serialize(),
dataType: "json",
success: function(data) {
layer.close(indexLoad);
alert(data.msg);
if (!data.ok) {
$("#progressOrderForm").remove();
} else {
//判断是 去订单列表还是 在当前页面！ ,当前页面需要刷新
location.href = $("#rootPath").val() + "/retailIndex.htm";
}
},
error: function(data) {
layer.close(indexLoad);
alert(data.msg);
}
});
构建一个隐藏的from 表单，如果没有 form表单
可是 我们就需要有一个 form 表单了 。 如果我们没有form表单，而又想 通过 ajax 来 进行将对象 给到后台 怎么 通过 js 来进行写呢？ 当然我们 可以 繁琐一点， 直接 新建一个 form ,然后 form 里面 拼 很多 input 进行提交即可 比如：
function ajaxSubmit() {
var indexLoad = layer.load(1, {
shade: [0.5, '#fff'] //0.1透明度的白色背景
});
$.ajax({
type: 'POST',
url: $("#rootPath").val() + "/buyer/process/order/fast/orderSave.htm",
data: $("#progressOrderForm").serialize(),
dataType: "json",
success: function(data) {
layer.close(indexLoad);
alert(data.msg);
if (!data.ok) {
$("#progressOrderForm").remove();
} else {
//判断是 去订单列表还是 在当前页面！ ,当前页面需要刷新
location.href = $("#rootPath").val() + "/retailIndex.htm";
}
},
error: function(data) {
layer.close(indexLoad);
alert(data.msg);
}
});
}
/**
* 构造订单明细和检验， 以便提交
order_status 订单状态 : 保存或者是 提交
*/
function createOrdersAndDetailListAndCheck(order_status) {
// 校验 其他的，比如是否登录，比如 是否 填好地址等
createFormToSubmit();
//先构建订单主表的数据
//判断是否选择了地址
var address_id = $("#address_id").val();
if (address_id == "") {
notPassCheckTodo('请选择送货地址！');
return false;
}
var order_id = $("#order_id").val(); //订单id,如果是修改的话
var user_id = $("#user_id").val(); //买家id
var buyer_msg = $("#buyer_msg").text(); //买家留言
var order = new Map();
if (order_id) {
order.set('id', order_id);
}
order.set('user.id', user_id);
order.set('orderStatus', order_status);
order.set('addr.id', address_id); //订单地址id
order.set('buyerMsg', buyer_msg);
order.set("isTax", isTax);
order.set("weightWay", weightWay);
order.set('deliveryMode', deliveryMode);
creatFormOrderHidden(order); //构建表单数据
$(".form_list_ul").each(function(i) {
var mat = $(this).find('[name="mat"]').val();
var detailId = $(this).find("input[name='peDetails_id']").val();
var peDetails_inciseWay = $(this).find('[name="peDetails_inciseWay"]').val();
var num = $(this).find('[name="Number_id"]').val();
var peDetails_spec_type = parseInt($(this).find('[name="type1"]').val());
var thickness = $(this).find("input[name='peDetails_thickness0']").val();
var width = $(this).find("input[name='peDetails_width0']").val();
var length = $(this).find("input[name='peDetails_length0']").val();
var consultWeight = $(this).find("input[name='Reference']").val();
var modelNo = $(this).find("input[name='modelNo']").val();
var unitPrice = $(this).find("input[name='unitPrice']").val();
var totalPrice = $(this).find("input[name='totalPrice']").val();
if (totalPrice == "" || unitPrice == "") {
return true; //跳过本次循环，进行入下一次
}
var df_w0 = $(this).find("input[name='df_w0']").val(); //宽下偏差
var df_w1 = $(this).find("input[name='df_w1']").val(); //宽上偏差
var df_h0 = $(this).find("input[name='df_h0']").val(); // 长下偏差
var df_h1 = $(this).find("input[name='df_h1']").val(); //长上偏差
var msgDf = checkTolerances(df_w0, df_w1, df_h0, df_h1);
if (msgDf != "ok") {
notPassCheckTodo(msgDf);
return false;
}
if (mat != "" && thickness != "" && width != "" && length != "" && num != "") {
/*var dataItem = {
"id": detailId ,//明细的id
"inciseWay": peDetails_inciseWay, //切割方式
"texture": mat, //材质
"count": num, //件数
"specType": peDetails_spec_type, //规格类型
"thickness": thickness, //厚度
"width": width, //宽度
"length": length, //高度
"totalWeight": consultWeight, //参考重量
"modelNo": modelNo ,//模号,
"unitPrice":unitPrice,//单价
"totalPrice":totalPrice ,//总价,
"widthDownTolerances":df_w0 ,//宽下偏差
"widthUpTolerances":df_w1,//宽上偏差
"lengthDownTolerances":df_h0,//高下偏差
"lengthUpTolerances":df_h1,//高的上偏差
"isTax":isTax,//是否含税
"weightWay":weightWay,//计重方式
"deliveryMode":deliveryMode//提货方式
};*/
var dataItemMap = new Map();
dataItemMap.set('id', detailId);
dataItemMap.set('inciseWay', peDetails_inciseWay);
dataItemMap.set('texture', mat);
dataItemMap.set('count', num);
dataItemMap.set('specType', peDetails_spec_type);
dataItemMap.set('thickness', thickness);
dataItemMap.set('width', width);
dataItemMap.set('length', length);
dataItemMap.set('totalWeight', consultWeight);
dataItemMap.set('modelNo', modelNo);
dataItemMap.set('unitPrice', unitPrice);
dataItemMap.set('widthDownTolerances', df_w0);
dataItemMap.set('widthUpTolerances', df_w1);
dataItemMap.set('lengthDownTolerances', df_h0);
dataItemMap.set('lengthUpTolerances', df_h1);
dataItemMap.set('isTax', isTax);
dataItemMap.set('weightWay', weightWay);
dataItemMap.set('deliveryMode', deliveryMode);
creatFormOrderItemHidden(dataItemMap, i); //构建明细表单数据
} else {
i = i + 1;
var msg = "第" + i + "条数据不完整，无法提交";
notPassCheckTodo(msg);
return false;
}
});
}
//创建一个隐藏的form 表单方便提交
function createFormToSubmit() {
var formStr = ' <form method="post" accept-charset="utf-8" id="progressOrderForm" style="display:none;" > ';
formStr += ' </form> ';
$("body").append(formStr);
}
// 构建 订单主表数据
function creatFormOrderHidden(orderMap) {
orderMap.forEach(function(value, key, orderMap) {
createHiddenField(key, value);
});
}
//构建订单明细表数据
function creatFormOrderItemHidden(orderMap, i) {
var itemsStr = "items[" + i + "].";
orderMap.forEach(function(value, key, orderMap) {
createHiddenField(itemsStr + key, value);
});
}
/**
* 一个Hidden
* @param name
* @param value
* @returns {String}
*/
function createHiddenField(name, value) {
var input = "<input type='hidden' name='" + name + "' value='" + value + "'>\n";
$("#progressOrderForm").append(input);
}
使用js 的简便方式
通过 自定义一个 form 表单，是可以达到效果， 可是不觉得非常的繁琐，而且 执行效率也比较低，同时 可能form表单也可能重名什么的。 重用方面也很差。 于是我就想 通过 js 的对象方式进行改进，达到需要的效果。
后台的对象 例子：
@RequestMapping("/mytest/testjson")
@ResponseBody
public String testallipay(Role role, HttpServletRequest req, HttpServletResponse response) {
// System.out.println(user.getId().toString() + ">>>>>" + user.getName());
// System.out.println("##############>>>>>" + user.getMemberNumber().getId());
System.out.println(role.getId() + ">>>>>" + role.getRoleName());
System.out.println(role.getMenuroles().get(0).getId());
System.out.println(role.getMenuroles().get(1).getId());
return "aa";
}
这样我们需要 前端传入一个 role 对象， 可是对象role 里面有 一个
/**
* 菜单角色
*/
private List<Menurole> menuroles;
private User user;//用户对象
如果需要前端 也将 menuroles 传入 role里面 怎么 写呢？
js 对象的 写法2种一样的效果
var obj = new Object();
// obj.id='22'; 和下面的方式是一样的
obj["id"]='22';
可以看到 对象 obj 定义一个 属性 id ，写法 可以有两种方式。
这样就方便我们 自定义对象属性 给后端了。
例子如下：
var obj = new Object();
obj["id"]='22';
obj.roleName='oumin';
obj["menuroles[0].id"]='88';
obj["menuroles[1].id"]='99';
obj["user.id"]='991'; //传递 单个对象的写法
console.log('>>'+JSON.stringify(obj));//输出json 字符串
结果： {"id":"22","roleName":"oumin","menuroles[0].id":"88","menuroles[1].id":"99","user.id":"991"}
//ajax 想后台提交 role对象
$.ajax({
type: 'POST',
dataType: "json",
url: "/mytest/testjson",
data:obj,
success: function(data) {
console.log(data);
},
error: function(data) {
console.log(data);
}
});
这样子就达到我们的效果了。
是不是 比通过 form 表单的方式 效率高多了！
而且在 动态获取对象的数据的时候， 可以灵活进行获取了。
总结
其实 js对象的 属性写法， 和 form表单的 提交给 后端的 name 的名称是一样的写法的。 form 表单的 对应 name 是 什么那么我们的obj 属性名称就是什么，赋值进行去即可了。 这样就更加灵活了，完全不需要 form表单了。 其实是大家一直不知道 对象 的属性怎么写而已。 我是一直我都不知道怎么写，也不知道前端怎样写后端才可以解析。
顺便提一下， 通过 js对象 构建 json 字符串的方式
var obj3 = new Object();
obj3["id"]='22';
obj3.name='oumin';
var memberNumber=new Object();
memberNumber.id='88';
obj3["memberNumber"]=memberNumber;
console.log('3>>>>'+JSON.stringify(obj3));// 这样就可以获取到 正常的 json字符串了
// {"id":"22","name":"oumin","memberNumber":{"id":"88"}}