jQuery通过AJAX快速批量提交表单数据

当表单数据项很多时，手动获取表单项的值将变得效率低下，结合jQuery提供的函数serialize()，我们可以实现快速获取数据并提交表单数据。
请看下面的表单：

<form id="fm">
  <table>
    <tr>
      <td>姓名</td>
      <td>
        <input type="text" name="name" />
      </td>
    </tr>

    <tr>
      <td>年龄</td>
      <td>
        <input type="text" name="age" />
      </td>
    </tr>

    <tr>
      <td>密码</td>
      <td>
        <input type="password" name="password" />
      </td>
    </tr>

    <tr>
      <td>性别</td>
      <td>
        <input type="radio" name="sex" value="male" />男
        <input type="radio" name="sex" value="female" />女
      </td>
    </tr>

    <tr>
      <td>地区</td>
      <td>
        <select name="area">
          <option value="heping">和平区</option>
          <option value="nankai">南开区</option>
          <option value="xiqing">西青区</option>
          <option value="hexi">河西区</option>
        </select>
      </td>
    </tr>

    <tr>
      <td>爱好</td>
      <td>
        <input type="checkbox" name="hobby[]" value="movie" />电影
        <input type="checkbox" name="hobby[]" value="music" />音乐
        <input type="checkbox" name="hobby[]" value="basketball" />篮球
      </td>
    </tr>

    <tr>
      <td>个人介绍</td>
      <td>
        <textarea name="intro" ></textarea>
      </td>
    </tr>

    <tr>
      <td></td>
      <td>
        <input type="button" value="提交" id="submit" />
      </td>
    </tr>
  </table>
</form>

我们可以通过自定义函数getFormData()来获取表单的数据，请看下面的例子：

$(function(){
  $('#submit').click(function(){
    //选取表单
    var form = $('#fm');
    //获取表单数据
    var data = getFormData(form);
    //发送AJAX请求
    $.post('test.php',data,function(data){
      console.log('ok');
    });
  });
});

getFormData()的实现很简单：

function getFormData(form){
  var data = form.serialize();
  data = decodeURI(data);
  var arr = data.split('&');
  var item,key,value,newData={};
  for(var i=0;i<arr.length;i++){
    item = arr[i].split('=');
    key = item[0];
    value = item[1];
    if(key.indexOf('[]')!=-1){
      key = key.replace('[]','');
      if(!newData[key]){
        newData[key] = [];
      }
      newData[key].push(value);
    }else{
      newData[key] = value;
    }
  }
  return newData;
}

test.php接收到的数据将会是：

Array
(
  [name] => 3241324
  [age] => m_admin
  [password] => 123
  [sex] => male
  [area] => heping
  [hobby] => Array
    (
      [0] => movie
      [1] => music
    )
  [intro] => 321432423
)

和普通的表单提交的数据格式是一样的，我们可以很方便的进行处理！