jQuery および PHP を使用した JSONP はクロスオリジンリクエストの問題をどのように解決できますか?

JSONP を使用したクロスオリジン リクエスト: シンプルな jQuery と PHP の例

この例では、クロスオリジン リクエストに取り組みます。 JSONP を使用したオリジン リクエスト。これは、JavaScript と Web サーバー間の通信をさまざまな場所から可能にする洗練された技術です。

jQuery クライアントから PHP サーバーにクロスオリジン リクエストを送信し、カスタマイズされた応答を取得するとします。これを実現するには、jQuery の $.getJSON メソッドを使用して JSONP リクエストを開始します。

jQuery Script:

$.getJSON('http://example.com/jsonp.php?callback=?', 'firstname=Jeff', function(response) {
  alert('Your name is ' + response.fullname);
});

PHP サーバースクリプト:

<?php
$firstname = $_GET['firstname'];
if ($firstname == 'Jeff') {
  header('Content-Type: application/json');
  echo $_GET['callback'] . '(' . json_encode(['fullname' => 'Jeff Hansen']) . ')';
}
?>

説明:

「?callback=?」を含む URL で $.getJSON を呼び出すと、jQuery は自動的に JSONP を処理します。リクエスト。サーバー側の PHP スクリプトは、jQuery によって提供されるコールバックと一致する関数呼び出しでラップされた JSON オブジェクトで応答します。この場合、コールバックは GET リクエストの最初のパラメータとして渡されます。

HTML レスポンスの処理:

レスポンスで HTML を返したい場合、PHP スクリプト内で JSON オブジェクトの代わりに関数を使用できます:

<?php
$firstname = $_GET['firstname'];
if ($firstname == 'Jeff') {
  header('Content-Type: text/html');
  echo '<h1>Welcome, Jeff Hansen!</h1>';
}
?>

そして、jQuery 側では、応答を次のように処理できます:

$.getJSON('http://example.com/jsonp.php?callback=?', 'firstname=Jeff', function(response) {
  $('#container').html(response);
});

以上がjQuery および PHP を使用した JSONP はクロスオリジンリクエストの問題をどのように解決できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。