JSONP結合jQuery和PHP如何解決跨來源請求問題？

使用JSONP 的跨來源請求：一個簡單的jQuery 和PHP 範例

在這個範例中，我們將解決跨來源請求的挑戰使用JSONP 的原始請求，這是一種優雅的技術，允許JavaScript 和來自不同來源的Web 伺服器之間進行通訊域。

假設您想要從 jQuery 用戶端向 PHP 伺服器發送跨來源請求並擷取自訂回應。為此，我們將使用 jQuery 的 $.getJSON 方法來啟動 JSONP 請求。

jQuery 腳本：

$.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 腳本使用封裝在函數呼叫中的 JSON 物件進行回應，該函數呼叫與 jQuery 提供的回調相符。在這種情況下，回呼將作為 GET 請求中的第一個參數傳遞。

處理HTML 回應：

如果您想在回應中傳回HTML ，您可以在PHP 腳本中使用函數而不是JSON 物件：

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

並且在jQuery 方面，您可以處理回應如下：

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

以上是JSONP結合jQuery和PHP如何解決跨來源請求問題？的詳細內容。更多資訊請關注PHP中文網其他相關文章！