Jquery表單序列化后添加數(shù)據(jù)

serialize()、serializeArray()方法都是jquery用戶(hù)序列化表單的，用于ajax提交的data值的序列化

為巴里坤哈薩克等地區(qū)用戶(hù)提供了全套網(wǎng)頁(yè)設(shè)計(jì)制作服務(wù)，及巴里坤哈薩克網(wǎng)站建設(shè)行業(yè)解決方案。主營(yíng)業(yè)務(wù)為網(wǎng)站設(shè)計(jì)、做網(wǎng)站、巴里坤哈薩克網(wǎng)站設(shè)計(jì)，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專(zhuān)業(yè)、用心的態(tài)度為用戶(hù)提供真誠(chéng)的服務(wù)。我們深信只要達(dá)到每一位用戶(hù)的要求，就會(huì)得到認(rèn)可，從而選擇與我們長(zhǎng)期合作。這樣，我們也可以走得更遠(yuǎn)！

在chrome的控制臺(tái)我們很清楚的看到了serializeArray()返回的是json數(shù)組，數(shù)組的每個(gè)對(duì)象都是有json字符串構(gòu)成，我們可以看到，每個(gè)json字符串包括兩個(gè)鍵值對(duì)，每個(gè)鍵值對(duì)都是有name,value組成，其實(shí)serializeArray()它把表單里的每個(gè)需要提交的dom的name的值賦給json字符串的name,dom的value的值賦給json字符串的value.

那么我們只需這要添加額外的內(nèi)容：

var dataParam = $("#updateChannelForm").serializeArray();

例如我想添加sex="男"

dataParam.push({"name":"sex","value":"男"}) 就可以了

我們看到serialize()方法把表單里的內(nèi)容序列化成了字符串

"id=58channelType=2subTitle=591teststetetsextAttrValueId=599"

那么我們只需這要添加額外的內(nèi)容：

var dataParam = $("#updateChannelForm").serialize();

例如我想添加sex="男"

dataParam =dataParam +""+"sex=男"

JQuery的post提交方式為什么要序列化，而Get提交方式就不用？序列化做了什么？

這是因?yàn)楹笈_(tái)能夠直接處理的數(shù)據(jù)格式，是一種經(jīng)過(guò)序列化的鍵值對(duì)數(shù)據(jù)，比如前端要向后臺(tái)提交三個(gè)參數(shù)，分別是a=1，b=2，c=3，那么后臺(tái)接收到的數(shù)據(jù)就應(yīng)該是a=1b=2c=3（可以看到其實(shí)就是每個(gè)“鍵值對(duì)”之間用連接）。當(dāng)我們用get方式提交數(shù)據(jù)時(shí)，參數(shù)是直接附加到url后面的，即

xxx.xxx這是域名此略.xxx?a=1b=2c=3

可以看到?后面的正是后臺(tái)程序能夠直接處理的數(shù)據(jù)格式，所以get方式提交數(shù)據(jù)的話(huà)，就不需要再對(duì)參數(shù)進(jìn)行序列化處理了，直接提交即可。

而當(dāng)我們用post方式提交時(shí)，通常我們提交的數(shù)據(jù)本身就是一個(gè)json對(duì)象，比如說(shuō)像這樣的：

var data = {a:1, b:2, c:3};

而提交時(shí)數(shù)據(jù)是直接以原始格式存儲(chǔ)在body中而不是以鍵值對(duì)的方式附加到url中的，所以后臺(tái)程序是無(wú)法直接識(shí)別的，這時(shí)候就需要在提交前先把data轉(zhuǎn)換為 a=1b=2c=3 的格式再提交，這就是序列化。

當(dāng)然，如果數(shù)據(jù)是通過(guò)表單提交的，那么不管是post方式還是get，瀏覽器會(huì)自動(dòng)進(jìn)行序列化，無(wú)需前端js再做任何處理。

jquery form 序列化成json對(duì)象

通過(guò)$("#form").serialize()可以獲取到序列化的表單值字符串。

通過(guò)$("#form").serializeArray()輸出以數(shù)組形式序列化表單值。

統(tǒng)統(tǒng)不滿(mǎn)足想得到Json的愿望。堆棧溢出后，找到了一個(gè)這樣的方法

然后通過(guò)JSON.stringify($("#form").serializeObject()); 就可以得到Json內(nèi)容

jquery或js前端提交數(shù)據(jù)的幾種方式

1.jquery提交數(shù)據(jù)的方式：

（1）第一種jquery序列化提交數(shù)據(jù)方式：

通過(guò)id獲取的form表單元素.serialize();

（2）第二種模擬form表單提交元素：

$('#form表單id').attr('method','post');

$('#form表單id'').find('input[name="type"]').val(test);

$('#form表單id').find('input[name="dfrom_to1"]').val(dfrom_to);

$('#form表單id').find('input[name="gt_road_new"]').val(gt_road);

$('#form表id').attr('action',AdminLTE.ctx+'/modules/ltegt/findAllCoverAndInterfere.do');

$('#analysisForm').submit();

2.js提交數(shù)據(jù)的方式：

(1).js提交表單( .submit()方法提交表單 )

function doSearch(){

var action ="%=path%/User_queryAllUser";

document.all.form.action = action;

document.all.form.submit();}

(2).js替代超鏈接( window.location.href )

input type="button" id="modify" value="修改工號(hào)" οnclick="modifyEmp(${ myList.employeeId })"

//js不能起名為modify，為敏感關(guān)鍵字

function modifyEmp( employeeId ){

//employeeId 作為js的參數(shù)傳遞進(jìn)來(lái)

window.location.href = '%=path%/User_openUserUpdate?employeeId='+employeeId;

網(wǎng)頁(yè)標(biāo)題：jquery序列化,jQuery序列化
網(wǎng)站網(wǎng)址：http://chinadenli.net/article46/dsgochg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站策劃、域名注冊(cè)、標(biāo)簽優(yōu)化、網(wǎng)站營(yíng)銷(xiāo)、建站公司、企業(yè)網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)