数组/JSON/AJAX/跨域
16lz
2021-02-25
数组函数进行练习
<script>//1.栈方法let arr=[];//尾部添加console.log(arr.push(1,2,3));//出栈，从尾部一个一个进行弹出console.log(arr.pop());console.log(arr.pop());console.log(arr.pop());//最后返回空数组console.log(arr);//在头部添加删除console.log(arr.unshift(1,2,3));console.log(arr.shift());console.log(arr.shift());console.log(arr.shift());//返回空数组console.log(arr);//模拟队列，从尾部添加，从头部进去console.log(arr.push(1,2,3));console.log(arr.shift());console.log(arr.shift());consolt.log(arr.shift());//模拟队列，从头部添加，从尾部出去console.log(arr.unshift(1,2,3));console.log(arr.pop());console.log(arr.pop());console.log(arr.pop());//2.将数组转为字符串arr=["电脑","手机","相机"];//用括号里面的东西进行链接let res=arr.join("--");console.log(res);//字符串可以当数组let sss=hello;console.log(sss[0],sss[1],sss[2],sss[3],sss[4]);//3.数组合并console.log([1,2,3]).concat(123,"php",true,{x:1,y:2});//4.创建副本数组arr=[1,2,3,4];res=arr.slice(0);//替换res中的值不会影响到arr中的值res[1]=888;console.log(arr);console.log(res);//5.splice（：数组的增删）arr=[1,2,3];res=arr.splice(2,0,55,66);console.log(res);//6.排序arr=["c","q","a"];arr.sort();consolt.log(arr);arr=["7","1","2","6"];arr.sort((a,b)=>a-b);//7.遍历arr=[1,2,3,4];res=arr.map((item)=>item*2);console.log(res);//8.过滤不想要的数组arr=[1,2,3,4,5];//数组不能被2整除的数res=arr.filter((item)=>item%2);res=arr.filter((item)=>!(item%2));//9.归内arr=[1,2,3,4,5];res=arr.reduce((a,b)=>{console.log(a,b)return a+b;});//简写res=arr.reduce((a,b)=>a+b);//可以设置从几开始加res=arr.reduce((a,b)=>a+b,50);</script>
JSON的stringify(),parse()
<script>//stringify()，将js转为json，转化后格式都是字符串//字符串类型console.log(JSON.stringify(3.14),typeof JSON.stringify(3.14));//里面的字符串一定要加引号，不加会出错console.log(JSON.stringify("3.14"));//true不用加console.log(JSON.stringify(true));//复合类型//对象的属性必须加引号，转化后是字符串console.log(JSON.stringify({x:"a",t:"b"}));//数组转化后也是字符串console.log(JSON.stringify([1,2,3]))；//第二个参数//定义显示对象console.log(JSON.stringify({a:1,b:2,c:3,[a,b]}));//函数console.log(JSON.stringify({a:1,b:2,c:3}(e,v)=>{if(v<2)return undefined;return v;}));//第三个参数，定义输出前面的字符//下面的2代表加俩空格console.log(JSON.stringify({a:1,b:2},null,2));console.log(JSON.stringify(a:1.b:2},null,"-----"));2.JSON.parse（讲json转为js对象）let obg=JSON.parse('{a:1,b:2}');console.log(obg);//第二个参数可以让内容处理后在返回obg=JSON.parse('{a:1,b:2}',(k,y)=>{if(k==="")return y;return y*2;});console.log(obg);</script>
ajax的ger/post请求
1.ajax的ger请求，用于从后台调用数据到前提
<body><button> ajax-get请求</button><p></p><script>congst bth=documnt.querySelector("button");btn.onclick=()=>{//1.创建一个对象const xhr=new XMLHttpRequest();//2.配置对象参数，第一个参数是传递的类型，第二个请求是脚本地址xht.open("get","text1.php");//3.出来对象相应的返回的结果；’//成功就用onload加载出来xhr.onload=()=>{console.log(xhr.response);let user=`${xhr.response.name}(${xhr.response.email})`;document.querySelectio("P").innerHTML=user;};//失败xhr.onerror=()=>console.log("失败");//4.发送以上对象的请求，默认值是null，可以不写xhr.send(null);}</script></body>
2。Ajax-post请求,用于表单验证，后台表单数据调用
<body><div><h3>用户登录</h3><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("div>form");const bth=document.querySelector("div>form> button");const tips = document.querySelector("div>form>span");//四步曲bth.onclick=(ev)=>{//清除其默认行为，添加上postev.perventDefault();//1.创建对象const xhr=new XMLHttpRequest();//2.配置对象参数xhr.open("post","test2.php");}//3.处理对象相应xhr.onload=()=>(tips.innerHTML=xhr.respnse);//4.发送对象请求// 传数据类型，FormData是表单数据构造器，把当前数据通过对象的方式给做出来//会把表单的请求给数列化//直接括号通过表单拿到里面的所有数据xhr.send(new FormData(form));</script></body>
cors跨域
跨域的文件里面得加上
header(‘Access-Control-Allow-Origin: http://hello.io‘)
其中后面的地址部分可以换成*来代表允许任何来源跨域请求
1.ajax-get下的cors跨域
<body><button>按钮</button><p></p><script>const bth=document.querySelector("button");bth.onclic=(ev)=>{//1.创建对象const xhr=new XMLHttpRequest();//2.配置参数对象，因为是跨域请求，所以第二个参数改成跨的地址xhr.open("get","http://worid.io/cors1.php");xhr.onload=()=>(document.querySelector("p").innerHTML = xhr.response);xhr.send(null);}</script></body>
2.ajax-post下的cors跨域
<body><button>aiax-post-cors</button><p class="tips"></p><script>const bth = document.querySelector("button");const tips = document.querySelector(".tips");bth.onclick = (ev) => {const xhr = new XMLHttpRequest();//因为是跨域，所第二个参数提前文件的位置得用网站xhr.open("post", "http://worid.io/cors2.php");xhr.onload = () => (tips.innerHTML = xhr.response);//没表单，弄点加数据let formData = new FormData();formData.append("email", "a@qq.com");formData.append("password", "123456");xhr.send(formData);};</script></body>
3.jsonp-cors：在不允许的情况下来请求跨域文件的内容，通过script，a，img标签上的链接来绕着请求到，这中请求只能完成get请求，表单下不能用
<body><button>按钮</button><p></p><script>function getUser(data){console.log(data);let user=data.name+":"+data.email;document.querySelector("P").innerHTML=user;}//以上函数的调用后台getUser到p标签中const btn=document.querySelector("button");btn.onclick=()=>{//1.先动态生成一个允许跨域请求的HTML元素let script=document.createElement("script");//将跨域的URL地址写上，后面跟上我现在用的地址名称（随便写），后面写上弄好的函数名script.src="http://worid.io/cors3.php?callback=getUser";//3.将script挂在到页面中,查到前面去，不然容易出错//insertBefore插入到第一个去document.body.insertBefore(script, document.body.firstElementChild);}</script></body>
更多相关文章
- 数据结构与算法专题——第六题 树状数组
- 数据结构与算法专题——第一题 Bitmap算法
- PHP实现大文件断点下载
- 结构体作业讲解（零基础学习C语言）
- Python数据分析常用库有哪些?Python学习！
- 0129-数组的排序, 数组的合并, 数组成员的统计
- 第5章 0129-细说常用的数组函数，学习心得、笔记（数组的排序, 数组
- php数据类型与检测
- 指针经典笔试题解析（C语言）