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 をよろしくお願いいたします。

以下もご興味があるかもしれません: