Beispiel zur Erläuterung der jQuery-Implementierung des Formulars in JSON-js-Tutorial-php.cn

Heim

Web-Frontend

js-Tutorial

Beispiel zur Erläuterung der jQuery-Implementierung des Formulars in JSON

Dec 27, 2017 am 09:06 AM

form javascript jquery

In diesem Artikel werden hauptsächlich die von jQuery implementierten Formular-zu-JSON-Funktionen anhand eines vollständigen Beispiels analysiert Ich hoffe, es kann allen helfen.

Das Beispiel in diesem Artikel beschreibt die von jQuery implementierte Form-to-JSON-Funktion. Teilen Sie es wie folgt als Referenz mit allen:

&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot;
&quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;
&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;
&lt;head&gt;
&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt;
&lt;script type=&quot;application/javascript&quot; src=&quot;js/jquery-2.0.3.js&quot;&gt;&lt;/script&gt;
&lt;title&gt;无标题文档&lt;/title&gt;
&lt;script type=&quot;application/javascript&quot;&gt;
$.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;
};
function onClik(){
    //var data = $(&quot;#form1&quot;).serializeArray(); //自动将form表单封装成json
    //alert(JSON.stringify(data));
    var jsonuserinfo = $(&#39;#form1&#39;).serializeObject();
    alert(JSON.stringify(jsonuserinfo));
}
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;form id=&quot;form1&quot; name=&quot;form1&quot; method=&quot;post&quot; action=&quot;&quot;&gt;
 &lt;p&gt;进货人 :
  &lt;label for=&quot;name&quot;&gt;&lt;/label&gt;
  &lt;input type=&quot;text&quot; name=&quot;name&quot; id=&quot;name&quot; /&gt;
 &lt;/p&gt;
 &lt;p&gt;性别:
  &lt;label for=&quot;sex&quot;&gt;&lt;/label&gt;
  &lt;select name=&quot;sex&quot; size=&quot;1&quot; id=&quot;sex&quot;&gt;
   &lt;option value=&quot;1&quot;&gt;男&lt;/option&gt;
   &lt;option value=&quot;2&quot;&gt;女&lt;/option&gt;
  &lt;/select&gt;
 &lt;/p&gt;
 &lt;table width=&quot;708&quot; border=&quot;1&quot;&gt;
  &lt;tr&gt;
   &lt;td width=&quot;185&quot;&gt;商品名&lt;/td&gt;
   &lt;td width=&quot;205&quot;&gt;商品数量&lt;/td&gt;
   &lt;td width=&quot;296&quot;&gt;商品价格&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
   &lt;td&gt;&lt;label for=&quot;pro_name&quot;&gt;&lt;/label&gt;
    &lt;input type=&quot;text&quot; name=&quot;pro_name&quot; id=&quot;pro_name&quot; /&gt;&lt;/td&gt;
   &lt;td&gt;&lt;label for=&quot;pro_num&quot;&gt;&lt;/label&gt;
    &lt;input type=&quot;text&quot; name=&quot;pro_num&quot; id=&quot;pro_num&quot; /&gt;&lt;/td&gt;
   &lt;td&gt;&lt;label for=&quot;pro_price&quot;&gt;&lt;/label&gt;
    &lt;input type=&quot;text&quot; name=&quot;pro_price&quot; id=&quot;pro_price&quot; /&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
   &lt;td&gt;&lt;input type=&quot;text&quot; name=&quot;pro_name2&quot; id=&quot;pro_name2&quot; /&gt;&lt;/td&gt;
   &lt;td&gt;&lt;input type=&quot;text&quot; name=&quot;pro_num2&quot; id=&quot;pro_num2&quot; /&gt;&lt;/td&gt;
   &lt;td&gt;&lt;input type=&quot;text&quot; name=&quot;pro_price2&quot; id=&quot;pro_price2&quot; /&gt;&lt;/td&gt;
  &lt;/tr&gt;
 &lt;/table&gt;
 &lt;p&gt; &lt;/p&gt;
 &lt;input type=&quot;button&quot; name=&quot;submit&quot; onclick=&quot;onClik();&quot; value=&quot;提交&quot;/&gt;
&lt;/form&gt;
&lt;/body&gt;
&lt;/html&gt;

Nach dem Login kopieren

Demonstration des Codeeffekts:

Verwandte Empfehlungen :

Hinweise zum Konvertieren von Zeichenfolgen in JSON

JS-Methode zum Konvertieren von Zeichenfolgen im JSON-Format in ein Objekt oder Array (Vorder- und Rückseite)

Konvertieren Sie das PHP-Array in JSON, um einen chinesischen Code anzuzeigen, bitte erklären Sie es

Das obige ist der detaillierte Inhalt vonBeispiel zur Erläuterung der jQuery-Implementierung des Formulars in JSON. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn