search

博客列表 >数组-JSON-ajax请求-跨域-jQuery

数组-JSON-ajax请求-跨域-jQuery

葡萄枝子
葡萄枝子原创
2021年01月10日 00:48:18762浏览

数组-JSON-ajax请求-跨域-jQuery

  1. 自选10个数组函数进行练习;
  2. 实例演示JSON二个函数,以及所有参数的功能;
  3. 熟练使用get,post发起ajax请求;
  4. 理解跨域的原理，并写出cors,jonp的源码并做出总结;
  5. 预习jQuery和Vue知识;

1. 自选10个数组函数进行练习

  1. let res, arr = ['a', 'b', 1, 2, 3], obj;
  3. // 1. push 入栈|出栈
  4. // 入栈，数组尾部入栈
  5. // res  = 入栈后元素总个数
  6. res = arr.push(4, 5);
  7. // 7 "a,b,1,2,3,4,5"
  8. console.log(res, arr.join());
  10. // 2. pop 出栈，数组后添加的元素弹出
  11. // res = 出栈的元素
  12. res = arr.pop();
  13. // 5 "a,b,1,2,3,4"
  14. console.log(res, arr.join());
  16. // 3. unshift 入队，数组头部入队
  17. // res = 入队后元素总个数
  18. res = arr.unshift('x', 'y');
  19. // 8 "x,y,a,b,1,2,3,4"
  20. console.log(res, arr.join());
  22. // 4. shift 出队，数组先添加的元素出队
  23. // res = 出队的元素
  24. res = arr.shift();
  25. // x y,a,b,1,2,3,4
  26. console.log(res, arr.join());
  28. // 5. concat 数组合并
  29. arr = arr.concat(['x', 5], 6);
  30. // y,a,b,1,2,3,4,x,5,6
  31. console.log(arr.join());
  33. // 6. slice 按位置截取数组
  34. arr = arr.slice(1, -2);
  35. // a,b,1,2,3,4,x
  36. console.log(arr.join());
  38. // 7. splice 从位置删除数量个数组，并插入新的元素填充删除的元素
  39. // res = 被删除的元素数组
  40. res = arr.splice(2, 4, 'a', ...['b','c']);
  41. // 1,2,3,4 a,b,a,b,c,x
  42. console.log(res.join(), arr.join());
  44. // 8. sort 排序
  45. // 数字倒序
  46. res.sort((a, b) => b - a);
  47. // 字母升序
  48. arr.sort();
  49. // 4,3,2,1 a,a,b,b,c,x
  50. console.log(res.join(), arr.join());
  52. // 9. map 遍历
  53. arr = arr.map(v => v + v);
  54. // aa,aa,bb,bb,cc,xx
  55. console.log(arr.join());
  57. // 10. filter 过滤
  58. res = res.filter(v => v % 2);
  59. // 返回奇数 3,1
  60. console.log(res.join());
  62. // 11. reduce 归内
  63. arr = [1, 2, 3, 4];
  64. res = arr.reduce((p, n) => p + n, 5);
  65. // 5为累加初始值，数组求和，返回 15
  66. console.log(res);

数组函数

2. 实例演示JSON二个函数,以及所有参数的功能

  • JSON.stringify 将 js 数据序列化为 json 字符串
  1. arr = ['x', 'y', 1, 2];
  2. obj = { a: 'x', b: 'y', c: 1, d: 2 };
  4. // 数组转 json
  5. jsonArr = JSON.stringify(arr);
  6. // ["x","y",1,2]
  7. console.log(jsonArr);
  9. // 函数排除数组键值从2开始的
  10. jsonArr1 = JSON.stringify(arr, (k, v) => {
  11.     if (k > 1) return undefined;
  12.     return v;
  13. });
  14. // ["x","y",null,null]
  15. console.log(jsonArr1);
  17. // 对象转 json
  18. jsonObj = JSON.stringify(obj);
  19. // {"a":"x","b":"y","c":1,"d":2}
  20. console.log(jsonObj);
  22. // 按索引保留键名 a, b, c 的
  23. jsonOjb1 = JSON.stringify(obj, ['a', 'b', 'c']);
  24. // {"a":"x","b":"y","c":1}
  25. console.log(jsonOjb1);
  27. // 函数排除键名是 c 和或值是 2 的
  28. jsonOjb2 = JSON.stringify(obj, (k, v) => {
  29.     if (k === 'c' || v === 2) return undefined;
  30.     return v;
  31. }, 2);
  32. // 返回
  33. // {
  34. //   "a": "x",
  35. //   "b": "y"
  36. // }
  37. console.log(jsonOjb2);

