JSONP结合jQuery和PHP如何解决跨源请求问题？-php教程-PHP中文网

JSONP结合jQuery和PHP如何解决跨源请求问题？

Barbara Streisand

发布： 2024-12-08 07:13:14

原创

659 人浏览过

How Can JSONP with jQuery and PHP Solve Cross-Origin Request Issues?

使用 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!</h1>';
}
?>

登录后复制

并且在 jQuery 方面，您可以处理响应如下：

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

登录后复制

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