收藏
天蓬老师批改状态：合格
老师批语：
<script>// 1.栈方法// 栈：后进先出// 队:先进先出let arr = [];let res;// 1. push();pop():在数组的尾部增删res = arr.push(1, 2, 3);console.log(arr.pop());console.log(arr.pop());console.log(arr.pop());console.log("%c----", "color:red");// 2. unshift(),shift()：在数组的头部进行增删// console.log(arr.unshift(4, 5, 6));res = arr.unshift(4, 5, 6);console.log(arr.shift());console.log(arr.shift());console.log(arr.shift());console.log("%c----", "color:red");// 3. push()+shift()：模拟队列，尾部进入，头部出去res = arr.push(1, 2, 3);console.log(arr.shift());console.log(arr.shift());console.log(arr.shift());console.log("%c----", "color:red");// 4. pop()+unshift()：模拟队列，头部进入，尾部出去res = arr.unshift(1, 2, 3);console.log(arr.pop());console.log(arr.pop());console.log(arr.pop());console.log("%c----", "color:red");// 5. join()：将数组转为字符串返回arr = ["电脑", "手机", "相机"];res = arr.join("---");console.log(res);console.log("%c----", "color:red");// 6. concat()数组合并console.log([1, 2, 3].concat([4, 5, 6], [7, 8, 9]));console.log("%c----", "color:red");// 7.slice()：返回数组中的部分成员arr = [1, 2, 3, 4, 5];// 取最后二个数字console.log(arr.slice(3));console.log("%c----", "color:red");// 8. splice （开始索引，删除数据，插入数据...） ：数组的增删改arr = [1, 2, 3, 4, 5, 6];// 删除res = arr.splice(2);console.log(arr);// 更新arr = [1, 2, 3, 4, 5, 6];res = arr.splice(1, 2, ...[88, 99]);console.log(arr);// 新增：将第二个参数设置为0arr = [1, 2, 3, 4, 5];res = arr.splice(1, 0, ...[88, 99]);console.log(arr);console.log("%c----", "color:red");// 9. sort()排序：默认是字母表顺序arr = ["p", "b", "a"];console.log(arr);arr.sort();console.log(arr);console.log("%c----", "color:red");// 10. map遍历:有返回值arr = [1, 2, 3, 4, 5, 6];res = arr.map((item) => item);console.log(res);console.log("%c----", "color:red");// 11. filter() 过滤arr = [1, 2, 3, 4, 5];res = arr.filter((item) => !(item % 2));console.log(res);console.log("%c----", "color:red");// 12. redice(callback(prev,curr)):归并arr = [1, 2, 3, 4, 5];res = arr.reduce((prev, curr) => {return prev + curr;});console.log(res);</script>
JSON.stringify()：将 js 数据序列化为 json 字符串
<script>// Array,objecyconsole.log(JSON.stringify([1, 2, 3]));console.log(JSON.stringify({ a: 3, b: 2, c: 3 }));// 函数console.log(JSON.stringify({ a: 1, b: 2, c: 3 }, (k, v) => {// 将需要过滤掉的数据直接返回undefinedif (v < 2) return undefined;return v;}));// 格式化输出json字符串console.log(JSON.stringify({ a: 1, b: 2, c: 3 }, null, "---"));console.log(obj);</script>
JSON.parse(): 解析 json 字符串为 js 对象
<script>let obj = JSON.parse(`{"a":1,"b":2,"c":3}`);console.log(obj.a, obj.b, obj.c);// 第二个参数可以对json的数据进行处理后再返回obj = JSON.parse(`{"a":1,"b":2,"c":3}`, (k, v) => {if (k === "") return v;return v * 2;});console.log(obj);</script>
<button>ajax-get请求</button><p></p><script>const btn = document.querySelector("button");btn.onclick = () => {const xhr = new XMLHttpRequest();xhr.responseType = "json";xhr.open("get", "test1.php?id=2");xhr.onload = () => {console.log(xhr.response);let user = `姓名：${xhr.response.name}，邮箱：${xhr.response.email}`;document.querySelector("p").innerHTML = user;};xhr.onerror = () => console.log("error");xhr.send(null);};</script>
ajax-get 请求 PHP 代码
<?php// 以二维数组模拟数据表信息$users = [['id'=>1, 'name'=>'天蓬','email'=>'tp@php.cn','password' => md5('123456')],['id'=>2, 'name'=>'灭绝','email'=>'mj@php.cn','password' => md5('abc123')],['id'=>3, 'name'=>'西门','email'=>'xm@php.cn','password' => md5('abc888')],];// 查询条件$id = $_GET['id'];// 在id组成的数组中查询是否存在指定的id,并返回对应的键名$key = array_search($id,array_column($users,'id'));// 根据键名返回指定的用户信息echo json_encode($users[$key]);
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>ajax-post请求</title></head><style>.login {width: 20em;border: 1px solid;padding: 0 1em 1em;background-color: lightcyan;margin: 2em auto;display: grid;place-items: center;}.login form {display: grid;grid-template-columns: 3em 1fr;gap: 1em 0;}/* 按钮与提示信息显示在第二列 */.login form button,.tips {grid-area: auto / 2;}</style><body><div class="login"><form action="" method="POST"><label for="email">邮箱：</label><input type="email" name="email" id="email" /><label for="password">密码：</label><input type="password" name="password" id="password" /><button>提交</button><span class="tips"></span></form></div><script>const form = document.querySelector(".login form");const btn = document.querySelector(".login button");const tips = document.querySelector(".tips");btn.onclick = (ev) => {ev.preventDefault();const xhr = new XMLHttpRequest();xhr.open("post", "test2.php");xhr.onload = () => (tips.innerHTML = xhr.response);xhr.send(new FormData(form));};</script></body></html>
ajax-post 请求 PHP 代码：
<?php// print_r($_POST);// 使用二维数组模拟用户数据表信息$users = [['id'=>1, 'name'=>'天蓬','email'=>'tp@php.cn','password' => md5('123456')],['id'=>2, 'name'=>'灭绝','email'=>'mj@php.cn','password' => md5('abc123')],['id'=>3, 'name'=>'西门','email'=>'xm@php.cn','password' => md5('abc888')],];// 将通过post获取的数据保存到临时变量中$email = $_POST['email'];$password = md5($_POST['password']);// 使用数组过滤器查询是否存在指定的用户并返回结果$res = array_filter($users,function($user) use ($email,$password){return $user['email'] === $email && $user['password'] === $password;});// 将结果做为请求响应返回到前端echo count($res) === 1 ? '验证成功' : '验证失败';
cors 跨域：不同源的请求，跨协议|域名|端口的请求，需服务器端请求的文件开启跨域许可。
jsonp 跨域：跨域标签实现，link 的 href，img 的 src，script 的 src，a 标签的 href 等来实现
jsonp 跨域：可以不需要服务器端请求的文件开启跨域许可
jsonp 跨域：前端一个调用函数，把函数名告诉服务器端，服务器端把 json 格式数据填充前端告诉它的函数名，进行动态输出
<button>ajax-get-cors</button><p></p><script>const btn = document.querySelector("button");btn.onclick = (ev) => {const xhr = new XMLHttpRequest();xhr.open("get", "http://world.io/cors1.php");xhr.onload = () => (document.querySelector("p").innerHTML = xhr.response);xhr.send(null);};</script>
<?php// 在服务器端开启跨域许可// header ('Access-Control-Allow-Origin: http://hello.io');header ('Access-Control-Allow-Origin: *');// *:任何来源echo 'CORS：跨域请求成功';
<button>ajax-post-cors</button><p class="tips"></p><script>const btn = document.querySelector("button");const tips = document.querySelector(".tips");btn.onclick = (ev) => {const xhr = new XMLHttpRequest();xhr.open("post", "http://world.io/cors2.php");xhr.onload = () => (tips.innerHTML = xhr.response);let formData = new FormData();formData.append("email", "admin@php.cn");formData.append("password", "123456");xhr.send(formData);};</script>
<?phpheader ('Access-Control-Allow-Origin: *');// 返回前端post提交的数据print_r($_POST);
<button>jsonpadding-cors</button><p></p><script>function getUser(data) {console.log(data);let user = data.name + ":" + data.email;document.querySelector("p").innerHTML = user;}const btn = document.querySelector("button");btn.onclick = () => {let script = document.createElement("script");script.src = "http://world.io/cors3.php?callback=getUser";document.body.insertBefore(script, document.body.firstElementChild);};</script>
<?php// jsonp 不需要授权给前端// 只要返回一个使用json做为参数的函数调用语句就可以了// 将前端需要的数据以json格式放到这个函数的参数中就行了// 必须要知道前端js要调用的函数名称$callback = $_GET['callback'];// 服务器中需要返回的数量$data = '{ "name": "天蓬", "email": "tp@php.cn" }';$data = '{ "name": "灭绝", "email": "mj@php.cn" }';// 在后端生成一条js函数调用语句：getuser({ name: "天蓬老师", email: "tp@php.cn" });echo $callback . '(' .$data. ')';
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
