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はドメイン名のアクセス方法を定義しています

推薦する

繰り返し送信、繰り返し更新、バックオフ防止に関する問題と解決策の分析

1つ。序文<br />この種の質問は、どの専門掲示板でも見かけます。Google で検索...

CSS でテキストカラーグラデーションを実装する 3 つの方法

Web フロントエンド開発のプロセスでは、UI デザイナーはグラデーション テキストを使用したデザイ...

ウェブページのドロップダウンリストとdivレイヤーのカバーの問題を選択する

HTML の select 要素に関する質問は、さまざまな場所で提起されています。最近のプロジェクト...

Tomcat の一般的な例外と解決コードの例

弊社のプロジェクトは Java で開発され、ミドルウェアは Tomcat でした。運用中に、Tomc...

CSS はモバイル互換性の問題を解決するために 0.5px の線を実装します (推奨)

【コンテンツ】: 1.背景画像のグラデーションスタイルを使用する2. スケールを使ってズームできる...

Vueでaxiosをカプセル化するいくつかの方法

目次ベーシックエディションステップ1: Axiosを構成するステップ2: リクエストをカプセル化する...

Mysql マルチテーブル結合クエリの実行の詳細について簡単に説明します。

まず、このブログのケースデモンストレーション テーブルを作成します。 create table a(...

訪問者にあなたのウェブサイトを覚えてもらうための3つの便利なコード

訪問者があなたのウェブサイトを覚えておくのに役立つ3つの便利なコード。お気に入りに追加するためのヒン...

Linuxで相対パスを表現する方法

たとえば、現在のパスが /var/log で、/usr ディレクトリに移動する場合は、次のコマンドを...

キープアライブキャッシュをクリアする方法の詳細なグラフィック説明

目次オープニングシーンv-for を使用した直接レンダリングカスタムコンポーネントで直接レンダリング...

Docker データ管理 (データ ボリュームとデータ ボリューム コンテナー) の詳細な説明

実稼働環境で Docker を使用する場合、多くの場合、データを複数のコンテナ間で永続化または共有す...

クールなネオンライト効果を実現する純粋な CSS (デモ付き)

私は最近、YouTube の CSS アニメーション効果チュートリアル シリーズをフォローしています...

複数のフィールドをグループ化するMySQLグループ

日常の開発タスクでは、データ テーブル内のグループ化フィールドに基づいて統計データを取得するために、...

Nginx/Httpd リバース プロキシ Tomcat 設定チュートリアル

以前のブログでは、Tomcatのサーバーの各コンポーネントの使用について学びました。 Tomcatは...

srcまたはcss背景画像のurl値はbase64でエンコードされたコードです

ウェブ上の一部の画像の src または CSS 背景画像 URL の後に、data:image/pn...