JSONP如何解決跨來源請求問題？

使用JSONP 的跨域請求：一個實際範例

當遇到跨域策略限制時，JSONP（帶有Padding 的JSON）提供了便捷的解決方案。然而，最初掌握細節可能會令人困惑。讓我們用一個簡單的 jQuery、PHP 和 JSONP 範例來揭開這個過程的神秘面紗。

為跨來源請求實作 JSONP

考慮下列錯誤的程式碼片段：

// jQuery
$.post('http://MySite.com/MyHandler.php', {
  firstname: 'Jeff'
}, function(res) {
  alert('Your name is ' + res);
});

// PHP
<?php
$fname = $_POST['firstname'];
if ($fname == 'Jeff') {
  echo 'Jeff Hansen';
}
?>

為了啟用跨域請求，我們將利用 JSONP。操作方法如下：

jQuery:

$.getJSON('http://www.write-about-property.com/jsonp.php?callback=?', {
  firstname: 'Jeff'
}, function(res) {
  alert('Your name is ' + res.fullname);
});

PHP:

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

PHP:

PHP
• :
PHP
• :

:

金鑰要點：

<?php
if ($fname == 'Jeff') {
  header("Content-Type: application/json");
  echo $_GET['callback'] . '({
    'name': 'Jeff Hansen',
    'html': '<span>This is some HTML</span>'
  })';
}
?>

?callback=?：此參數指示伺服器將回呼函數名稱附加到JSON 回應中。 res.fullname：在 JavaScript 中，我們使用點表示法來存取屬性值。但是，在這種情況下，我們需要預先將回應視為 JSON 物件。 在 JSONP 回應中返回 HTML是的，您可以在 JSONP 回應中儲存 HTML。修改 PHP 程式碼如下：在 JavaScript 中，您可以使用 res.html 存取 HTML。

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