Home > Web Front-end > JS Tutorial > body text

Implementation method of jQuery serializing form data into JSON objects

青灯夜游
Release: 2018-10-08 16:55:36
forward
2984 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!

Related labels:
source:jb51.net
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template