search

博客列表 >JS数组常用方法 & json知识 & ajax请求

JS数组常用方法 & json知识 & ajax请求

培(信仰)
培(信仰)原创
2021年01月23日 18:18:55608浏览

js急速入门之五（数组常用方法 json知识 ajax请求）

数组常用方法

    1. 栈方法
      栈：后进先出
      队：先进先出
      他们是访问受限，仅允许在一端进行增删的数组
      push()：从数组的尾部增加成员
      pop()：从数组的尾部进行移除成员
      unshift()：从数组的头部增加成员
      shift()：从数组的头部移除成员
      push(),shift() 模拟队 尾部进入，头部出去
      unshift(),pop() 模拟队列，头部进入，尾部出去
    1. join():与字符串的split()相反，将数组转为字符串返回
  1.   arr = ["电脑","手机","相机"];
  2.   let res = arr.join(",");
  3.   console.log(res);
  4.   //js中，字符串可以当数组使用,
  5.   let str = "hello";
  6.   console.log(str[0],str[1],str[2]);
  7.   //join()经常格式化字符串
    1. concat() 数组合并
      在字符串中，用于字符串拼接
  1.       console.log("hello".concat(" php.cn"));
  2.       console.log([1,2,3].concat([4,5,6],[7,8,9]));
  3.       console.log([1,2,3].concat(123,"php",true,{x:1,y:2},["a","b"]));

注意：一维数组才有效

    1. slice(开始取值的索引):返回数组中的部分成员
      创建数组副本
  1.       arr = [1,2,3,4,5];
  2.       res = arr.slice(0);      
  3.       console.log(arr.slice(3));
  4.       //返回[4,5]
  5.       // 也支持负数
  6.       console.log(arr.slice(-2));
  7.       //返回[4,5]
    1. splice(开始索引，删除的数量，插入的数据…):数组的增删，它的本职工作是删除元素
  1.       arr = [1, 2, 3, 4, 5];
  2.       // 5.1 删除
  3.       res = arr.splice(2);
  4.       // 返回被删除的元素
  5.       console.log(res);
  6.       //返回[3, 4, 5]
  7.       console.log(arr);
  8.       //返回[1, 2]
  10.       arr = [6, 7, 8, 9];
  11.       res = arr.splice(2, 3, 100, 200, 300);
  12.       //数组插入任然是数组
  13.       // res = arr.splice(2,3,[100,200,300]);
  14.       //可以使用...rest语法展开数组
  15.       // res = arr.splice(2,3,...[100,200,300]);
  16.       console.log(res);
  17.       //返回 [8, 9] 因为数组长度不够，后面的100,200,300并不是删除的部分
  18.       console.log(arr);
  19.       //返回[6, 7, 100, 200, 300] 原数组被替换了，多出来的300也作为成员被添加
  20.       //将第二个参数设置为0 表示，删除数量为0，不删除。第三个及以后的参数就是新增的成员
  21.       res = arr.splice(1, 0, ...[88, 99]);
  22.       console.log(res);
  23.       //返回[]空数组，因为没有要删除的成员
  24.       console.log(arr);
  25.       // 返回：[6, 88,99,7, 100, 200, 300]

注意：第一，有返回值，返回的是数组，并且是被删除的那部分成员
第二，原数组产生变化。替换的成员多就是添加，少就是删除。

    1. 排序
  1. arr = ["a", "b", "c", 11, 22, 12, 23];
  2.       // 默认按字符顺序排列
  3.       console.log(arr);
  4.       arr.sort();
  5.       console.log(arr);
  6.       // 怎么才能按数字排序呢？
  7.       arr = [11, 22, 12, 23];
  8.       //升序 参与运算的时，自动转为数值
  9.       // arr.sort((a,b)=>a-b);
  10.       // 降序
  11.       arr.sort((a, b) => b - a);
  13.       console.log(arr);
    1. 遍历 map
      返回数组
  1. arr = [1, 2, 3, 4, 5];
  2.       console.log(arr);
  3.       // forEach()没有返回值
  4.       // arr.forEach(item => console.log(item));
  5.       // map()对数组每个成员都调用回调进行处理并返回这个数组
  6.       // res = arr.map(item => item);
  7.       res = arr.map((item) => item * 2);
  8.       console.log(res);
  9.       //返回 [2, 4, 6, 8, 10]
    1. 过滤
  1.       arr = [1, 2, 3, 4, 5];
  2.       console.log(arr);
  3.       // 取奇数(取余，所以得到的是奇数)
  4.       //   res = arr.filter(item=>item %2);
  5.       // 取反则取得是偶数
  6.       res = arr.filter((item) => !(item % 2));
  7.       console.log(res);
  8.       //返回 [2, 4]
    1. 归内 reduce(回调函数(上一个值，当前值),累加初始值)
      reduce(callback(prev,cur),0)
  1.       arr = [1, 2, 3, 4, 5];
  2.       res = arr.reduce((prev, cur) => prev + cur);
  3.       console.log(res);
  4.       //返回 15
  5.       //第二个参数是累加的初始值
  6.       res = arr.reduce((prev, cur) => prev + cur, 50);
  7.       console.log(res);
  8.       // 返回 65