js序列化json

  • JSON.parse 解析 json 字符串为 js 对象
  1. let json1 = `["x", "y", 1, 2]`;
  2. let json2 = `{"a": "x", "b": "y", "c": 1, "d": 2}`;
  4. let arr1 = JSON.parse(json1);
  5. // ["x", "y", 1, 2]
  6. console.log(arr1);
  7. let arr2 = JSON.parse(json1, (k, v) => {
  8.     if (v === 1) return 2;
  9.     if (v === 'y') return 'x';
  10.     return v;
  11. });
  12. // ["x", "x", 2, 2]
  13. console.log(arr2);
  15. let obj1 = JSON.parse(json2);
  16. // {a: "x", b: "y", c: 1, d: 2}
  17. console.log(obj1);
  18. let obj2 = JSON.parse(json2, (k, v) => {
  19.     if (k === 'a') return 'a';
  20.     if (v === 'y') return 'b';
  21.     return v;
  22. });
  23. // {a: "a", b: "b", c: 1, d: 2}
  24. console.log(obj2);

json解析js

3. 熟练使用get,post发起ajax请求

  • head 中添加 style 样式
  1. <style>
  2.     #form {
  3.         width: 20em;
  4.         margin: 2em auto;
  5.         display: grid;
  6.         grid-template-columns: 5em 1fr;
  7.         gap: .5em;
  8.     }
  9.     #form>button,
  10.     #form>.tips {
  11.         grid-area: auto / 2;
  12.     }
  13. </style>
  • body 下添加 get|post 请求表单
  1. <form action="" id="form">
  2.     <label for="select">ID</label>
  3.     <select name="select" id="select">
  4.         <option value="1" selected>1</option>
  5.         <option value="2">2</option>
  6.         <option value="3">3</option>
  7.     </select>
  8.     <button class="btn-get">ajax-get</button>
  9.     <p class="tips tipGet"></p>
  10.     <label for="email">email</label>
  11.     <input type="email" name="email" id="email" />
  12.     <label for="password">password</label>
  13.     <input type="password" name="password" id="password" />
  14.     <button class="btn-post">ajax-post</button>
  15.     <p class="tips tipPost"></p>
  16. </form>
  • 上面 form 表单后面，续写 js 
  1. <script>
  2.     // form 表单
  3.     const form = document.forms.namedItem('form');
  4.     // get 按钮
  5.     const btnGet = document.querySelector('.btn-get');
  6.     // post 按钮
  7.     const btnPost = document.querySelector('.btn-post');
  8.     // get ajax 提示消息
  9.     const tipGet = document.querySelector('.tipGet');
  10.     // post ajax 提示消息
  11.     const tipPost = document.querySelector('.tipPost');
  13.     // get ajax 请求
  14.     btnGet.onclick = ev => {
  15.         // 阻止默认提交
  16.         ev.preventDefault();
  17.         // 创建对象
  18.         const xhr = new XMLHttpRequest();
  19.         // 配置参数
  20.         xhr.open('get', 'ajax/test1.php?id='+ form.select.value);
  21.         // 处理请求
  22.         xhr.onload = () => {
  23.             // json 格式数据解析为 js 对象
  24.             let res = JSON.parse(xhr.response);
  25.             tipGet.innerHTML = `${res.name} ( ${res.email} )`;
  26.         };
  27.         // 发送请求
  28.         xhr.send(null);
  29.     }
  31.     // post ajax 请求
  32.     btnPost.onclick = ev => {
  33.         // 阻止默认提交
  34.         ev.preventDefault();
  35.         // 创建对象
  36.         const xhr = new XMLHttpRequest();
  37.         // 配置参数
  38.         xhr.open('post', 'ajax/test2.php');
  39.         // 处理请求
  40.         xhr.onload = () => {
  41.             // 输出提示字符串
  42.             tipPost.innerHTML = `${xhr.response}`;
  43.         };
  44.         // 发送请求
  45.         xhr.send(new FormData(form));
  46.     }
  47. </script>

  • 用于 get 请求的 ajax/test1.php 和 ajax/test2.php 是默认的

  • ajax/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. ];
  9. // 查询条件
  10. $id = $_GET['id'];
  12. // 在id组成的数组中查询是否存在指定的id,并返回对应的键名
  13. $key = array_search($id,array_column($users,'id'));
  15. // 根据键名返回指定的用户信息
  16. echo json_encode($users[$key]);
  • ajax/test2.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. ];
  9. // 将通过post获取的数据保存到临时变量中
  10. $email = $_POST['email'];
  11. $password = md5($_POST['password']);
  14. // 使用数组过滤器查询是否存在指定的用户并返回结果
  15. $res = array_filter($users,function($user) use ($email,$password){
  16.     return $user['email'] === $email && $user['password'] === $password;
  17. });
  19. // 将结果做为请求响应返回到前端 
  20. echo count($res) === 1 ? '验证成功' : '验证失败';
  • 分别点击 ajax-get 和 ajax-post 按钮，分别发送 get 和 post 请求图

