js と jQuery での Ajax の使用例の詳細

js と jQuery での Ajax の使用例の詳細

ネイティブJS

GETリクエストの送信方法

  • Ajaxオブジェクトを作成する
    • var xhr = 新しい XMLHttpRequest()
  • リクエストメソッドとリクエストアドレスを設定する[非同期かどうか]
    • xhr.open('get', '/ajax'[, true または false])
  • リクエスト本文を受信する準備をする
    • xhr.onload = 関数 () { console.log(xhr.responseText) }
    • xhr.onreadystatechange = 関数 () { if (xhr.readyState === 4) { console.log( xhr.responseText ) } }
  • リクエストを送信
    • xhr.send(null)
var xhr = 新しい XMLHttpRequest()
xhr.open('get', '/ajax')
xhr.onload = 関数 () {
  コンソールログ(xhr.responseText)
}
xhr.send(null)

投稿リクエストの送信方法

  • Ajaxオブジェクトを作成する
    • var xhr = 新しい XMLHttpRequest()
  • リクエストメソッドとリクエストアドレスを設定する[非同期かどうか]
    • xhr.open('post', '/ajax'[, true または false])
  • リクエスト本文を受信する準備をする
    • xhr.onload = 関数 () { console.log(xhr.responseText) }
    • xhr.onreadystatechange = 関数 () { if (xhr.readyState === 4) { console.log( xhr.responseText ) } }
  • リクエストを送信
    • xhr.send(null)
var xhr = 新しい XMLHttpRequest()
xhr.open('post', '/ajax')
xhr.onload = 関数 () {
  コンソールログ(xhr.responseText)
}
xhr.send(null)

パラメータ付きのGETリクエストを送信する

  • var xhr = 新しいXMLHttpRequest
  • リクエストアドレスの直後に、? で始まるキー = 値の形式でパラメータを連結し、複数のパラメータは & で区切ります。
    • xhr.open('get', '/ajax?name=Jack&age=18')
  • xhr.onload = 関数 () { console.log( xhr.responseText ) }
  • xhr.送信()

パラメータ付きの投稿リクエストを送信する

var xhr = 新しいXMLHttpRequest

リクエストアドレスの後に何も追加する必要はありません

  • xhr.open('post', '/ajax')

xhr.onload = 関数 () { console.log( xhr.responseText ) }

postメソッドによって運ばれるパラメータは、xhr.send()の後の()内に直接書き込まれます。

  • 自分でデータのキー=値を収集する
    • リクエストヘッダーを自分で設定する
    • xhr.setRequestHeadr('コンテンツタイプ'、'アプリケーション/x-www-form-urlencoded')
  • FormDataはデータを収集します
    • 何も必要ありません。FormDataを使用してデータを収集するだけです。
    • var fd = 新しいフォームデータ(DOM)
    • リクエストを送信するときは、fd を渡してください。
var xhr = 新しい XMLHttpRequest()
xhr.open('post', '/ajax')
xhr.onload = 関数 () {
  コンソールログ(xhr.responseText)
}
xhr.setRequestHeadr('コンテンツタイプ'、'アプリケーション/x-www-form-urlencoded')
xhr.send('キー=値&キー=値')
var fd = 新しい FormData(document.querySelector('form'))
var xhr = 新しい XMLHttpRequest()
xhr.open('post', '/ajax')
xhr.onload = 関数 () {
  コンソールログ(xhr.responseText)
}
xhr.send(fd)

jQuery

$.get の複数のパラメータを使用する方法

住所

  • パラメータ key=value または { name: 'Jack' }
  • 成功コールバック関数
  • バックエンドから返される期待されるデータ型
    • テキスト:何もせずに結果を直接表示します
    • json: 必ずJSON.parse()ステップを実行します

$.post のいくつかのパラメータとその使用方法

  • 住所
  • パラメータキー=値または{ name: 'Jack' }、FormData を送信できません
  • 成功コールバック関数
  • バックエンドから返される期待されるデータ型

