亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

搜索
博主信息
博文 64
粉絲 6
評論 2
訪問量 100642
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
CORS和JSONP兩種方式實現(xiàn)跨域請求
王嬌
原創(chuàng)
839人瀏覽過

學(xué)習(xí)總結(jié)

  • 利用cors和jsonp可以實現(xiàn)跨域數(shù)據(jù)請求
  • 這樣就可以實現(xiàn)前端數(shù)據(jù)和后端數(shù)據(jù)庫數(shù)據(jù)不在同一服務(wù)器上，如果后端數(shù)據(jù)比較龐大可以寄存在另一個專門用來存儲數(shù)據(jù)的服務(wù)器上

1.1CORS實現(xiàn)跨域請求 php11.edu中的cors.html

  2. <!DOCTYPE html>
  3. <html lang="en">
  4.   <head>
  5.     <meta charset="UTF-8" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>cors跨域請求</title>
  8.   </head>
  9.   <body>
  10.     <h2>CORS跨域請求</h2>
  11.     <div>
  12.       <label for="stuName">姓名：</label>
  13.       <span id="stuName"></span>
  14.     </div>
  15.     <div>
  16.       <label for="stuAge">年齡：</label>
  17.       <span id="stuAge"></span>
  18.     </div>
  19.     <div>
  20.       <button onclick="getData()">通過CORS獲取其它域數(shù)據(jù)</button>
  21.     </div>
  22.     <script>
  23.       function getData() {
  24.         var xml = new XMLHttpRequest();
  26.         xml.onreadystatechange = function () {
  27.           if (xml.readyState === 4 && xml.status === 200) {
  28.             $data = JSON.parse(xml.responseText);
  29.             console.log($data.name, $data.age);
  30.             document.getElementById("stuName").innerHTML = $data.name;
  31.             document.getElementById("stuAge").innerHTML = $data.age;
  32.           }
  33.         };
  35.         //當(dāng)前地址
  36.         //http://php11.edu/0522/cors.html
  38.         //跨域請求數(shù)據(jù),需要在data.php文件中設(shè)置請求頭
  39.         xml.open("GET", "http://58city.com/data.php", true);
  40.         //http://58city.com/data.php
  41.         //data.php中設(shè)置請求頭
  42.         //如果使用post請求，需要設(shè)置下面一條
  43.         // header("Content-Type:text/plain");
  44.         //設(shè)置頭部，不設(shè)置的話請求會被拒絕
  45.         // header("Access-Control-Allow-Origin:http://php11.edu");
  47.         xml.send(null);
  48.       }
  49.     </script>
  50.   </body>
  51. </html>

1.2 58city.com域中的文件 data.php

  2. <?php
  3. //http://58city.com/data.php
  4. //如果使用post請求，需要設(shè)置下面一條
  5. header("Content-Type:text/plain");
  6. //設(shè)置頭部，不設(shè)置的話請求會被拒絕
  7. header("Access-Control-Allow-Origin:http://php11.edu");
  8. $stu['name'] = 'angle';
  9. $stu['age'] =32;
  10. echo json_encode($stu);
  11. ?>

1.3 代碼顯示效果


2.1 JSONP實現(xiàn)跨域請求 php11.edu中的jsonP.html

  2. <!DOCTYPE html>
  3. <html lang="en">
  4.   <head>
  5.     <meta charset="UTF-8" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>jsonP實現(xiàn)跨域請求</title>
  8.   </head>
  9.   <body>
  10.     <h2>jsonP實現(xiàn)跨域請求</h2>
  11.     <div>
  12.       <label for="stuName">姓名：</label>
  13.       <span id="stuName"></span>
  14.     </div>
  15.     <div>
  16.       <label for="stuAge">年齡：</label>
  17.       <span id="stuAge"></span>
  18.     </div>
  19.     <div>
  20.       <button onclick="getData()">通過jsopP獲取其它域數(shù)據(jù)</button>
  21.     </div>
  22.     <script>
  23.       //jsonP回調(diào)函數(shù)
  24.       //handle中的參數(shù)是一個對象，（參數(shù)已經(jīng)解析json字符串為一個對象）
  25.       function handle(jsonPData) {
  26.         var $data = jsonPData;
  27.         console.log($data.name, $data.age);
  28.         document.getElementById("stuName").innerHTML = $data.name;
  29.         document.getElementById("stuAge").innerHTML = $data.age;
  30.       }
  31.       //html頭部動態(tài)創(chuàng)建一個script標(biāo)簽，通過src屬性獲取外部數(shù)據(jù)
  32.       //scr = "http://58city.com/data2.php?jsonp=回調(diào)函數(shù)名";
  33.       function getData() {
  34.         var script = document.createElement("script");
  35.         script.src = "http://58city.com/data2.php?jsonp=handle";
  36.         document.head.appendChild(script);
  37.         //http://58city.com/data2.php
  38.         //data2中的數(shù)據(jù)
  39.         // <?php
  40.         // $stu['name'] = 'Eric';
  41.         // $stu['age'] =6;
  42.         // $jsonStr = json_encode($stu);
  43.         // //handle是請求數(shù)據(jù)的回調(diào)函數(shù)名，參數(shù)是一個json字符串
  44.         // echo "handle($jsonStr)";
  45.         // ?>
  46.       }
  47.     </script>
  48.   </body>
  49. </html>