json知识

  1.  // `JSON.stringify(data,replace,space)`:将js数据转为json
  2.       console.log(JSON.stringify(3.14), typeof JSON.stringify(3.14));
  3.       // 3.14 string json中数值时 string，外面不用写双引号
  4.       console.log(JSON.stringify("php"), typeof JSON.stringify("php"));
  5.       //"php" string json中字符串是 string ，外面需要用双引号
  6.       console.log(JSON.stringify(true), typeof JSON.stringify(true));
  7.       //true string json中boolean 是string，外面没有双引号
  8.       console.log(JSON.stringify(null), typeof JSON.stringify(null));
  9.       // null string json中null是string，外面也没有双引号
  11.       //array, object
  12.       // json对象的属性必须加双引号，字符串也必须加双引号，最后一个没有逗号
  13.       console.log(
  14.         JSON.stringify({ x: "a", y: "b" }),
  15.         typeof JSON.stringify({ x: "a", y: "b" })
  16.       );
  17.       console.log(
  18.         JSON.stringify([1, 2, 3, "a"]),
  19.         typeof JSON.stringify([1, 2, 3, "a"])
  20.       );
  21.       //数组和对象：object
  23.       // json 其实不是数据类型，只是一个具有特殊格式的字符串而已
  24.       // 会对json格式字符串的特殊操作，主要通过后面的第二个参数
  25.       // 第二个参数支持数组 和 函数
  26.       // 第三个参数用来格式化输出json字符串
  27.       // 数组
  28.       console.log(JSON.stringify({ x: "a", y: "b", z: "c" }));
  29.       console.log(JSON.stringify({ x: "a", y: "b", z: "c" }, ["x", "y"]));
  30.       // 返回：{"x":"a","y":"b"}
  31.       // 返回内容只解析了第二个参数给定的两个值，有点像解构
  32.       //函数
  33.       console.log(
  34.         JSON.stringify({ x: 1, y: 2, z: 3 }, (k, v) => {
  35.           //将需要过滤掉的数据直接返回undefined
  36.           if (v < 2) return undefined;
  37.           return v;
  38.         })
  39.       );
  40.       // 返回 {"y":2,"z":3}
  41.       console.log(JSON.stringify({ x: 1, y: 2, z: 3 }, null, 2));
  42.       //返回
  43.       //{
  44.       //  "x": 1,
  45.       //  "y": 2,
  46.       //  "z": 3
  47.       //}
  48.       console.log(JSON.stringify({ x: 1, y: 2, z: 3 }, null, "***"));
  49.       //返回
  50.       //{
  51.       //***"x": 1,
  52.       //***"y": 2,
  53.       //***"z": 3
  54.       //}
  56.       //2. JSON.parse(str,reviver),将json转为js对象,
  57.       //第二个参数可以对json的数据进行处理后再返回，
  58.       let obj = JSON.parse(`{"x": 1,"y": 2,"z": 3}`);
  59.       console.log(obj, typeof obj);
  60.       console.log(obj.x, obj.y, obj.z);
  61.       obj = JSON.parse(`{"x": 1,"y": 2,"z": 3}`, (k, v) => {
  62.           //json对象是由内向外解析
  63.         if (k === "") return v;
  64.         return v * 2;
  65.       });
  66.       console.log(obj);     
  67.       //{x: 2, y: 4, z: 6}

ajax 操作

使用 phpstudy 作为虚拟服务器
配置启动apache
由于端口80被占用所以换了8088作为端口
创建两个网站：
hello.io

  • test1.php
  • test2.php

world.io

  • cors1.php
  • cors2.php
  • cors3.php

XMLHttpRequest 对象

1. 配置本地服务器

2. XMLHttpRequest是浏览器对象,而非 JS 内置对象

2.1 xhr 请求步骤

  1. 创建 xhr 对象: const xhr = new XMLHttpRequest()
  2. 配置 xhr 参数: xhr.open(type, url)
  3. 处理 xhr 响应: xhr.onload = (...) => {...}
  4. 发送 xhr 请求: xhr.send(...)

2.2. xhr 对象常用属性

序号 方法 描述
1 responseType 设置响应类型
2 response 响应正文

2.3 xhr 对象常用方法

序号 方法 描述
1 open(type,url) 配置请求参数
2 send(data/null) 发送请求

2.4. xhr 对象常用事件

序号 事件 描述
1 load() 请求成功
2 error() 请求失败

