今天剛好看到Jquery的ajax提交資料到伺服器的方法,原文是:
儲存資料到伺服器，成功時顯示資訊。
jQuery 代碼:
$.ajax({ type: "POST", url: "some.php", data: "name=John&location=Boston", success: function(msg){ alert( "Data Saved: " + msg ); }});
後來我就想了一下,我要提交form表單有沒有辦法呢?但是我不可能每個fom的input都寫一次var demo=$("#divname").val();的.後來,今天我看到一個方法,就是.map,就做出一下想法了,可以借鑒喲;html代碼如下,下面我要提交Form 的id為dlg_form的所有input資料,<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"/>
空調控制器</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> 總表電能節點:</label>
<input name="zbdnjd" id="zbdnjd" disabled="disabled" class="easyui-combobox" style="padding: 2px; width: 141px; " required />
</div>
</form>是不是很多,如果要你每個input都寫的話,是不是要吐血?看看我的方法,首先我們把所有的input的name和value都取下來,js代碼如下:var str_data=$("#dlg_form input").map(function(){
return ($(this).attr("name")+'='+$(this).val());
}).get().join("&") ;
alert(data);
ps:你alert一下,你會發現,這裡面的架構就是divname=xxx&divname2=xxxx等等,
然後在回頭看看ajax提交的:
$.ajax({ type: "POST", url: "some.php", data: "name=John&location=Boston", success: function(msg){ alert( "Data Saved: " + msg ); }});
有沒有發現,只要我們把我們上面擷取到的,放到data裡面就可以了?
完整的代碼,修改後應該是
$.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,就這麼簡單,如果適用的話,可以拿去用喲...
呵呵.
如果有問題,也歡迎提出來.
