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

搜索
博主信息
博文 47
粉絲 3
評論 0
訪問量 49455
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
數(shù)組函數(shù)、JSON、get,post發(fā)起ajx請求、cors,jsonp跨域原理
吳
原創(chuàng)
972人瀏覽過

1. 自選10個(gè)數(shù)組函數(shù)練習(xí)

  1. <script>
  2.   // 1.棧方法
  3.   // 棧：后進(jìn)先出
  4.   // 隊(duì):先進(jìn)先出
  5.   let arr = [];
  6.   let res;
  7.   // 1. push();pop():在數(shù)組的尾部增刪
  8.   res = arr.push(1, 2, 3);
  9.   console.log(arr.pop());
  10.   console.log(arr.pop());
  11.   console.log(arr.pop());
  12.   console.log("%c----", "color:red");
  13.   // 2. unshift(),shift()：在數(shù)組的頭部進(jìn)行增刪
  14.   // console.log(arr.unshift(4, 5, 6));
  15.   res = arr.unshift(4, 5, 6);
  16.   console.log(arr.shift());
  17.   console.log(arr.shift());
  18.   console.log(arr.shift());
  19.   console.log("%c----", "color:red");
  20.   // 3. push()+shift()：模擬隊(duì)列，尾部進(jìn)入，頭部出去
  21.   res = arr.push(1, 2, 3);
  22.   console.log(arr.shift());
  23.   console.log(arr.shift());
  24.   console.log(arr.shift());
  25.   console.log("%c----", "color:red");
  26.   // 4. pop()+unshift()：模擬隊(duì)列，頭部進(jìn)入，尾部出去
  27.   res = arr.unshift(1, 2, 3);
  28.   console.log(arr.pop());
  29.   console.log(arr.pop());
  30.   console.log(arr.pop());
  31.   console.log("%c----", "color:red");
  32.   // 5. join()：將數(shù)組轉(zhuǎn)為字符串返回
  33.   arr = ["電腦", "手機(jī)", "相機(jī)"];
  34.   res = arr.join("---");
  35.   console.log(res);
  36.   console.log("%c----", "color:red");
  37.   // 6. concat()數(shù)組合并
  38.   console.log([1, 2, 3].concat([4, 5, 6], [7, 8, 9]));
  39.   console.log("%c----", "color:red");
  40.   // 7.slice()：返回?cái)?shù)組中的部分成員
  41.   arr = [1, 2, 3, 4, 5];
  42.   // 取最后二個(gè)數(shù)字
  43.   console.log(arr.slice(3));
  44.   console.log("%c----", "color:red");
  45.   // 8. splice （開始索引，刪除數(shù)據(jù)，插入數(shù)據(jù)...） ：數(shù)組的增刪改
  46.   arr = [1, 2, 3, 4, 5, 6];
  47.   // 刪除
  48.   res = arr.splice(2);
  49.   console.log(arr);
  50.   // 更新
  51.   arr = [1, 2, 3, 4, 5, 6];
  52.   res = arr.splice(1, 2, ...[88, 99]);
  53.   console.log(arr);
  54.   // 新增：將第二個(gè)參數(shù)設(shè)置為0
  55.   arr = [1, 2, 3, 4, 5];
  56.   res = arr.splice(1, 0, ...[88, 99]);
  57.   console.log(arr);
  58.   console.log("%c----", "color:red");
  59.   // 9. sort()排序：默認(rèn)是字母表順序
  60.   arr = ["p", "b", "a"];
  61.   console.log(arr);
  62.   arr.sort();
  63.   console.log(arr);
  64.   console.log("%c----", "color:red");
  65.   // 10. map遍歷:有返回值
  66.   arr = [1, 2, 3, 4, 5, 6];
  67.   res = arr.map((item) => item);
  68.   console.log(res);
  69.   console.log("%c----", "color:red");
  70.   // 11. filter() 過濾
  71.   arr = [1, 2, 3, 4, 5];
  72.   res = arr.filter((item) => !(item % 2));
  73.   console.log(res);
  74.   console.log("%c----", "color:red");
  75.   // 12. redice(callback(prev,curr)):歸并
  76.   arr = [1, 2, 3, 4, 5];
  77.   res = arr.reduce((prev, curr) => {
  78.     return prev + curr;
  79.   });
  80.   console.log(res);
  81. </script>

