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

来源：互联网发布：国外免费linux服务器编辑：程序博客网时间：2024/05/01 04:25

当表单数据项很多时，手动获取表单项的值将变得效率低下，结合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)

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

zhuanzai :http://blog.csdn.net/nextstand/article/details/50395127

0 0