2.2 58city.com中的 data2.php

  2. <?php
  3. //http://58city.com/data2.php
  4. $stu['name'] = 'Eric';
  5. $stu['age'] =6;
  6. $jsonStr = json_encode($stu);
  7. //handle是請求數(shù)據(jù)的回調(diào)函數(shù)名，參數(shù)是一個json字符串
  8. echo "handle($jsonStr)";
  9. ?>

2.3代碼顯示效果


3.1利用jsonp實現(xiàn)跨域提取數(shù)據(jù) php11.edu中的showGoods.html

  2. <!DOCTYPE html>
  3. <html lang="en">
  4.   <head>
  5.     <meta charset="UTF-8" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>商品展示頁</title>
  8.     <link rel="stylesheet" href="showGoods.css" />
  9.   </head>
  11.   <body>
  12.     <div class="show" id="show">
  13.       <h2>商品展示頁面</h2>
  14.       <div>
  15.         <span>編號</span><span>名稱</span><span>價格</span><span>單位</span
  16.         ><span>時間</span>
  17.       </div>
  18.     </div>
  19.   </body>
  20.   <script>
  21.     //jsonP回調(diào)函數(shù)
  22.     //handle中的參數(shù)是一個對象，（參數(shù)已經(jīng)解析json字符串為一個對象）
  23.     function handle(jsonPData) {
  24.       //   //創(chuàng)建一個div標(biāo)簽
  25.       //   var div = document.createElement("div");
  26.       //   //添加到html中
  27.       //   document.getElementById("show").appendChild(div);
  28.       //   //設(shè)置div的id值
  29.       //   div.id = "1";
  31.       //   //定義span標(biāo)簽
  32.       //   var span = document.createElement("span");
  33.       //   //span標(biāo)簽添加文件結(jié)點
  34.       //   var node = document.createTextNode("1");
  35.       //   //把文本結(jié)點的數(shù)據(jù)添加到span標(biāo)簽上
  36.       //   span.appendChild(node);
  38.       //   //把span標(biāo)簽添加到div里
  39.       //   document.getElementById("1").appendChild(span);
  41.       for (var i = 0; i < jsonPData.length; i++) {
  42.         var div = document.createElement("div");
  43.         document.getElementById("show").appendChild(div);
  44.         div.id = i;
  45.         for (key in jsonPData[i]) {
  46.           var res = jsonPData[i][key]; //獲取的數(shù)據(jù)
  47.           //創(chuàng)建一個span標(biāo)簽
  48.           var span = document.createElement("span");
  49.           //span標(biāo)簽添加文件結(jié)點
  50.           var node = document.createTextNode(res);
  51.           //把文本結(jié)點的數(shù)據(jù)添加到span標(biāo)簽上
  52.           span.appendChild(node);
  53.           document.getElementById(i).appendChild(span);
  54.         }
  55.       }
  56.     }
  57.     //html頭部動態(tài)創(chuàng)建一個script標(biāo)簽，通過src屬性獲取外部數(shù)據(jù)
  58.     //scr = "http://58city.com/data2.php?jsonp=回調(diào)函數(shù)名";
  60.     var script = document.createElement("script");
  61.     script.src = "http://58city.com/goods.php?jsonp=handle";
  62.     document.head.appendChild(script);
  63.   </script>
  64. </html>

3.2 58city.com中的 goods.php

  2. <?php
  3. require 'autoLoad.php';
  5. use compotents\conn\DBconn;
  6. $user =new  DBconn();
  7. $table = 'tb_goods';//表名
  8. $limit =10; //顯示10條記錄
  9. $records = $user->select($table,'*','*',$limit);
  10. $jsonStr = json_encode($records);
  11. echo "handle($jsonStr)";
  13. ?>

3.3代碼顯示效果

批改老師：天蓬老師天蓬老師

批改狀態(tài)：合格

老師批語：是不是覺得跨域請求非常的簡單呢
本博文版權(quán)歸博主所有，轉(zhuǎn)載請注明地址！如有侵權(quán)、違法，請聯(lián)系admin@php.cn舉報處理！
全部評論 文明上網(wǎng)理性發(fā)言，請遵守新聞評論服務(wù)協(xié)議
0條評論
作者最新博文
關(guān)于我們 免責(zé)申明 意見反饋 講師合作 廣告合作 最新更新
php中文網(wǎng)：公益在線php培訓(xùn)，幫助PHP學(xué)習(xí)者快速成長！
關(guān)注服務(wù)號 技術(shù)交流群
PHP中文網(wǎng)訂閱號
每天精選資源文章推送
PHP中文網(wǎng)APP
隨時隨地碎片化學(xué)習(xí)
PHP中文網(wǎng)抖音號
發(fā)現(xiàn)有趣的

Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號

    • 登錄PHP中文網(wǎng)，和優(yōu)秀的人一起學(xué)習(xí)！
    全站2000+教程免費學(xué)