양식 데이터를 JSON 객체로 직렬화하는 jQuery 구현 방법

이 글에서는 양식 데이터를 JSON 객체로 직렬화하는 jQuery의 구현 방법을 주로 소개합니다. 이 글에서는 예제 코드를 통해 매우 자세하게 소개하고 있으며, 필요한 친구들이 참고할 수 있습니다#🎜🎜 #

jquery에서 제공하는 serialize 메소드를 구현할 수 있습니다.

$("#searchForm").serialize();

그러나 출력 정보를 관찰해 보면 serialize() 메서드는 양식에 있는 데이터를 http 요청 형식의 문자열로 이어붙이는 것임을 알 수 있습니다.

serialize는 실제로 일반적인 제출 데이터를 해결할 수 있습니다. 그러나 때때로 우리에게 필요한 것은 문자열 대신 객체 객체입니다(예를 들어 jqgrid가 다시 로드될 때 쿼리 조건 매개변수를 설정할 때 객체 객체가 필요합니다).

방법은 다음과 같습니다.

(function(window, $) {
  $.fn.serializeJson = function() {
    var serializeObj = {};
    var array = this.serializeArray();
    var str = this.serialize();
    $(array).each(
        function() {
          if (serializeObj[this.name]) {
            if ($.isArray(serializeObj[this.name])) {
              serializeObj[this.name].push(this.value);
            } else {
              serializeObj[this.name] = [
                  serializeObj[this.name], this.value ];
            }
          } else {
            serializeObj[this.name] = this.value;
          }
        });
    return serializeObj;
  };
})(window, jQuery);

Call:

console.info($("#searchForm").serializeJson());

통해 jQuery 직렬화 형식을 살펴보겠습니다. 코드 조각: JSON 개체

<form id="myform"> 
  <table> 
    <tr> 
      <td>姓名:</td> 
      <td> <input type="text" name="name" /> </td> 
    </tr> 
    <tr> 
      <td>性别:</td> 
      <td> 
        <input type="radio" name="sex" value="1"> 男 
        <input type="radio" name="sex" value="0"> 女 
      </td> 
    </tr> 
    <tr> 
      <td>年龄:</td> 
      <td> 
        <select name="age"> 
          <option value="20">20</option> 
          <option value="21">21</option> 
          <option value="22">22</option> 
        </select> 
      </td> 
    </tr> 
    <tr> 
      <td>爱好</td> 
      <td> 
        <input type="checkbox" value="basketball" name="hobby">篮球 
        <input type="checkbox" value="volleyball" name="hobby">排球 
        <input type="checkbox" value="football" name="hobby">足球 
        <input type="checkbox" value="earth" name="hobby">地球 
      </td> 
    </tr> 
    <tr> 
      <td colspan="2"> 
        <input type="button" id="ajaxBtn" value="提交" /> 
      </td> 
    </tr> 
  </table> 
</form> 
 
<script type="text/javascript"> 
  $(function() { 
    $("#ajaxBtn").click(function() { 
        var params = $("#myform").serializeObject(); //将表单序列化为JSON对象  
        console.info(params); 
      }) 
  }) 
  $.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 || &#39;&#39;); 
      } else { 
        o[this.name] = this.value || &#39;&#39;; 
      } 
    }); 
    return o; 
  } 
</script>

위의 serializeObject 메서드는 양식을 JSON 개체로 직렬화하는 것입니다

Summary #🎜🎜 #
위는 양식 데이터를 JSON 개체로 직렬화하기 위해 편집기에서 jQuery에 도입한 구현 방법입니다. 모두에게 도움이 되기를 바랍니다!

위 내용은 양식 데이터를 JSON 객체로 직렬화하는 jQuery 구현 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!