如何在 JavaScript 中为跨域请求创建 JSONP 回调？-php教程-PHP中文网

如何在 JavaScript 中为跨域请求创建 JSONP 回调？

Susan Sarandon

发布： 2024-10-22 20:54:00

原创

786 人浏览过

How to Create JSONP Callbacks in JavaScript for Cross-Domain Requests?

在 JavaScript 中创建 JSONP 回调

跨域请求可能会给 JavaScript 开发带来挑战。但是，JSONP（带填充的 JSON）为此问题提供了解决方案。

为 JSONP 修改 JSON API

要在 JSON API 中启用 JSONP 功能，请按照简单步骤如下：

在 GET 请求中接受“回调”参数：
```
if(array_key_exists('callback', $_GET)){
```
登录后复制
将回调函数包裹在您的数据中：
```
$callback.'('.$data.');';
```
登录后复制

以 PHP 为例，下面的代码演示了以下步骤：

<code class="php"><?php

$data = '{}'; // json string

if(array_key_exists('callback', $_GET)){

    header('Content-Type: text/javascript; charset=utf8');
    header('Access-Control-Allow-Origin: http://www.example.com/');
    header('Access-Control-Max-Age: 3628800');
    header('Access-Control-Allow-Methods: GET, POST, PUT, DELETE');

    $callback = $_GET['callback'];
    echo $callback.'('.$data.');';

}else{
    // normal JSON string
    header('Content-Type: application/json; charset=utf8');

    echo $data;
}
?></code>

登录后复制

使用 JSONP 服务

要使用 JSONP 服务，您可以使用 HTML 脚本标签：

<code class="html"><script>
    function receiver(data){
        console.log(data);
    }
</script>

<script src="data-service.php?callback=receiver"></script></code>

登录后复制

以上是如何在 JavaScript 中为跨域请求创建 JSONP 回调？的详细内容。更多信息请关注PHP中文网其他相关文章！