Méthode d'implémentation de jQuery sérialisant les données de formulaire en objets JSON

Cet article présente principalement la méthode d'implémentation de jQuery sérialisant les données du formulaire dans des objets JSON. Cet article vous le présente en détail à travers un exemple de code et a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer

La méthode de sérialisation fournie par jquery peut être implémentée.

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

Cependant, en observant les informations de sortie, nous avons constaté que la méthode serialize() consiste à fusionner les données du formulaire en une chaîne au format de requête http.

Serialize peut en effet résoudre les données générales de soumission. Mais parfois, nous avons besoin d'un objet objet au lieu d'une chaîne (par exemple, lors de la définition des paramètres de condition de requête dans jqgrid reload, un objet objet est nécessaire).

La méthode est la suivante :

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

Appel :

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

Ce qui suit est un morceau de code pour voir comment jQuery sérialise le formulaire en un objet 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>

La méthode serializeObject ci-dessus consiste à sérialiser le formulaire en un objet JSON

Résumé

Ci-dessus Ce qui précède est la méthode d'implémentation de jQuery sérialisant les données du formulaire en objets JSON introduite par l'éditeur. J'espère que cela sera utile à tout le monde !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!