後臺的是 使用 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); } });
但是 咱們就須要有一個 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); }
經過 自定義一個 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裏面 怎麼 寫呢?
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表單了。 實際上是你們一直不知道 對象 的屬性怎麼寫而已。 我是一直我都不知道怎麼寫,也不知道前端怎樣寫後端才能夠解析。數組
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 對象 不兼容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;