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'" . '})';
}
?>

密钥要点：

• ?callback=?：该参数指示服务器将回调函数名称附加到 JSON 响应中。
• res.fullname：在 JavaScript 中，我们使用点表示法访问属性值。但是，在这种情况下，我们需要预先将响应视为 JSON 对象。

在 JSONP 响应中返回 HTML

是的，您可以在 JSONP 响应中存储 HTML。修改 PHP 代码如下：

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

在 JavaScript 中，您可以使用 res.html 访问 HTML。

以上是JSONP如何解决跨源请求问题？的详细内容。更多信息请关注PHP中文网其他相关文章！