$.ajax のいくつかのパラメータ、使用方法

  • 設定項目のオプションです
    • url: リクエストアドレス
    • メソッド/タイプ: リクエストメソッド
    • データ: パラメータを運ぶ
    • dataType: バックエンドから返されるデータ型
    • 成功: 成功したコールバック
    • エラー: コールバックに失敗しました
    • contentType: FormDataを送信するときに使用されます
    • processData: FormDataを送信するときに使用されます

JSONP

$.ajax を使用して jaonp リクエストを送信する方法

  • dataType は jsonp である必要があります
  • メソッドは取得する必要があります
  • jsonp: 背景によって決まる
$.ajax({
  URL: '/jsonp',
  データ: {}、
  データ型: 'jsonp',
  jsonp: 'コールバック',
  成功(res){
    コンソール.log(res)
  }
})

要約する

js と jQuery での ajax の使用に関するこの記事はこれで終わりです。js と jQuery での ajax の使用に関する詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • jQuery Ajax を介してローカル JSON ファイルを要求する方法
  • js と jQuery によって送信される ajax リクエストを終了する方法
  • jQuery は、NodeJS への Ajax リクエストを介して JSON データの例を返します。
  • jQuery チュートリアル ajax リクエスト json データの例
  • Ajax リクエストの JSON データの簡単な分析と js による解析 (分析例)
  • jsは5分ごとにAjaxリクエストを実装します
  • JS インターセプション グローバル Ajax リクエスト例の分析
  • Javascript が AJAX リクエストを送信するサンプルコード
  • JS Ajax リクエストの重複送信を防ぐ方法

<<:  CentOs7 64 ビット MySQL 5.6.40 ソースコードのインストール プロセス

>>:  Nginxはドメイン名のアクセス方法を定義しています

推薦する

MySQL でトリガーを無効化および有効化するチュートリアル [推奨]

MYSQL を使用する場合、トリガーがよく使用されますが、不適切な使用によって問題が発生する場合が...

カレンダー効果を実現するための Bootstrap+JQuery

この記事では、カレンダー効果を実現するためのBootstrap+Jqueryの具体的なコードを参考ま...

MySQL 5.7.27 のダウンロード、インストール、設定に関する詳細なチュートリアル

目次1. ダウンロード手順2. 環境変数を設定する3. my.iniファイルを設定する4. MySQ...

React antdはフォームの動的な増減を実現します

以前、動的フォームを記述しているときに落とし穴に遭遇しました。インデックスの添え字をキーとして使用す...

JavaScript の setTimeout と setTimeinterval の使用例の説明

どちらの方法も、一定時間後に JavaScript コードを実行するために使用できますが、それぞれに...

VMware Workstation 15 Pro に Ubuntu 1804 をインストールするチュートリアル (画像とテキスト付き)

このメモはインストール チュートリアルです。実用的な意味はありません。記録のためだけに書いています。...

Access_Tokenの統合管理を実現するミニプログラム開発

目次TOKEN タイマーリフレッシュ2. access_tokenの内部設計2.1 access_t...

HTMLの表のtbodyは上下左右にスライドできます

テーブル ヘッダーが固定されている場合は、それを 2 つのテーブルに分割する必要があります。1 つの...

Robots.txtの詳細な紹介

Robots.txt はプレーンテキスト ファイルであり、Web サイト管理者は、ロボットによるアク...

CSS における位置指定の概要

CSS には 4 種類の配置方法があり、シナリオによって効果が異なります。ここでは、これら 4 種類...

Linux で MySQL をインストールして設定する

システム: Ubuntu 16.04LTS 1\公式サイトからmysql-5.7.18-linux-...

純粋な CSS で実装された 3 つの通知バーのスクロール効果

序文通知バー コンポーネントは、比較的一般的なコンポーネントです。基本的に、すべてのサイトにこのよう...

データ URI スキームを使用して Web ページに画像を埋め込む方法の紹介

データ URI スキームを使用すると、HTML、CSS、Javascript などで使用できるインラ...

Vue における v-model を使用したクロスコンポーネントバインディングの基本的な実装方法

みなさんこんにちは。今日はv-modelを使って親子コンポーネントのバインディング効果を実現する方法...

CSS で 2 つの固定列と 1 つの適応列を実装するいくつかの方法

この記事では、CSS で 2 つの固定列と 1 つのアダプティブ列を実装するいくつかの方法を紹介し、...