【JS】JSON跨域请求 - PHP前端

首页 > 博客列表 > 【JS】JSON跨域请求

博主信息

博文 94

粉丝 0

访问量 89416

专题推荐

更多>

JSON跨域请求

同源“案例”策略
仅限“协议、域名、端口”三者都相同，才可以相互访问
否则跨域错误 : CORS
原则：利用 script.src 可以跨域发起请求

1.跨域请求：PHP函数回调（带参）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>跨域请求：PHP函数回调（带参）</title>
</head>
<body>
    <script>
        //data:跨域数据
        //1.函数声明：当前脚本
        function hello(data){
            // console.log(data.name)
            const str =`
            <ul>
                <li>序号：${data.id}</li>
                <li>姓名：${data.name}</li>
                <li>邮箱：${data.email}</li>
            </ul>
            `
            document.body.insertAdjacentHTML('afterbegin',str)
        }
    </script>
    <!-- 2. 调用函数语句，在跨域脚本中-->
    <!-- <script src="http://jsonp.io/demo.js"></script> -->
    <script>
        function getJSON(url){
            const script = document.createElement('script');
            script.src = url;
            document.body.append(script);
        }
        getJSON('http://jsonp.io/demo1.php?callback=hello&id=1');
    </script>
</body>
</html>

PHP示范：

<?php
$users = [
    ['id' => 1, 'name' => '老六', 'email' => 'nx99@qq.com'],
    ['id' => 2, 'name' => '老七', 'email' => 'nx88@qq.com'],
    ['id' => 3, 'name' => '老八', 'email' => 'nx77@qq.com'],
];
$id = $_GET['id'];
$callback = $_GET['callback'];
$user = array_filter($users, function ($item) use ($id) {
    return $item['id'] == $id;
});
$data = json_encode(array_pop($user));
//通知返回字符串的形式，将回调函数写回去，在原页面调用数据，规避了跨域调用数据
echo "$callback($data)";

2.跨域请求：PHP跨域回调（带参）

HTML代码示范：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>跨域请求：PHP跨域回调（带参）</title>
  </head>
  <body>
    <script>
      //data:跨域数据
      //1.函数声明：当前脚本
      function say(data) {
        // console.log(data.name)
        const str = `
            <ul>
                <li>序号：${data.id}</li>
                <li>姓名：${data.name}</li>
                <li>邮箱：${data.email}</li>
            </ul>
            `;
        document.body.insertAdjacentHTML('afterbegin', str);
      }
    </script>
    <!-- 2. 调用函数语句，在跨域脚本中-->
    <!-- <script src="http://jsonp.io/demo.js"></script> -->
    <script>
      function getJSON(url) {
        //ajax
        fetch(url)
          .then(res => res.json())
          .then(json => say(json));
      }
      getJSON('http://jsonp.io/demo2.php?callback=say&id=1');
    </script>
  </body>
</html>

PHP代码示范

<?php
header("Access-Control-Allow-Origin: *");
$users = [
    ['id' => 1, 'name' => '老六', 'email' => 'nx99@qq.com'],
    ['id' => 2, 'name' => '老七', 'email' => 'nx88@qq.com'],
    ['id' => 3, 'name' => '老八', 'email' => 'nx77@qq.com'],
];
$id = $_GET['id'];
$callback = $_GET['callback'];
$user = array_filter($users, function ($item) use ($id) {
    return $item['id'] == $id;
});
// $data = json_encode(array_pop($user));
echo json_encode(array_pop($user));
// echo "callback($data)";

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

【HTML】文档结构与元素，标签，属性的类型

2022-11-27 20:51:59

首页

PHP培训

视频教程

学习路径

资源下载

技术文章

社区

微信公众号

JSON跨域请求

1.跨域请求：PHP函数回调（带参）

2.跨域请求：PHP跨域回调（带参）