jqueryクロスドメイン取得リクエストデータ-フロントエンドQ&A-php.cn

jqueryクロスドメイン取得リクエストデータ

PHPz

リリース： 2023-05-18 16:32:10

オリジナル

1376 人が閲覧しました

Web 開発では、通常、特定のビジネス要件を完了するために、別のドメイン名からデータをリクエストする必要がありますが、この場合、クロスドメインリクエストが必要になります。このプロセスでは、jQuery フレームワークの get リクエストが非常に一般的な方法です。この記事ではjQueryのgetメソッドを使ってクロスドメインリクエストを行ってデータを取得する方法を紹介します。

1. クロスドメインリクエストとは

同じブラウザ内で、リクエストされたリソースのドメイン名、ポート、またはプロトコルが現在のドキュメントと異なる場合、それはクロスと呼ばれます。 -ドメインリクエスト。これは、ブラウザの同一オリジンポリシーの制限によるものです。つまり、2 つの URL のプロトコル、ホスト名、ポート番号が同じ場合にのみ、同じオリジンからのデータを送信できます。クロスドメインリクエストを行うと、ブラウザはセキュリティメカニズムを自動的にトリガーして、現在のドメイン名から他のドメイン名へのリクエストを制限します。

2. jQuery の get メソッド

jQuery は、JavaScript に基づいたクロスブラウザーの JavaScript ライブラリです。これは、動的ページ、スタンドアロン JavaScript アプリケーション、および非同期リクエストの開発に広く使用されています。 jQuery では、get メソッドは ajax モジュールに属し、HTTP GET リクエストを通じてサーバーからデータを取得するために使用されます。

クロスドメインリクエストを実装する場合、jQuery の get メソッドを使用してリクエストを送信し、応答データを受信する必要があります。このメソッドは、次の 3 つのパラメータを渡す必要があります:

url: 要求されたリソースの URL アドレス;
data: サーバーに送信されるデータ;
success: リクエストが成功した後続のコールバック関数;

このうち、success コールバック関数は必須であり、リクエストが成功した後に返されるデータを処理するために使用されます。

3. クロスドメインリクエストの例

ここでは、JSON 形式でデータセットを提供する API インターフェイスがあると仮定し、このデータセットを別のドメインからリクエストする必要があります。名前。以下は、単純な JSON データ形式です:

{
    "name": "Apple",
    "color": "Red, Yellow, Green",
    "shape": "Round"
}

ログイン後にコピー

jQuery の get メソッドを使用して、この JSON 形式のデータを取得しましょう:

$.get("https://api.example.com/fruits/apple", function(data) {
    console.log(data);
});

ログイン後にコピー

ここでは、要求された URL を最初のパラメーターとして使用します。 get メソッドに渡されます。方法。このメソッドを通じて、API インターフェイスに Get リクエストを送信し、リクエストが成功した後にインターフェイスから返される JSON データを取得します。この JSON データはコールバック関数の data パラメーターに渡され、この関数でデータを処理できます。

ただし、実際に使用すると、エラーメッセージが表示されてリクエストが失敗する場合があります。この場合、jQuery の failed メソッドを使用してエラーメッセージを取得できます。

$.get("https://api.example.com/fruits/apple", function(data) {
    console.log(data);
}).fail(function() {
    console.log("请求失败");
});

ログイン後にコピー

この例では、fail メソッドを使用してリクエストのエラー情報を取得します。リクエストが失敗した場合、コンソールには「リクエストが失敗しました」というエラーメッセージが出力されます。このようにして、エラーメッセージを適切に処理できます。

4. クロスドメインリクエストの前提条件

クロスドメインリクエストでは、サーバーは他のドメイン名からのリクエストを許可するようにいくつかの設定を行う必要があります。そうしないと、ブラウザがリクエストをブロックして表示されます。エラーメッセージが表示されます。この問題を解決するには、サーバー側に CORS (Cross-Origin Resource Sharing) ヘッダー情報を追加して、他のドメイン名からのリクエストを許可します。

API インターフェイスでは、HTTP 応答ヘッダーに「Access-Control-Allow-Origin」を追加して、許可されたリクエストの送信元を指定できます。たとえば、PHP では、次のコードを追加できます。

header("Access-Control-Allow-Origin: *");

ログイン後にコピー

この例では、アスタリスク記号は、任意のドメイン名からのリクエストが許可されることを意味します。特定のドメイン名のみにデータのリクエストを許可する場合は、アスタリスクをターゲットドメイン名に置き換えることができます。たとえば、example.com のみにデータのリクエストを許可する場合は、次のように設定できます。

header("Access-Control-Allow-Origin: https://example.com");

ログイン後にコピー

もちろん、Node.js を使用している場合は、Express や Koa などのフレームワークを使用して設定できます。 CORS ヘッダー情報。以下は、簡単な Express サンプルコードです。

const express = require('express');
const app = express();

// 添加CORS头信息
app.use((req, res, next) => {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    next();
});

// 返回JSON数据
app.get('/fruits/apple', (req, res) => {
    res.json({"name": "Apple", "color": "Red, Yellow, Green", "shape": "Round"});
});

// 监听端口
app.listen(3000, () => console.log('Example app listening on port 3000!'));

ログイン後にコピー

この例では、Express フレームワークを使用して HTTP サービスを作成し、CORS ヘッダー情報をミドルウェアに追加します。 get リクエストでは、一連のデータを JSON 形式でクライアントに返します。すべてが正常に動作すれば、クライアントはデータを正常に取得できるはずです。

5. 概要

この記事の導入部を通じて、クロスドメインリクエストとは何か、jQuery の get メソッドを使用してクロスドメインリクエストを実行する方法、および必要な設定をいくつか紹介しました。サーバー上で。クロスドメインリクエストは Web 開発における一般的な問題ですが、jQuery フレームワークを使用すると、この問題を簡単に解決し、非常に効率的な方法でデータを取得できます。

以上がjqueryクロスドメイン取得リクエストデータの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。