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

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

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

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]
  9. arr = [6, 7, 8, 9];
  10. res = arr.splice(2, 3, 100, 200, 300);
  11. //数组插入任然是数组
  12. // res = arr.splice(2,3,[100,200,300]);
  13. //可以使用...rest语法展开数组
  14. // res = arr.splice(2,3,...[100,200,300]);
  15. console.log(res);
  16. //返回 [8, 9] 因为数组长度不够,后面的100,200,300并不是删除的部分
  17. console.log(arr);
  18. //返回[6, 7, 100, 200, 300] 原数组被替换了,多出来的300也作为成员被添加
  19. //将第二个参数设置为0 表示,删除数量为0,不删除。第三个及以后的参数就是新增的成员
  20. res = arr.splice(1, 0, ...[88, 99]);
  21. console.log(res);
  22. //返回[]空数组,因为没有要删除的成员
  23. console.log(arr);
  24. // 返回:[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);
  12. 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,外面也没有双引号
  10. //array, object
  11. // json对象的属性必须加双引号,字符串也必须加双引号,最后一个没有逗号
  12. console.log(
  13. JSON.stringify({ x: "a", y: "b" }),
  14. typeof JSON.stringify({ x: "a", y: "b" })
  15. );
  16. console.log(
  17. JSON.stringify([1, 2, 3, "a"]),
  18. typeof JSON.stringify([1, 2, 3, "a"])
  19. );
  20. //数组和对象:object
  21. // json 其实不是数据类型,只是一个具有特殊格式的字符串而已
  22. // 会对json格式字符串的特殊操作,主要通过后面的第二个参数
  23. // 第二个参数支持数组 和 函数
  24. // 第三个参数用来格式化输出json字符串
  25. // 数组
  26. console.log(JSON.stringify({ x: "a", y: "b", z: "c" }));
  27. console.log(JSON.stringify({ x: "a", y: "b", z: "c" }, ["x", "y"]));
  28. // 返回:{"x":"a","y":"b"}
  29. // 返回内容只解析了第二个参数给定的两个值,有点像解构
  30. //函数
  31. console.log(
  32. JSON.stringify({ x: 1, y: 2, z: 3 }, (k, v) => {
  33. //将需要过滤掉的数据直接返回undefined
  34. if (v < 2) return undefined;
  35. return v;
  36. })
  37. );
  38. // 返回 {"y":2,"z":3}
  39. console.log(JSON.stringify({ x: 1, y: 2, z: 3 }, null, 2));
  40. //返回
  41. //{
  42. // "x": 1,
  43. // "y": 2,
  44. // "z": 3
  45. //}
  46. console.log(JSON.stringify({ x: 1, y: 2, z: 3 }, null, "***"));
  47. //返回
  48. //{
  49. //***"x": 1,
  50. //***"y": 2,
  51. //***"z": 3
  52. //}
  53. //2. JSON.parse(str,reviver),将json转为js对象,
  54. //第二个参数可以对json的数据进行处理后再返回,
  55. let obj = JSON.parse(`{"x": 1,"y": 2,"z": 3}`);
  56. console.log(obj, typeof obj);
  57. console.log(obj.x, obj.y, obj.z);
  58. obj = JSON.parse(`{"x": 1,"y": 2,"z": 3}`, (k, v) => {
  59. //json对象是由内向外解析
  60. if (k === "") return v;
  61. return v * 2;
  62. });
  63. console.log(obj);
  64. //{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
  2. // 以二维数组模拟数据表信息
  3. $users = [
  4. ['id'=>1, 'name'=>'天蓬','email'=>'tp@php.cn','password' => md5('123456')],
  5. ['id'=>2, 'name'=>'灭绝','email'=>'mj@php.cn','password' => md5('abc123')],
  6. ['id'=>3, 'name'=>'西门','email'=>'xm@php.cn','password' => md5('abc888')],
  7. ];
  8. // 查询条件
  9. $id = $_GET['id'];
  10. // 在id组成的数组中查询是否存在指定的id,并返回对应的键名
  11. $key = array_search($id,array_column($users,'id'));
  12. // 根据键名返回指定的用户信息
  13. 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");
  45. // let data = new FormData();
  46. // data.append("email",form.email.value);
  47. // data.append("password",form.password.value);
  48. // console.log(data.get("email"),data.get("password"));
  49. btn.onclick = (ev) => {
  50. ev.preventDefault();
  51. // 1. 创建 xhr 对象
  52. const xhr = new XMLHttpRequest();
  53. // 2. 配置 xhr 参数
  54. xhr.open("post", "test2.php");
  55. // xhr.responseType = "json";
  56. // 3. 处理 xhr 响应:
  57. //成功
  58. xhr.onload = () => (tips.innerHTML = xhr.response);
  59. //失败
  60. // xhr.onerror = () => console.log("Error");
  61. // 4. 发送 xhr 请求:
  62. xhr.send(new FormData(form));
  63. };
  64. </script>
  65. </body>
  66. </html>

服务器端 test2.php

  1. <?php
  2. // print_r($_POST);
  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. ];
  9. // 将通过post获取的数据保存到临时变量中
  10. $email = $_POST['email'];
  11. $password = md5($_POST['password']);
  12. // 使用数组过滤器查询是否存在指定的用户并返回结果
  13. $res = array_filter($users,function($user) use ($email,$password){
  14. return $user['email'] === $email && $user['password'] === $password;
  15. });
  16. // 将结果做为请求响应返回到前端
  17. echo count($res) === 1 ? '验证成功' : '验证失败';

跨域请求:ajax-get-cors

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

服务器端cors1.php 文件

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

跨域请求:ajax-post-cors

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

服务器端 cors2.php

  1. <?php
  2. //在服务器端开启跨域许可
  3. header('Access-Control-Allow-Origin: http://hello.io:8088');
  4. // *:任何来源都允许访问
  5. // header('Access-Control-Allow-Origin: *');
  6. 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请求
  15. //---------------
  16. // 1. jsonp原理
  17. function getUser(data){
  18. console.log(data);
  19. let user=data.name+":"+data.email;
  20. document.querySelector("p").innerHTML = user;
  21. }
  22. // getUser({"name":"tp","email":"tp@php.nc"});
  23. // 将这个json从服务器上获取
  24. // 从前端将这个需要调用的函数名称告诉服务器上的php,让php动态生成一个函数调用语句并返回
  25. // 从服务器返回函数调用语句:`getUser({"name":"tp","email":"tp@php.nc"});`
  26. const btn = document.querySelector("button");
  27. btn.onclick = ()=>{
  28. //1. 动态生成一个允许跨域请求的html元素
  29. let script = document.createElement("script");
  30. //2. 将跨域请求的url添加到src属性中
  31. script.src = "http://world.io:8088/cors3.php?callback=getUser";
  32. //3. 将script挂载到页面中
  33. document.body.insertBefore(script,document.body.firstElementChild);
  34. }
  35. </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"}';
  10. // getUser({"name":"tp","email":"tp@php.nc"});
  11. echo $callback . "(" . $data. ")";

总结:ajax重中之重。

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议