ネイティブ js を使用してフォームのシリアル化を実装する (グラフィック チュートリアル)

以下は、私がコンパイルしたフォームシリアル化のネイティブ JS 実装です。興味のある学生はご覧ください。

まず、jqueryで対応するフォームシリアル化メソッドを導入します:

1.serialize()メソッド

形式: var data = $("form").serialize();

関数: フォームを変換します 内容は次のとおりです文字列にシリアル化されます。

こうすれば、ajax経由でフォームデータを送信するときに、すべてのパラメータを1つずつリストする必要がなくなります。 data パラメータを $("form").serialize() に設定するだけです。

2.serializeArray() メソッド

形式: var jsonData = $("form").serializeArray();

機能: ページ フォームを JSON 構造化オブジェクトにシリアル化します。これは JSON 文字列ではないことに注意してください。

例えば、 [{"name":"lihui", "age":"20"},{...}] は jsonData[0].name としてデータを取得します

今度はオリジナルの js を使用して実装します。フォームのシリアル化のための関数

まず手順をリストします:

1) まず ById またはフォームを使用してフォームを取得します。

2) 取得後、要素を通じてフォーム内のすべての要素の配列を取得します。

3) 次に、シリアル化されたオブジェクトを実装するためのタイプ (タイプに応じた対応するオブジェクトの結合) を決定します。コードは次のとおりです。 :

function formser(form){
  var form=document.getElementById(form);
  var arr={};
 for (var i = 0; i < form.elements.length; i++) {
  var feled=form.elements[i];
  switch(feled.type) {
 case undefined:
 case &#39;button&#39;:
  case &#39;file&#39;:
  case &#39;reset&#39;:
  case &#39;submit&#39;:
  break;
  case &#39;checkbox&#39;:
  case &#39;radio&#39;:
  if (!feled.checked) {
  break;
  }
  default:
  if (arr[feled.name]) {
  arr[feled.name]=arr[feled.name]+&#39;,&#39;+feled.value;
  }else{
  arr[feled.name]=feled.value;
  }
  }
  }
  return arr
}

上記は、フォームのシリアル化を実装するためにコンパイルしたネイティブ js です。将来役立つことを願っています。

関連記事:

JSでスライディングパズルの検証コードを実装する方法

vue

jsSource Node.におけるv-ifとv-showの使い方の詳細説明登録メールの有効化手順の詳細な説明

以上がネイティブ js を使用してフォームのシリアル化を実装する (グラフィック チュートリアル)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。