Implementation method of jQuery serializing form data into JSON objects-JS Tutorial-php.cn

Implementation method of jQuery serializing form data into JSON objects

青灯夜游

Release： 2018-10-08 16:55:36

forward

2977 people have browsed it

This article mainly introduces the implementation method of jQuery serializing form form data into JSON objects. This article introduces it to you in great detail through example code and has certain reference value. Friends in need can refer to it

The serialize method provided by jquery can be implemented.

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

Copy after login

However, observing the output information, it is found that the serialize() method is to splice the data in the form into a string in the http request format.

serialize can indeed solve general submission data. But sometimes what we need is an object object instead of a string (for example, when setting query condition parameters when jqgrid reloads, an object object is needed).

The method is as follows:

(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);

Copy after login

Call:

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

Copy after login

The following is a piece of code to see how jQuery serializes the form into a JSON object

<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>

Copy after login

The above serializeObject method is to serialize the form into a JSON object

Summary

The above is given by the editor The implementation method of jQuery serializing form data into JSON objects that you introduced, I hope it will be helpful to you!

The above is the detailed content of Implementation method of jQuery serializing form data into JSON objects. For more information, please follow other related articles on the PHP Chinese website!