Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 【JS】JSON跨域请求
Blogger Information
Blog 94
fans 0
comment 0
visits 92684
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
【JS】JSON跨域请求
可乐随笔
Original
411 people have browsed it

JSON跨域请求

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

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>跨域请求：PHP函数回调（带参）</title>
  8. </head>
  9. <body>
  11.     <script>
  12.         //data:跨域数据
  14.         //1.函数声明：当前脚本
  15.         function hello(data){
  16.             // console.log(data.name)
  17.             const str =`
  18.             <ul>
  19.                 <li>序号：${data.id}</li>
  20.                 <li>姓名：${data.name}</li>
  21.                 <li>邮箱：${data.email}</li>
  22.             </ul>
  23.             `
  24.             document.body.insertAdjacentHTML('afterbegin',str)
  25.         }
  28.     </script>
  29.     <!-- 2. 调用函数语句，在跨域脚本中-->
  30.     <!-- <script src="http://jsonp.io/demo.js"></script> -->
  32.     <script>
  33.         function getJSON(url){
  34.             const script = document.createElement('script');
  35.             script.src = url;
  36.             document.body.append(script);
  37.         }
  38.         getJSON('http://jsonp.io/demo1.php?callback=hello&id=1');
  39.     </script>
  40. </body>
  41. </html>

PHP示范：

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

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

HTML代码示范：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>跨域请求：PHP跨域回调（带参）</title>
  8.   </head>
  9.   <body>
  10.     <script>
  11.       //data:跨域数据
  13.       //1.函数声明：当前脚本
  14.       function say(data) {
  15.         // console.log(data.name)
  16.         const str = `
  17.             <ul>
  18.                 <li>序号：${data.id}</li>
  19.                 <li>姓名：${data.name}</li>
  20.                 <li>邮箱：${data.email}</li>
  21.             </ul>
  22.             `;
  23.         document.body.insertAdjacentHTML('afterbegin', str);
  24.       }
  25.     </script>
  26.     <!-- 2. 调用函数语句，在跨域脚本中-->
  27.     <!-- <script src="http://jsonp.io/demo.js"></script> -->
  29.     <script>
  30.       function getJSON(url) {
  31.         //ajax
  32.         fetch(url)
  33.           .then(res => res.json())
  34.           .then(json => say(json));
  35.       }
  36.       getJSON('http://jsonp.io/demo2.php?callback=say&id=1');
  37.     </script>
  38.   </body>
  39. </html>

PHP代码示范

  1. <?php
  3. header("Access-Control-Allow-Origin: *");
  5. $users = [
  6.     ['id' => 1, 'name' => '老六', 'email' => 'nx99@qq.com'],
  7.     ['id' => 2, 'name' => '老七', 'email' => 'nx88@qq.com'],
  8.     ['id' => 3, 'name' => '老八', 'email' => 'nx77@qq.com'],
  9. ];
  11. $id = $_GET['id'];
  12. $callback = $_GET['callback'];
  14. $user = array_filter($users, function ($item) use ($id) {
  15.     return $item['id'] == $id;
  16. });
  18. // $data = json_encode(array_pop($user));
  19. echo json_encode(array_pop($user));
  21. // echo "callback($data)";
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post