js 如何經過對象向後臺提交ajax 對象以及它的關聯對象的寫法，取代form表單提交
提交的使用場景
後臺的是 使用 java的 springmvc 框架， 那麼想 後臺 提交 對象的時候， 特別是對象 比較複雜，後臺的對象 關聯了其餘對象，並且還有 關聯其餘 數組或者list 對象的狀況下， 通常咱們都是 經過 from 表單 提交 給後臺的。前端
那麼若是咱們須要更好的體驗和 前端交互，在提交的時候，咱們就須要 使用 ajax 技術， 而後數據呢，咱們就 使用 好比 data: $("#progressOrderForm").serialize() 來達到咱們的目的。java
$.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 進行提交便可 好比：ajax
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 的對象方式進行改進，達到須要的效果。spring
後臺的對象 例子：json
@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"}}
另外一種建立對象的寫法
var processBaseQuotation = {};// 和 var processBaseQuotation = new Object(); 同樣
processBaseQuotation["details["+pos+"].inciseWay"] = inciseWay;
js map 對象的坑
js map 對象 不兼容ie8,9 因此不要亂用mvc
若是不賦值 後臺對象進行接收會是 null app
好比 form表單提交給後臺 框架
< input name="count" value="" />
後臺代碼java的bean 實體對應的 count 爲
private Integer count =0;
若是這時候， count 輸入框沒有輸入值，或者輸入值手動刪除了。
提交到了 後臺 ， count 的值 就是 null 值了。
而不是默認值了。
若是屬性是 private int count =0;
若是這時候， count 輸入框沒有輸入值，或者輸入值手動刪除了。
就會發現 後臺爆空指針異常，覺得不能把 null 賦值給 int
或者 定義對象
var pars = {}; pars.loanID = "${id}"; pars.tzmoney = tzmoney; pars.vCode = vCode;
相關文章
- 1. 對象化前端表單（Form）提交
- 2. js異步提交form表單之serialize()方法及FormData對象
- 3. form表單提交 list對象給Java 後臺結合
- 4. 表單提交帶對象和不帶對象的區別
- 5. SpringMVC 用對象接收 ajax提交form表單
- 6. 表單提交多個對象
- 7. spring form提交對象數組
- 8. JS面向對象（一）—— 對象以及對象的創建
- 9. 表單--form對象
- 10. 使用HTML5的FormData對象， 經過 Ajax表單異步提交文件數據
- 更多相關文章...
- • PHP 面向對象 - PHP教程
- • Lua 面向對象 - Lua 教程
- • 互聯網組織的未來：剖析GitHub員工的任性之源
- • SpringBoot中properties文件不能自動提示解決方法
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
歡迎關注本站公眾號,獲取更多信息