ajax-get

  1.     <button>ajax-get</button>
  2.     <p></p>
  3.     <script>
  4.         const btn = document.querySelector("button");
  5.         btn.onclick = ()=>{
  6.             // 1. 创建 xhr 对象
  7.             const xhr = new XMLHttpRequest();
  8.             // 2. 配置 xhr 参数            
  9.             xhr.open("get","test1.php?id=2");
  10.             xhr.responseType = "json";
  11.             // 3. 处理 xhr 响应：
  12.             //成功
  13.             xhr.onload =()=>{
  14.                 console.log(xhr.response);
  15.                 //dom:将响应结果渲染到页面
  16.                 let user = `${xhr.response.name} (${xhr.response.email})`;
  17.                 document.querySelector("p").innerHTML = user;
  18.             }
  19.             //失败
  20.             xhr.onerror =()=> console.log("Error");
  21.             // 4. 发送 xhr 请求：
  22.             xhr.send(null);
  23.         }
  24.     </script>

服务器端 test1.php 文件

  1. <?php 
  3. // 以二维数组模拟数据表信息
  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组成的数组中查询是否存在指定的id,并返回对应的键名
  14. $key = array_search($id,array_column($users,'id'));
  16. // 根据键名返回指定的用户信息
  17. echo json_encode($users[$key]);

ajax-post

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>ajax-post</title>
  7.     <style>
  8.       #login {
  9.         width: 20em;
  10.         border: 1px solid #888;
  11.         box-sizing: border-box;
  12.         padding: 1em 2em 1em;
  13.         margin: 2em auto;
  14.         background-color: lightcyan;
  15.         display: grid;
  16.         grid-template-columns: 3em 1fr;
  17.         gap: 1em 0;
  18.       }
  19.       #login .title {
  20.         grid-area: auto / span 2;
  21.         place-self: center;
  22.       }
  23.       #login button {
  24.         grid-area: auto / 2 / auto;
  25.       }
  26.       .tips{
  27.           grid-area: auto / 2 ;
  28.       }
  29.     </style>
  30.   </head>
  31.   <body>
  32.     <form id="login" action="" method="POST">
  33.       <label class="title">用户登录</label>
  34.       <label for="email" >邮箱：</label>
  35.       <input type="email" name="email" />
  36.       <label for="password">密码：</label>
  37.       <input type="password" name="password" />
  38.       <button name="submit">登录</button>
  39.       <span class="tips"></span>
  40.     </form>
  41.     <script>
  42.       const form = document.querySelector("#login");
  43.       const btn = document.querySelector("#login button");
  44.       const tips = document.querySelector(".tips");
  46.     //   let data = new FormData();
  47.     //   data.append("email",form.email.value);
  48.     //   data.append("password",form.password.value);
  49.     //   console.log(data.get("email"),data.get("password"));
  51.       btn.onclick = (ev) => {          
  52.           ev.preventDefault();
  53.         // 1. 创建 xhr 对象
  54.         const xhr = new XMLHttpRequest();
  55.         // 2. 配置 xhr 参数
  56.         xhr.open("post", "test2.php");
  57.         // xhr.responseType = "json";
  58.         // 3. 处理 xhr 响应：
  59.         //成功
  60.         xhr.onload = () => (tips.innerHTML = xhr.response);
  61.         //失败
  62.         // xhr.onerror = () => console.log("Error");
  63.         // 4. 发送 xhr 请求：
  64.         xhr.send(new FormData(form));
  65.       };
  66.     </script>
  67.   </body>
  68. </html>

服务器端 test2.php

  1. <?php 
  3. // print_r($_POST);
  6. // 使用二维数组模拟用户数据表信息
  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获取的数据保存到临时变量中
  14. $email = $_POST['email'];
  15. $password = md5($_POST['password']);
  18. // 使用数组过滤器查询是否存在指定的用户并返回结果
  19. $res = array_filter($users,function($user) use ($email,$password){
  20.     return $user['email'] === $email && $user['password'] === $password;
  21. });
  23. // 将结果做为请求响应返回到前端 
  24. echo count($res) === 1 ? '验证成功' : '验证失败';

跨域请求：ajax-get-cors

  1.     <button>ajax-get-cors</button>
  2.     <p></p>
  4.     <script>
  5.       // cors:跨域资源共享
  6.       // 同源策略： 为了请求的安全，浏览器禁止通过脚本发起一个跨域的请求
  7.       // 只允许通过脚本发起基于同源的请求
  8.       // 同源是指：协议相同，域名/主机名相同，端口相同
  9.       // http,https 协议不同，不同源
  10.       const btn = document.querySelector("button");
  11.       btn.onclick = (ev) => {
  12.         // 1. 创建 xhr 对象
  13.         const xhr = new XMLHttpRequest();
  14.         // 2. 配置 xhr 参数
  15.         xhr.open("get", "http://world.io:8088/cors1.php");
  16.         //xhr.responseType = "json";
  17.         // 3. 处理 xhr 响应：
  18.         //成功
  19.         xhr.onload = () => (document.querySelector("p").innerHTML = xhr.response);
  21.         //失败
  22.         xhr.onerror = () => console.log("Error");
  23.         // 4. 发送 xhr 请求：
  24.         xhr.send(null);
  25.       };
  26.     </script>