2.JSON 二個(gè)函數(shù)及參數(shù)功能

  • JSON.stringify()：將 js 數(shù)據(jù)序列化為 json 字符串

  1. <script>
  2.   // Array,objecy
  3.   console.log(JSON.stringify([1, 2, 3]));
  4.   console.log(JSON.stringify({ a: 3, b: 2, c: 3 }));
  5.   // 函數(shù)
  6.   console.log(
  7.     JSON.stringify({ a: 1, b: 2, c: 3 }, (k, v) => {
  8.       // 將需要過濾掉的數(shù)據(jù)直接返回undefined
  9.       if (v < 2) return undefined;
  10.       return v;
  11.     })
  12.   );
  13.   // 格式化輸出json字符串
  14.   console.log(JSON.stringify({ a: 1, b: 2, c: 3 }, null, "---"));
  15.   console.log(obj);
  16. </script>
  • JSON.parse(): 解析 json 字符串為 js 對象

  1.     <script>
  2.         let obj = JSON.parse(`{"a":1,"b":2,"c":3}`);
  3.         console.log(obj.a, obj.b, obj.c);
  5.         // 第二個(gè)參數(shù)可以對json的數(shù)據(jù)進(jìn)行處理后再返回
  6.         obj = JSON.parse(`{"a":1,"b":2,"c":3}`, (k, v) => {
  7.             if (k === "") return v;
  8.             return v * 2;
  9.         });
  10.         console.log(obj);
  11.     </script>

3. get、post 發(fā)起 ajax 請求

  • ajax-get 請求

  1.     <button>ajax-get請求</button>
  2.     <p></p>
  3.     <script>
  4.       const btn = document.querySelector("button");
  6.       btn.onclick = () => {
  7.         const xhr = new XMLHttpRequest();
  8.         xhr.responseType = "json";
  9.         xhr.open("get", "test1.php?id=2");
  10.         xhr.onload = () => {
  11.           console.log(xhr.response);
  12.           let user = `姓名：${xhr.response.name}，郵箱：${xhr.response.email}`;
  13.           document.querySelector("p").innerHTML = user;
  14.         };
  15.         xhr.onerror = () => console.log("error");
  16.         xhr.send(null);
  17.       };
  18.     </script>

ajax-get 請求 PHP 代碼

  1. <?php
  3. // 以二維數(shù)組模擬數(shù)據(jù)表信息
  4. $users = [
  5.       ['id'=>1, 'name'=>'天蓬','email'=>'tp@php.cn','password' =>  md5('123456')],
  6.       ['id'=>2, 'name'=>'滅絕','email'=>'mj@php.cn','password' =>  md5('abc123')],
  7.       ['id'=>3, 'name'=>'西門','email'=>'xm@php.cn','password' => md5('abc888')],
  8. ];
  10. // 查詢條件
  11. $id = $_GET['id'];
  13. // 在id組成的數(shù)組中查詢是否存在指定的id,并返回對應(yīng)的鍵名
  14. $key = array_search($id,array_column($users,'id'));
  16. // 根據(jù)鍵名返回指定的用戶信息
  17. echo json_encode($users[$key]);
  • ajax-post 請求

  1. <html lang="en">
  2.   <head>
  3.     <meta charset="UTF-8" />
  4.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  5.     <title>ajax-post請求</title>
  6.   </head>
  7.   <style>
  8.     .login {
  9.       width: 20em;
  10.       border: 1px solid;
  11.       padding: 0 1em 1em;
  12.       background-color: lightcyan;
  13.       margin: 2em auto;
  14.       display: grid;
  15.       place-items: center;
  16.     }
  18.     .login form {
  19.       display: grid;
  20.       grid-template-columns: 3em 1fr;
  21.       gap: 1em 0;
  22.     }
  24.     /* 按鈕與提示信息顯示在第二列 */
  25.     .login form button,
  26.     .tips {
  27.       grid-area: auto / 2;
  28.     }
  29.   </style>
  31.   <body>
  32.     <div class="login">
  33.       <form action="" method="POST">
  34.         <label for="email">郵箱：</label>
  35.         <input type="email" name="email" id="email" />
  36.         <label for="password">密碼：</label>
  37.         <input type="password" name="password" id="password" />
  38.         <button>提交</button>
  39.         <span class="tips"></span>
  40.       </form>
  41.     </div>
  42.     <script>
  43.       const form = document.querySelector(".login form");
  44.       const btn = document.querySelector(".login button");
  45.       const tips = document.querySelector(".tips");
  47.       btn.onclick = (ev) => {
  48.         ev.preventDefault();
  49.         const xhr = new XMLHttpRequest();
  50.         xhr.open("post", "test2.php");
  51.         xhr.onload = () => (tips.innerHTML = xhr.response);
  52.         xhr.send(new FormData(form));
  53.       };
  54.     </script>
  55.   </body>
  56. </html>

ajax-post 請求 PHP 代碼：

  1. <?php
  3. // print_r($_POST);
  6. // 使用二維數(shù)組模擬用戶數(shù)據(jù)表信息
  7. $users = [
  8.     ['id'=>1, 'name'=>'天蓬','email'=>'tp@php.cn','password' =>  md5('123456')],
  9.     ['id'=>2, 'name'=>'滅絕','email'=>'mj@php.cn','password' =>  md5('abc123')],
  10.     ['id'=>3, 'name'=>'西門','email'=>'xm@php.cn','password' => md5('abc888')],
  11. ];
  13. // 將通過post獲取的數(shù)據(jù)保存到臨時(shí)變量中
  14. $email = $_POST['email'];
  15. $password = md5($_POST['password']);
  18. // 使用數(shù)組過濾器查詢是否存在指定的用戶并返回結(jié)果
  19. $res = array_filter($users,function($user) use ($email,$password){
  20.     return $user['email'] === $email && $user['password'] === $password;
  21. });
  23. // 將結(jié)果做為請求響應(yīng)返回到前端
  24. echo count($res) === 1 ? '驗(yàn)證成功' : '驗(yàn)證失敗';

