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(&#39;=&#39;);
 key = item[0];
 value = item[1];
 if(key.indexOf(&#39;[]&#39;)!=-1){
  key = key.replace(&#39;[]&#39;,&#39;&#39;);
  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
)

데이터 형식은 일반 데이터 형식과 동일합니다. 양식을 제출하시면 매우 편리하게 처리해 드립니다!