get-post请求

4. 理解跨域的原理，并写出cors,jonp的源码并做出总结

  • cors跨域：不同源的请求，跨协议|域名|端口的请求，需服务器端请求的文件开启跨域许可。

  • jsonp跨域：跨域标签实现，link 的 href，img 的 src，script 的 src ，a 标签的 href 等来实现。

    • jsonp跨域，可以不需要服务器端请求的文件开启跨域许可。
    • jsonp跨域，前端一个调用函数，把函数名告诉服务器端，服务器端把 json 格式数据填充进前端告诉它的函数名，进行动态输出。

4.1 cors跨域

  • cors get 跨域，body 中添加代码
  1. <!-- cors get 跨域请求 -->
  2. <button class="btn-cors-get">cors-get-ajax</button>
  3. <p class="cors-get-tip"></p>
  4. <script>
  5.     const btnCorsGet = document.querySelector('.btn-cors-get');
  6.     const corsGetTip = document.querySelector('.cors-get-tip');
  7.     btnCorsGet.onclick = ev => {
  8.         let xhr = new XMLHttpRequest();
  9.         xhr.open('get', 'http://wordpress/cors.php?cors=Get跨域');
  10.         xhr.onload = () => {
  11.             corsGetTip.innerHTML = xhr.response;
  12.         }
  13.         xhr.send();
  14.     }
  15. </script>
  • cors post 跨域，body 中添加代码
  1. <!-- cors post 跨域请求 -->
  2. <form action="" name="form2">
  3.     <p><input type="text" name="text" value="post跨域"></p>
  4.     <button class="btn-cors-post">cors-post-ajax</button>
  5.     <p class="cors-post-tip"></p>
  6. </form>
  7. <script>
  8.     const corsForm = document.forms.namedItem('form2');
  9.     const btnCorsPost = document.querySelector('.btn-cors-post');
  10.     const corsPostTip = document.querySelector('.cors-post-tip');
  11.     btnCorsPost.onclick = ev => {
  12.         ev.preventDefault();
  13.         let xhr = new XMLHttpRequest();
  14.         xhr.open('post', 'http://wordpress/cors.php');
  15.         xhr.onload = () => {
  16.             corsPostTip.innerHTML = xhr.response;
  17.         }
  18.         xhr.send(new FormData(corsForm));
  19.     }
  20. </script>
  1. <?php
  2. header('Access-Control-Allow-Origin: *');
  3. if (isset($_GET) && $_GET) print_r($_GET);
  4. if (isset($_POST) && $_POST) print_r($_POST);
  • 分别点击 cors-get-ajax 和 cors-post-ajax 返回结果图

cors跨域

4.2 jsonp跨域

  1. <!-- jsonp 跨域请求 -->
  2. <form action="" name="form3">
  3.     <p><input type="text" name="qq" value="" placeholder="QQ"></p>
  4.     <button class="btn-qq">jsonp-qq</button>
  5.     <p class="qq-tip"></p>
  6. </form>
  7. <script>
  8.     const qqForm = document.forms.namedItem('form3');
  9.     const btnQq = document.querySelector('.btn-qq');
  10.     const qqTip = document.querySelector('.qq-tip');
  11.     // 构造函数
  12.     function pt() {}
  13.     // 原型方法
  14.     pt.setHeader = function(data){
  15.         qqTip.innerHTML = data[qqForm.qq.value];
  16.     }
  17.     // qq 头像请求路径
  18.     // https://ptlogin2.qq.com/getface?appid=1006102&imgtype=3&uin=1000001
  19.     // 服务器返回数据，像上面原型方法
  20.     // pt.setHeader({"1000001":"https://thirdqq.qlogo.cn/g?b=sdk&k=UdD53CG0XibTPCJg5OPj5JQ&s=100&t=0"});
  21.     btnQq.onclick = ev => {
  22.         // 禁止默认提交
  23.         ev.preventDefault();
  24.         // 1. 动态生成一个允许跨域请求的html元素
  25.         let script = document.createElement('script');
  26.         // 2. 将跨域请求的url添加到src属性上
  27.         script.src = 'https://ptlogin2.qq.com/getface?appid=1006102&imgtype=3&uin='+ qqForm.qq.value;
  28.         // 3. 将script挂载到页面中
  29.         document.body.insertBefore(script, document.body.firstElementChild);
  30.     }
  31. </script>

5. 预习jQuery和Vue知识

上一条：Vue自学：v-if和v-else的使用下一条：深入理解js变量于函数基础
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多