4. 理解并寫出 cors、jsonp 跨域的源碼

cors 跨域：不同源的請求，跨協(xié)議|域名|端口的請求，需服務(wù)器端請求的文件開啟跨域許可。

jsonp 跨域：跨域標(biāo)簽實(shí)現(xiàn)，link 的 href，img 的 src，script 的 src，a 標(biāo)簽的 href 等來實(shí)現(xiàn)
jsonp 跨域：可以不需要服務(wù)器端請求的文件開啟跨域許可
jsonp 跨域：前端一個(gè)調(diào)用函數(shù)，把函數(shù)名告訴服務(wù)器端，服務(wù)器端把 json 格式數(shù)據(jù)填充前端告訴它的函數(shù)名，進(jìn)行動態(tài)輸出

  • 4.1 cors 跨域
cors-get 跨域

  1. <button>ajax-get-cors</button>
  2. <p></p>
  3. <script>
  4.   const btn = document.querySelector("button");
  5.   btn.onclick = (ev) => {
  6.     const xhr = new XMLHttpRequest();
  7.     xhr.open("get", "http://world.io/cors1.php");
  8.     xhr.onload = () => (document.querySelector("p").innerHTML = xhr.response);
  9.     xhr.send(null);
  10.   };
  11. </script>
cors-get 跨域 PHP 代碼
  1. <?php
  2. // 在服務(wù)器端開啟跨域許可
  3. // header ('Access-Control-Allow-Origin: http://hello.io');
  4. header ('Access-Control-Allow-Origin: *');
  5. // *:任何來源
  6. echo 'CORS：跨域請求成功';
cors-post 跨域

  1. <button>ajax-post-cors</button>
  2. <p class="tips"></p>
  3. <script>
  4.   const btn = document.querySelector("button");
  5.   const tips = document.querySelector(".tips");
  7.   btn.onclick = (ev) => {
  8.     const xhr = new XMLHttpRequest();
  9.     xhr.open("post", "http://world.io/cors2.php");
  10.     xhr.onload = () => (tips.innerHTML = xhr.response);
  11.     let formData = new FormData();
  12.     formData.append("email", "admin@php.cn");
  13.     formData.append("password", "123456");
  14.     xhr.send(formData);
  15.   };
  16. </script>
cors-get 跨域 PHP 代碼
  1. <?php
  2. header ('Access-Control-Allow-Origin: *');
  4. // 返回前端post提交的數(shù)據(jù)
  5. print_r($_POST);
4.2 jsonp 跨域

  1. <button>jsonpadding-cors</button>
  2. <p></p>
  3. <script>
  4.   function getUser(data) {
  5.     console.log(data);
  6.     let user = data.name + ":" + data.email;
  7.     document.querySelector("p").innerHTML = user;
  8.   }
  10.   const btn = document.querySelector("button");
  11.   btn.onclick = () => {
  12.     let script = document.createElement("script");
  13.     script.src = "http://world.io/cors3.php?callback=getUser";
  14.     document.body.insertBefore(script, document.body.firstElementChild);
  15.   };
  16. </script>
  • jsonp 跨域 PHP 代碼：
  1. <?php
  3. // jsonp 不需要授權(quán)給前端
  4. // 只要返回一個(gè)使用json做為參數(shù)的函數(shù)調(diào)用語句就可以了
  5. // 將前端需要的數(shù)據(jù)以json格式放到這個(gè)函數(shù)的參數(shù)中就行了
  7. // 必須要知道前端js要調(diào)用的函數(shù)名稱
  9. $callback = $_GET['callback'];
  11. // 服務(wù)器中需要返回的數(shù)量
  12. $data = '{ "name": "天蓬", "email": "tp@php.cn" }';
  13. $data = '{ "name": "滅絕", "email": "mj@php.cn" }';
  15. // 在后端生成一條js函數(shù)調(diào)用語句：getuser({ name: "天蓬老師", email: "tp@php.cn" });
  16. echo $callback . '(' .$data. ')';
批改老師：天蓬老師天蓬老師

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

老師批語：
本博文版權(quán)歸博主所有，轉(zhuǎn)載請注明地址！如有侵權(quán)、違法，請聯(lián)系admin@php.cn舉報(bào)處理！
全部評論 文明上網(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
隨時(shí)隨地碎片化學(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+教程免費(fèi)學(xué)