Jquery經過Ajax方式來提交Form表單

今天恰好看到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,就這麼簡單,若是適用的話,能夠拿去用喲...

 

呵呵.

若是有問題,也歡迎提出來.