search

博客列表 >数组函数、json、ajax、cors跨域

数组函数、json、ajax、cors跨域

手机用户1576673622
手机用户1576673622原创
2021年04月04日 18:35:03505浏览

数组函数

  1.         // 栈方法
  2.         // 1 栈 ：最后进最先出
  3.         // 2 队 ：先进先出
  4.         let arr = []
  6.         // 栈 puse()  pop() 在尾部进行增删操作
  7.         // console.log(arr.push(5));
  8.         // console.log(arr.pop());
  10.         // 队 unshift() shift() 在数组的头部进行增删
  11.         // console.log(arr);
  12.         // console.log(arr.unshift(1, 2, 3, 4));
  13.         // console.log(arr.unshift(10));
  14.         // console.log(arr);
  15.         // console.log(arr.shift());
  16.         // console.log(arr.shift());
  18.         // push()+shift(): 模拟队列, 尾部进入,头部出去
  19.         //   console.log(arr);
  20.         //   console.log(arr.push(1, 2, 3));
  21.         //   console.log(arr);
  22.         //   console.log(arr.shift());
  23.         //   console.log(arr.shift());
  24.         //   console.log(arr.shift());
  25.         // pop()+unshift(): 模拟队列, 头部进入,尾部出去
  26.         //   console.log(arr);
  27.         //   console.log(arr.unshift(1, 2, 3));
  28.         //   console.log(arr);
  29.         //   console.log(arr.pop());
  30.         //   console.log(arr.pop());
  31.         //   console.log(arr.pop());
  33.         // 2。join() :与字符串的split（）相反，它能将数组转为字符串。
  34.         //   arr = ["道德经", "论语", "庄子"];
  35.         //   let res = arr.join("/")
  36.         //   console.log(res);
  37.         //    在js中字符串就是数组
  38.         //   let str = "hello";
  39.         //   console.log(str[0], str[1], str[2], str[3], str[4]);
  41.         // 3.concat()数组合并
  42.         //   console.log("hello".concat("word"));
  43.         //     也可以合并其他元素
  44.         //   console.log([1, 2, 3].concat(123, ["php", true], { x: 1, y: 2 }));
  46.         // 4. slice(): 返回数组中的部分成员（也可以用来创造一个数组的副本）
  47.         //   arr = [1, 2, 3, 4, 5];
  48.         //   let arr1 = arr;
  49.         //   console.log((arr1[1] = 800));
  50.         //   console.log(arr);
  51.         // 创建数组副本
  52.         //   res = arr.slice(0);
  53.         //   console.log(res);
  54.         //   res[1] = 888;
  55.         //   console.log(arr);
  56.         //   console.log(res);
  57.         // 取最后二个
  58.         //   console.log(arr.slice(3));
  59.         //   console.log(arr.slice(-2));
  61.         // 5. splice(开始索引,删除的数量,插入的数据...): 数组的增删改,它的本职工作是删除元素
  62.         arr = [1, 2, 3, 4, 5];
  63.         //  5.1 删除
  64.         res = arr.splice(2);
  65.         //  返回被删除的元素
  66.         //   console.log(res);
  67.         //  当前数组中仅有1,2
  68.         //   console.log(arr);
  70.         //  5.2 更新
  71.         arr = [1, 2, 3, 4, 5];
  72.         //   最好传入单值
  73.         res = arr.splice(1, 2, ...[88, 99]);
  74.         //   console.log(res);
  75.         //   console.log(arr);
  77.         //  5.3 新增
  78.         arr = [1, 2, 3, 4, 5];
  79.         //  将第二个参数设置为0,这样就不会有元素被删除
  80.         res = arr.splice(1, 0, ...[88, 99]);
  81.         //   console.log(res);
  82.         //   console.log(arr);
  84.         // 6. sort（） 排序
  85.         arr = ["p", "b", "a"];
  86.         console.log(arr);
  87.         // 默认按字母表顺序
  88.         arr.sort();
  89.         console.log(arr);
  90.         arr = [10, 9, 22, 4];
  91.         console.log(arr);
  92.         //   arr.sort();
  93.         arr.sort((a, b) => a - b);
  94.         console.log(arr);
  96.         // 7. 遍历
  97.         arr = [1, 2, 3, 4, 5];
  98.         // 没有返回值
  99.         arr.forEach(item => console.log(item));
  100.         console.log(res);
  101.         // map对数组每个成员都调用回调进行处理并返回这个数组
  102.         res = arr.map(item => item * 2);
  103.         console.log(res);
  105.         // 8. 过滤
  106.         arr = [1, 2, 3, 4, 5];
  107.         // 奇数取反
  108.         res = arr.filter(item => !(item % 2));
  109.         console.log(res);
  111.         // 9. 归内
  112.         //   reduce(callback(prev,curr))
  113.         arr = [1, 2, 3, 4, 5];
  114.         res = arr.reduce((prev, curr) => {
  115.             // console.log(prev, curr);
  116.             return prev + curr;
  117.         });
  118.         // 简写
  119.         res = arr.reduce((prev, curr) => prev + curr);
  120.         // 第二个参数是累加的初始值，字符串从空字符串开始
  121.         res = arr.reduce((prev, curr) => prev + curr, 5000);
  122.         console.log(res);

