如何在 JavaScript 中為跨域請求建立 JSONP 回呼？

在 JavaScript 中建立 JSONP 回呼

跨域請求可能會為 JavaScript 開發帶來挑戰。但是，JSONP（帶填充的 JSON）為此問題提供了解決方案。

為JSONP 修改JSON API

要在JSON API 中啟用JSONP 功能，請依照簡單步驟如下：

1. 在GET 請求中接受「回調」參數：

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

2. 將回呼函數包裹在您的資料中：

   $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 服務

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

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

以上是如何在 JavaScript 中為跨域請求建立 JSONP 回呼？的詳細內容。更多資訊請關注PHP中文網其他相關文章！