【JSONP】php和jsonp

最新推荐文章于 2023-11-09 08:00:00 发布

等时钟成长

最新推荐文章于 2023-11-09 08:00:00 发布

阅读量301

点赞数

分类专栏： JavaScript 文章标签：跨域 JSONP

本文链接：https://blog.csdn.net/pangji0417/article/details/95993987

版权

JavaScript 专栏收录该内容

83 篇文章 1 订阅

订阅专栏

JSONP

JSON with padding 是json的一种“使用模式”，可以解决跨域问题。
主要还是利用<scrip></scrip>标签可以不受跨域限制的特性。

1. 客户端(HTML)

写一个index.html文件。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div>
        <span>客户列表</span>
        <div id="customers_list"></div>
    </div>
    <script type="text/javascript">
        function callbackFunction(result, methodName) {
            var html = '<ul>';
            for (let i = 0; i < result.length; i++) {
                html += "<li>" + result[i] + "</li>";
            }
            html += "</ul>";
            document.getElementById("customers_list").innerHTML = html;
        }
    </script>
    <script type="text/javascript" src="http://localhost/myApplication/demo.php?jsoncallback=callbackFunction"></script>
</body>

</html>

2. 服务端(PHP)

写一个php文件，叫demo.php，放在XAMPP的htdocs文件下，启动Apache，就可以访问http://localhost/myApplication/demo.php

<?php
header('Content-type: application/json');
//获取回调函数名
$jsoncallback = htmlspecialchars($_REQUEST ['jsoncallback']);
//json数据
$json_data = '["朱鹏基","杜勇","吉启乾"]';
//输出jsonp格式的数据
echo $jsoncallback . "(" . $json_data . ")";
?>

3. 客户端访问

如果Apache服务运行成功，用浏览器打开index.html，应该可以看到界面。
在这里插入图片描述

4. 动态加载script

主要是将原先写死的script标签改成动态添加标签

<script type="text/javascript"
	src="http://localhost/myApplication/demo.php?jsoncallback=callbackFunction">
</script>
<!-- 改成如下形式 -->
    <script>
        // 动态获取
        function getCustomers() {
            var s = document.createElement("script");
            s.type = "text/javascript";
            s.src = "http://localhost/myApplication/demo.php?jsoncallback=callbackFunction";
            document.body.appendChild(s);
        }
    </script>