Javascriptを使用してGET/POSTリクエストを送信するにはどうすればよいですか? (詳細な例)

この記事では、JavaScript を使用して GET/POST リクエストを送信する方法に関する関連知識を提供します。フォーム送信のみを使用する場合、バックグラウンドで非常に複雑な判断を行う必要があります。JavaScript を使用して送信する方法を見てみましょう。みんなが助けてくれることを願っています。

JQuery ベースの GET/POST データ送信メソッド

JavaScript を初めて使用する場合は、JQuery について完全に混乱する可能性があります。 JQuery は、Prototype に次ぐ優れた JavaScript コード ライブラリ (または JavaScript フレームワーク) であり、高速で簡潔な JavaScript フレームワークとして普及させるのが適切です。 JQuery の設計目的は「書く量を減らし、より多くのことを行う」です。これは、書くコードを減らして、より多くのことを実行することを意味します。

一般的な JavaScript 関数コードをカプセル化し、シンプルな JavaScript 設計パターンを提供し、HTML ドキュメント操作、イベント処理、アニメーション設計、および Ajax インタラクションを最適化します。 JQuery のコア機能は次のように要約できます: 独自のチェーン構文と短く明確な多機能インターフェイスを備えていること、拡張可能な効率的で柔軟な CSS セレクターを備えていること、便利なプラグイン拡張メカニズムを備えていること、および豊富なプラグイン。 jQuery は、IE 6.0、FF 1.5、Safari 2.0、Opera 9.0 などのさまざまな主流ブラウザと互換性があります。

JQuery の公式 Web サイトのアドレスをクリックしてアクセスできます。公式バージョンによると、最新バージョンは v3.2.1 になっているため、より多くの機能を利用するには、公式 Web サイトから最新の JQuery をダウンロードすることを検討することをお勧めします。

JQuery は非常に強力ですが、現在の関数の実装に必要なのは 2 つの単純な API だけです。クリックすると完全な API ドキュメントを表示できます。さらに、runnoob.com には Javascript に関する学習資料もあります。

##$.get(url, データ, コールバック)

パラメータ説明url必須、リクエストする必要がある URL を指定しますdataオプション、リクエストとともにサーバーに送信されるデータを指定します。形式は json です。 #callback$.post(url, data, callback)

オプション、コールバック関数、リクエストが成功したときに実行される関数

パラメータurl#data オプション、リクエストとともにサーバーに送信されるデータを指定します。形式は次のとおりです。 jsoncallbackオプション、コールバック関数、リクエストが成功したときに実行される関数 使用方法は次のようになります。まず、必要に応じて、JQuery を呼び出すページで、script タグを使用して Jquery ファイルをインポートします。例:

	<script src="static/js/jquery-3.2.1.min.js"></script>

説明
必須、リクエストする必要がある URL を指定します。

次に、Web ページの空白スペースで、メソッドと渡す必要があるパラメーター。これを行うことができます:

	<script>
		function doPost(url)
		{
			var val1 = document.getElementsByName("key1").value;
			var val2 = document.getElementsByName("key2").value;

			$.post(url, {'key1':val1, 'key2':val2});
		}
	</script>

次に、input/button タグ、またはデータを送信する必要がある場所に onclick 属性を追加します (例:

	...
	<input type="button" value="submit" onclick="doPost(&#39;/&#39;)" />
	...

#) ## その後、JQuery を使用してデータを送信できます。

もう 1 つの方法は、フォームを作成し、そのフォームを使用して送信することです。

JavaScript/フォームを使用して GET/POST データ送信メソッドを送信します

/*
* @url: url link
* @action: "get", "post"
* @json: {'key1':'value2', 'key2':'value2'} 
*/
function doFormRequest(url, action, json)
{
    var form = document.createElement("form");
    form.action = url;
    form.method = action;

    // append input attribute and valus
    for (var key in json)
    {
        if (json.hasOwnProperty(key))
        {
            var val = json[key];
            input = document.createElement("input");
            input.type = "hidden";
            input.name = key;
            input.value = val;

            // append key-value to form
            form.appendChild(input)
        }
    }

    // send post request
    document.body.appendChild(form);
    form.submit();

    // remove form from document
    document.body.removeChild(form);
}

呼び出しメソッドは非常に簡単です。このコード ブロックを独自の HTML の script タグにコピーします。 document を選択すると、それを直接使用することができ、必要に応じて GET/POST メソッドを選択するだけです。 使用しているうちに徐々に違いを理解する必要があります。

[関連する推奨事項:

JavaScript 学習チュートリアル

]

以上がJavascriptを使用してGET/POSTリクエストを送信するにはどうすればよいですか? (詳細な例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。