JSON的stringify(),parse()

  1.  <script>
  2.         // 1.JSON.stringify(data,replacer,space):讲js数据转为json
  3.         //   在json中都是字符串
  4.         console.log(JSON.stringify(3.55), typeof JSON.stringify(3.55));
  5.         console.log(JSON.stringify("php.cn"), typeof JSON.stringify("php.cn"));
  6.         //   以下不加双引号
  7.         console.log(JSON.stringify(true), typeof JSON.stringify(true));
  8.         console.log(JSON.stringify(null), typeof JSON.stringify(null));
  9.         // array, object （数组，对象）
  10.         // json对象的属性必须加双引号,字符串也必须加双引号
  11.         console.log(
  12.             JSON.stringify({ x: "a", y: "b" }),
  13.             typeof JSON.stringify({ x: "a", y: "b" })
  14.         );
  15.         console.log(JSON.stringify([1, 2, 3]), typeof JSON.stringify([1, 2, 3]));
  16.         // json其实不是数据类型,只是一个具有特殊格式的字符串而已
  18.         // 会对json格式字符串的特殊操作,主要通过后面二个参数
  20.         // 第二个参数支持数组 和 函数
  21.         //   数组
  22.         console.log(JSON.stringify({ a: 1, b: 2, c: 3 }));
  23.         console.log(JSON.stringify({ a: 1, b: 2, c: 3 }, ["a", "b"]));
  24.         //   函数
  25.         console.log(
  26.             JSON.stringify({ a: 1, b: 2, c: 3 }, (k, v) => {
  27.                 // 将需要过滤掉的数据直接返回undefined（json不支持undefined）
  28.                 if (v < 2) return undefined;
  29.                 return v;
  30.             })
  31.         );
  32.         // 第三个参数,用来格式化输出的json字符串
  33.         console.log(JSON.stringify({ a: 1, b: 2, c: 3 }, null, 2));
  34.         console.log(JSON.stringify({ a: 1, b: 2, c: 3 }, null, "****"));
  36.         // 2. JSON.parse(str,reviver),将json转为js对象
  37.         let obj = JSON.parse(`{"a":1,"b":2,"c":3}`);
  38.         console.log(obj, typeof obj);
  39.         console.log(obj.a, obj.b, obj.c);
  40.         // 第二个参数可以对json的数据进行处理后再返回
  41.         obj = JSON.parse(`{"a":1,"b":2,"c":3}`, (k, v) => {
  42.             // json对象是由内向外解析
  43.             if (k === "") return v;
  44.             return v * 2;
  45.         });
  46.         console.log(obj);
  47.     </script>

ajax

  • get请求

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

  • post请求

    1.   <script>
    2.       // 拿到数据
    3.       const form = document.querySelector(".login form");
    4.       const btn = document.querySelector(".login button");
    5.       const tips = document.querySelector(".tips");
    7.       // 通过FormData() 拿数据
    8.       //   let data = new FormData();
    9.       //   data.append("email", form.email.value);
    10.       //   data.append("password", form.password.value);
    11.       //   console.log(data.get("email"), data.get("password"));
    13.       btn.onclick = ev => {
    14.           ev.preventDefault();
    15.           // 1。 创建 xhr 对象：
    16.           const xhr = new XMLHttpRequest();
    17.           // 2。 配置 xhr 参数：
    18.           xhr.open("post", "test2.php");
    19.           // 3。 处理 xhr 响应：
    20.           xhr.onload = () => (tips.innerHTML = xhr.response)
    21.           // 4。 发送 xhr 请求：
    22.           xhr.send(new FormData(form))
    23.       }
    24.   </script>

cors跨域

它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。

  • get

js

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

php

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

js

  1.       const btn = document.querySelector("button");
  2.       const tips = document.querySelector(".tips");
  4.       btn.onclick = ev => {
  5.         // 1. 创建 xhr 对象:
  6.         const xhr = new XMLHttpRequest();
  7.         // 2. 配置 xhr 参数:
  8.         xhr.open("post", "http://world.io/cors2.php");
  9.         // 3. 处理 xhr 响应:
  10.         xhr.onload = () => (tips.innerHTML = xhr.response);
  11.         // 4. 发送 xhr 请求:
  12.         let formData = new FormData();
  13.         formData.append("email", "admin@php.cn");
  14.         formData.append("password", "123456");
  15.         xhr.send(formData);
  16.       };

php

  1. <?php 
  2. header('Access-Control-Allow-Origin: *');
  3. // 返回前端post提交的数据
  4. print_r($_POST);
  • jsonp

js

  1.       function getUser(data) {
  2.         console.log(data);
  3.         let user = data.name + ": " + data.email;
  4.         document.querySelector("p").innerHTML = user;
  5.       }
  7.       const btn = document.querySelector("button");
  8.       btn.onclick = () => {
  9.         // 1. 动态生成一个允许跨域请求的html元素
  10.         let script = document.createElement("script");
  11.         // 2. 将跨域请求的url添加到src属性上
  12.         script.src = "http://world.io/cors3.php?callback=getUser";
  13.         // 3. 将script挂载到页面中
  14.         document.body.insertBefore(script, document.body.firstElementChild);
  15.       };

php

  1. <?php 
  2. // jsonp 不需要授权给前端
  3. // 只要返回一个使用json做为参数的函数调用语句就可以
  4. // 将前端需要的数据以json格式放到这个函数的参数中就行了
  6. // 必须要知道前端js要调用 的函数名称
  7. $callback = $_GET['callback'];
  9. // 服务器中需要返回的数据
  10. $data = '{ "name": "天蓬", "email": "tp@php.cn" }';
  11. $data = '{ "name": "灭绝", "email": "mj@php.cn" }';
  13. // 在后端生成一条js函数调用语句: getUser({ name: "天蓬老师", email: "tp@php.cn" });
  15. echo $callback . '(' .$data. ')';
上一条：js作业一常识类下一条：js之作用域和闭包与原型
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多