服务器端cors1.php 文件

  1. <?php
  2. //在服务器端开启跨域许可
  3. header('Access-Control-Allow-Origin: http://hello.io:8088');
  4. // *:任何来源都允许访问
  5. // header('Access-Control-Allow-Origin: *');
  7. echo 'CORS: 跨域请求成功';

跨域请求：ajax-post-cors

  1.     <button>ajax-post-cors</button>
  2.     <p class="tips"></p>
  4.     <script>
  5.       // post 也可以跨域
  6.       const btn = document.querySelector("button");
  7.       const tips = document.querySelector(".tips");
  8.       btn.onclick = (ev) => {
  9.         // 1. 创建 xhr 对象
  10.         const xhr = new XMLHttpRequest();
  11.         // 2. 配置 xhr 参数
  12.         xhr.open("post", "http://world.io:8088/cors2.php");
  13.         // 3. 处理 xhr 响应：
  14.         //成功
  15.         xhr.onload = () => (tips.innerHTML = xhr.response);
  17.         //失败
  18.         //xhr.onerror = () => console.log("Error");
  19.         // 4. 发送 xhr 请求：
  20.         let formData = new FormData();
  21.         formData.append("email","admiin@php.cn");
  22.         formData.append("password","123456");
  23.         xhr.send(formData);
  24.       };
  25.     </script>

服务器端 cors2.php

  1. <?php
  2. //在服务器端开启跨域许可
  3. header('Access-Control-Allow-Origin: http://hello.io:8088');
  4. // *:任何来源都允许访问
  5. // header('Access-Control-Allow-Origin: *');
  7. print_r($_POST);

jsonp

  1.     <button>jsonp-cors</button>
  2.     <p></p>
  3.     <script>
  4.         // jsonp: JSON with padding (将json填充进来)
  5.         // jsonp: 读作：json padding,别读： json 屁
  6.         // jsonp 看上去与 json 很像，是的
  7.         // jsonp:只是将json数据包含在一个函数调用中
  8.         // jsonp:callback({"id":1,"name":"admin"});
  9.         // jsonp：包括两部分：回调函数 + json数组
  10.         // 回调函数：请求接收到响应时回调的函数，可动态设置
  11.         // 回调参数：做为参数传递能函数的json数据
  12.         // jsonp 巧妙的利用了script标签发起的请求不受跨域限制的特征
  13.         // 将跨域请求的URL作为script的src属性值，实现不需要服务器授权的跨域请求
  14.         // jsonp 只能完成get请求
  16.         //---------------
  18.         // 1. jsonp原理
  19.         function getUser(data){
  20.             console.log(data);
  21.             let user=data.name+":"+data.email;
  22.             document.querySelector("p").innerHTML = user;
  23.         }
  25.         // getUser({"name":"tp","email":"tp@php.nc"});
  27.         // 将这个json从服务器上获取
  28.         // 从前端将这个需要调用的函数名称告诉服务器上的php，让php动态生成一个函数调用语句并返回
  29.         // 从服务器返回函数调用语句：`getUser({"name":"tp","email":"tp@php.nc"});`
  31.         const btn = document.querySelector("button");
  32.         btn.onclick = ()=>{
  33.             //1. 动态生成一个允许跨域请求的html元素
  34.             let script = document.createElement("script");
  35.             //2. 将跨域请求的url添加到src属性中
  36.             script.src = "http://world.io:8088/cors3.php?callback=getUser";
  37.             //3. 将script挂载到页面中
  38.             document.body.insertBefore(script,document.body.firstElementChild);
  39.         }
  40.     </script>

服务器端 cors3.php

  1. <?php
  2. //jsonp 不需要授权给前端
  3. //只要返回一个使用json作为参数的函数调用语句就可以
  4. //将前端需要的数据以json格式放到这个函数的参数中
  5. //必须要知道前端js调用的函数名
  6. $callback = $_GET['callback'];
  7. //服务器中需要返回的数据
  8. $data = '{"name":"tp","email":"tp@php.nc"}';
  9. $data = '{"name":"MJ","email":"MJ@php.nc"}';
  11. // getUser({"name":"tp","email":"tp@php.nc"});
  13. echo $callback . "(" . $data. ")";

总结：ajax重中之重。

上一条：数组常用方法、Json字符串和Ajax异步提交下一条：仿京东首页
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多