jQuery 가 실현 한 form 전 json 고전 예제

4458 단어 jQueryformjson
본 고의 실례 는 jQuery 가 실현 한 form 전 json 기능 을 다 루 었 다.여러분 께 참고 하도록 공유 하 겠 습 니 다.구체 적 으로 는 다음 과 같 습 니 다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="application/javascript" src="js/jquery-2.0.3.js"></script>
<title>     </title>
<script type="application/javascript">
$.fn.serializeObject = function()
{
  var o = {};
  var a = this.serializeArray();
  $.each(a, function() {
    if (o[this.name]) {
      if (!o[this.name].push) {
        o[this.name] = [o[this.name]];
      }
      o[this.name].push(this.value || '');
    } else {
      o[this.name] = this.value || '';
    }
  });
  return o;
};
function onClik(){
    //var data = $("#form1").serializeArray(); //   form     json
    //alert(JSON.stringify(data));
    var jsonuserinfo = $('#form1').serializeObject();
    alert(JSON.stringify(jsonuserinfo));
}
</script>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
 <p>    :
  <label for="name"></label>
  <input type="text" name="name" id="name" />
 </p>
 <p>  :
  <label for="sex"></label>
  <select name="sex" size="1" id="sex">
   <option value="1"> </option>
   <option value="2"> </option>
  </select>
 </p>
 <table width="708" border="1">
  <tr>
   <td width="185">   </td>
   <td width="205">    </td>
   <td width="296">    </td>
  </tr>
  <tr>
   <td><label for="pro_name"></label>
    <input type="text" name="pro_name" id="pro_name" /></td>
   <td><label for="pro_num"></label>
    <input type="text" name="pro_num" id="pro_num" /></td>
   <td><label for="pro_price"></label>
    <input type="text" name="pro_price" id="pro_price" /></td>
  </tr>
  <tr>
   <td><input type="text" name="pro_name2" id="pro_name2" /></td>
   <td><input type="text" name="pro_num2" id="pro_num2" /></td>
   <td><input type="text" name="pro_price2" id="pro_price2" /></td>
  </tr>
 </table>
 <p> </p>
 <input type="button" name="submit" onclick="onClik();" value="  "/>
</form>
</body>
</html>
코드 효과 데모:

PS:json 작업 에 대해 서 는 비교적 실 용적 인 json 온라인 도 구 를 추천 합 니 다.참고 하 시기 바 랍 니 다.
온라인 JSON 코드 검사,검사,미화,포맷 도구:
http://tools.jb51.net/code/json
JSON 온라인 포맷 도구:
http://tools.jb51.net/code/jsonformat
온라인 XML/JSON 상호 변환 도구:
http://tools.jb51.net/code/xmljson
json 코드 온라인 포맷/미화/압축/편집/변환 도구:
http://tools.jb51.net/code/jsoncodeformat
온라인 json 압축/전의 도구:
http://tools.jb51.net/code/json_yasuo_trans
jQuery 관련 내용 에 관심 이 있 는 독자 들 은 본 사이트 의 주 제 를 볼 수 있다.
본 고 에서 말 한 것 이 여러분 의 jQuery 프로 그래 밍 에 도움 이 되 기 를 바 랍 니 다.

좋은 웹페이지 즐겨찾기