麻豆小视频在线观看_中文黄色一级片_久久久成人精品_成片免费观看视频大全_午夜精品久久久久久久99热浪潮_成人一区二区三区四区

首頁 > 編程 > JavaScript > 正文

Jquery通過Ajax方式來提交Form表單的具體實(shí)現(xiàn)

2019-11-20 21:45:44
字體:
供稿:網(wǎng)友
今天剛好看到Jquery的ajax提交數(shù)據(jù)到服務(wù)器的方法,原文是:

保存數(shù)據(jù)到服務(wù)器,成功時(shí)顯示信息。
jQuery 代碼:
復(fù)制代碼 代碼如下:

$.ajax({
type: "POST",
url: "some.php",
data: "name=John&location=Boston",
success: function(msg){
alert( "Data Saved: " + msg );
}
});

后來我就想了一下,我要提交form表單有沒有辦法呢?但是我不可能每個(gè)fom的input都寫一次var demo=$("#divname").val();的.
后來,今天我看到一個(gè)方法,就是.map,就做出一下想法了,可以借鑒喲;
html代碼如下,下面我要提交Form 的id為dlg_form的所有input數(shù)據(jù),
復(fù)制代碼 代碼如下:

<form id="dlg_form" method="post">
<div class="fitem">
<label> 房間:</label>
<input name="RoomName" style="padding: 2px; width: 135px; border: 1px solid #A4BED4;" required />
</div>
<div class="fitem">
<label> 建筑:</label>
<input name="RoomName" class="easyui-combobox" style="padding: 2px; width: 141px; " required />
</div>
<div class="fitem">
<label> 部門:</label>
<input name="RoomName" class="easyui-combobox" style="padding: 2px; width: 141px; " required />
</div>
<fieldset>
<legend>
<label>
<input type="checkbox" id="ktkzq" name="ktkzq" value="ktkzq"/>
空調(diào)控制器</label>
</legend>
<div class="fitem">
<label> 端口:</label>
<input name="kt_dk" id="kt_dk" disabled="disabled" class="easyui-combobox" style="padding: 2px; width: 141px; " required />
</div>
<div class="fitem">
<label> 地址:</label>
<input name="kt_dz" id="kt_dz" disabled="disabled" class="easyui-combobox" style="padding: 2px; width: 141px; " required />
</div>
<div class="fitem">
<label> 工作方式:</label>
<input name="kt_gzfs" id="kt_gzfs" disabled="disabled" class="easyui-combobox" style="padding: 2px; width: 141px; " required />
</div>
<div class="fitem">
<label> 是否啟用:</label>
<input name="kt_sfqy" id="kt_sfqy" disabled="disabled" class="easyui-combobox" style="padding: 2px; width: 141px; " required />
</div>
</fieldset>
<fieldset>
<legend>
<label>
<input type="checkbox" id="dgkzq" name="dgkzq" value="dgkzq"/>
燈光控制器</label>
</legend>
<div class="fitem">
<label> 端口:</label>
<input name="dg_dk" id="dg_dk" disabled="disabled" class="easyui-combobox" style="padding: 2px; width: 141px; " required />
</div>
<div class="fitem">
<label> 地址:</label>
<input name="dg_dz" id="dg_dz" disabled="disabled" class="easyui-combobox" style="padding: 2px; width: 141px; " required />
</div>
<div class="fitem">
<label> 工作方式:</label>
<input name="dg_gzfs" id="dg_gzfs" disabled="disabled" class="easyui-combobox" style="padding: 2px; width: 141px; " required />
</div>
<div class="fitem">
<label> 是否啟用:</label>
<input name="dg_sfqy" id="dg_sfqy" disabled="disabled" class="easyui-combobox" style="padding: 2px; width: 141px; " required />
</div>
</fieldset>
<div class="fitem">
<label style=" width:100px;">
<input type="checkbox" id="zongbiao" name="zongbiao" value="zongbiao"/>
安裝了總表:</label>
</div>
<div class="fitem">
<label> 總表電能節(jié)點(diǎn):</label>
<input name="zbdnjd" id="zbdnjd" disabled="disabled" class="easyui-combobox" style="padding: 2px; width: 141px; " required />
</div>
</form>

是不是很多,如果要你每個(gè)input都寫的話,是不是要吐血?
看看我的方法,首先我們把所有的input的name和value都取下來,
js代碼如下:
復(fù)制代碼 代碼如下:

var str_data=$("#dlg_form input").map(function(){
return ($(this).attr("name")+'='+$(this).val());
}).get().join("&") ;
alert(data);

ps:你alert一下,你會(huì)發(fā)現(xiàn),這里面的架構(gòu)就是divname=xxx&divname2=xxxx等等,

然后在回頭看看ajax提交的:
復(fù)制代碼 代碼如下:

$.ajax({
type: "POST",
url: "some.php",
data: "name=John&location=Boston",
success: function(msg){
alert( "Data Saved: " + msg );
}
});

有沒有發(fā)現(xiàn),只要我們把我們上面獲取到的,放到data里面就可以了?

完整的代碼,修改后應(yīng)該是
復(fù)制代碼 代碼如下:

$.ajax({

var str_data=$("#dlg_form input").map(function(){
return ($(this).attr("name")+'='+$(this).val());
}).get().join("&") ;
type: "POST",
url: "some.php",
data: str_data,
success: function(msg){
alert( "Data Saved: " + msg );
}
});

ok,就這么簡(jiǎn)單,如果適用的話,可以拿去用喲...

呵呵.

如果有問題,也歡迎提出來.
發(fā)表評(píng)論 共有條評(píng)論
用戶名: 密碼:
驗(yàn)證碼: 匿名發(fā)表
主站蜘蛛池模板: 久久综合色区 | 久久露脸国语精品国产91 | 色中色在线播放 | 法国性经典xxxhd | 精品亚洲一区二区 | 中文字幕一区在线观看视频 | 欧美激情精品久久久久 | 一区二区三级视频 | 国产一区二区三区四区五区在线 | 久久久久久久一区 | 91短视频网址 | 91精品国产综合久久久动漫日韩 | 毛毛片在线看 | 羞羞视频免费网站男男 | 精品一区二区免费视频视频 | 色播一区 | 久久久久亚洲精品国产 | 久久吊 | 国产亚洲精品久久午夜玫瑰园 | 伊人成人免费视频 | omofun 动漫在线观看 | 91久久精品一二三区 | av播放在线 | 久久久久久久久日本理论电影 | 黄色大片在线免费观看 | 成人小视频免费在线观看 | 精品国产高清一区二区三区 | 日韩视频在线观看免费视频 | 青草av.久久免费一区 | 水多视频在线观看 | 国产又粗又爽又深的免费视频 | av在线视| 毛片视频免费观看 | 国产精品久久久久一区二区 | 99亚洲精品 | 久久精品国产99久久久古代 | 国产午夜精品在线 | 特级黄色一级毛片 | 国产午夜电影在线观看 | 男人天堂免费 | 精品二区在线观看 |