ホームページ >ウェブフロントエンド >フロントエンドQ&A >jQueryフォームの送信方法にはどのようなものがありますか?

jQueryフォームの送信方法にはどのようなものがありますか?

WBOY
WBOYオリジナル
2022-06-02 15:57:276865ブラウズ

フォーム送信には 4 つのメソッドがあります: 1. "jquery.form" プラグインの使用が必要な "$.ajaxSubmit" メソッド; 2. データを送信する "$.getJSON" メソッドGET モード; 3. 比較的大きなデータを受信する「$.post」メソッド; 4. 一般に非同期メソッドをカプセル化する「$.ajax」メソッド。

jQueryフォームの送信方法にはどのようなものがありますか?

このチュートリアルの動作環境: Windows10 システム、jquery3.2.1 バージョン、Dell G3 コンピューター。

jQuery フォーム送信のメソッドとは何ですか?

jQuery でフォームを送信するにはさまざまな方法があります。ここでは、一般的に使用される 4 つの方法、つまり ajaxSubmit() と getJSON について説明します。() 、post()、ajax()。

1. $.ajaxSubmit メソッド

ajaxSubmit() を使用してフォームを送信するには、まず サードパーティ プラグイン jquery を使用して実装する必要があります。形状###。 通常の状況では、フォームを使用して直接送信すると、送信後の現在のページは、フォーム内のアクションによって指定されたページにジャンプします。フォームの送信後にページをジャンプしたくない場合は、 ajaxSubmit() メソッドを使用して送信できます。
次に、ajaxSubmit() で送信する記述方法を見てみましょう:

Html:


         
**jQuery: **1. 本来の記述方法 (this記述方法はフォーム内で使用する必要はありません(中にパスを記入してください)


jQueryフォームの送信方法にはどのようなものがありますか? 2. 簡単な記述方法

jQueryフォームの送信方法にはどのようなものがありますか?

2. $ JSON と比較した .getJSON メソッド

従来の GET および POST による裸のデータの直接送信と比較して、JSON は構造的に合理的で安全です。 getJSON() 関数は、JSON 関数を設定する ajax() 関数の簡易版であり、get() や post() と比較して、データの受け渡しに一定の利点があり、いつでも使用できます。


注: $.getJSON は GET モードでデータを送信するため、過剰な量のデータを送信することはできません。送信には $.post を選択できます。 記述方法:
Html:


         

jQuery:
jQueryフォームの送信方法にはどのようなものがありますか?##3. $ .post メソッド
#post() 関数と getJSON() 関数の記述に違いはありませんが、post の特別な機能は、データ形式 (type) を宣言することです。Type は要求されたデータです。 type ( json. 、 html およびその他の型) パラメーターを json に設定すると、返される形式は json 形式になります。設定されていない場合、返される形式は文字列になります。 上で述べたように、post() 関数は比較的大量のデータを受信するために使用できます。これは他のメソッドに比べて利点です。通常、多くの場合、フォームを送信するために post() メソッドを使用することを選択します。 。

記述方法を見てみましょう:


Html:
($.getJSON によって送信された HTML と同じ)
jQuery:

//提交按钮的点击事件
function btnSubmit(id) {
     //获取页面数据
     var id = $("#myForm [name='id']").val();
     //提交表单
     $.post("url", //请求路径
          {
              id: id  //参数
           },
           function (¬data) {
               if (data.State) {
                    alert(data.Text);
                } else {
                    alert(data.Text);
                }
           }, "json");
}
4. $.ajax メソッド

$ .ajax は、一般的に使用される 通常のカプセル化非同期

メソッドです。

Html: ($.getJSON によって送信された HTML と同じ)
jQuery:

注 :一般に、単純な場合には、$.ajax をパラメーターなしで直接使用できます。 jQueryフォームの送信方法にはどのようなものがありますか?
ビデオ チュートリアルの推奨: jQuery ビデオ チュートリアル

以上がjQueryフォームの送信方法にはどのようなものがありますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。