本文详细介绍了Vue.js的基础知识，包括Vue实例化、生命周期、v-model、v-bind、v-on指令的使用，以及v-if和v-show的条件渲染，v-for的遍历机制。此外，还讨论了Vue中的侦听器、cookie、localStorage和sessionStorage的存储机制，以及JSON和计算属性的概念。最后，简要提及了事件冒泡和事件捕获，以及AJAX的基础概念和工作流程。
一，Vue的基本使用
基本框架
<body>
<div id="app">
<p> {{msg}} </p>
</div>
<!-- 导入vue.js -->
<script src="./vue.js"></script>
<script>
// <!-- 实例化一个vue -->
new Vue ({
// el获取数据
el:"#app",
// id选择器用#，class选择器用点.号
data:{
msg:"nice day"
}
})
</script>
</body>
el：挂载点
作用：指定vue对象的作用范围为某一标签及其内部的后代标签
data：数据对象
作用：存储vue对象使用的数据，作为声明式渲染的数据源
二，Vue的生命周期
Vue有八个生命周期
1.第一阶段（创建阶段）： beforeCreate，created
2.第二阶段（挂载阶段）： beforeMount，mounted
3.第三阶段（更新阶段）： beforeUpdate，updated
4.第四阶段（销毁阶段）： beforeDestroy，destroyed
<body>
<div class="eg">
{{message}}
</div>
<script src="./vue.js"></script>
<script>
new Vue({
el:".eg",
data:{
message:"math"
},
// 创建前
// 在实例完全被创建出来之前，Vue实例的挂载元素el和数据对象data都为undefined，还未初始化。
beforeCreate(){
console.log("beforeCreate");
},
// 创建后
// 数据对象data已存在，可以调用methods中的方法，操作data中的数据，但dom未生成，$el未存在。
created(){
console.log("created");
},
// 挂载前
// Vue实例的$el和data都已初始化，挂载之前为虚拟的dom节点，模板已经在内存中编辑完成了。但是尚未把模板渲染到页面中。
beforeMount(){
console.log("beforeMount");
},
// 挂载后
// vue 实例挂载完成，data.message 成功渲染。内存中的模板，已经真实的挂载到了页面中，
// 用户已经可以看到渲染好的页面了。实例创建期间的最后一个生命周期函数，
// 当执行完 mounted 就表示，实例已经被完全创建好了，DOM 渲染在 mounted 中就已经完成了。
mounted(){
console.log("mounted");
},
// 更新前
// 当 data 变化时，会触发beforeUpdate方法 。data 数据尚未和最新的数据保持同步。
beforeUpdata(){
console.log("beforeUpdata");
},
// 更新后
// 当 data 变化时，会触发 updated 方法。页面和 data 数据已经保持同步了。
updated(){
console.log("updated");
},
// 销毁前
//组件销毁之前调用 ，在这一步，实例仍然完全可用。
beforeDestroy(){
console.log("beforeDestroy");
},
// 销毁后
// 组件销毁之后调用，对 data 的改变不会再触发周期函数，vue 实例已解除事件监听和 dom绑定，但 dom 结构依然存在。
destroyed(){
console.log("destroyed");
}
})
</script>
</body>
三,v-model指令
v-model指令可以在表单 input、textarea以及select元素上创建双向数据绑定它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖，它负责监听用户的输入事件来更新数据，并在某种极端场景下进行一些特殊处理；
<body>
<div id="app">
<!-- 输入框 -->
<input type="text" v-model="msg">
<!-- {{msg}} -->
<!-- 下拉框 -->
<select v-model="name">
<option value="dandan">丹丹</option>
<option value="xiaomin">小敏</option>
<option value="lili">莉莉</option>
</select>
<!-- 复选框 -->
<input type="checkbox" v-model="box">
</div>
<script src="./vue.js"></script>
<script>
new Vue({
el:"#app",
data:{
msg:"请输入内容",
name:"",
box:""
}
})
</script>
</body>
四，v-bind跳转指令
<body>
<div id="app">
<a href="https://www.youkuaiyun.com/">跳转到csdn</a>
<a v-bind:href="url">跳转</a>
<button @click="change" target="_blank">改变网址</button>
</div>
<script src="./vue.js"></script>
<script>
new Vue({
el:"#app",
data:{
url:"https://www.baidu.com/"
},
methods:{
change(){
this.url="https://www.youkuaiyun.com/"
}
}
})
</script>
</body>
第一个链接点击可以跳转到csdn，第二个链接点击可以跳转到百度网址，如果按改变网址这个按钮，就可以点击跳转到csdn这个网址，后面又会变回百度这个网址的链接。
v-model和v-bind，v-on的区别
1.v-model用来进行data数据与页面数据的双向绑定。主要用于表单控件，被称为双向绑定
2.v-bind是data数据对页面标签中属性的绑定。被称为单向绑定
3.v-on是methods对页面事件的绑定。
五、v-if的使用
v-if用于条件判断，判断Dom元素是否显示。
<body>
<div id="app">
<!-- 多分支 -->
<h1>成绩分布</h1>
<div v-if="score >=90">超优秀</div>
<div v-else-if="score >=80">优秀</div>
<div v-else-if="score >=60">一般</div>
<div v-else="score <60&&>0">不及格</div>
<hr>
<!-- 双分支 -->
<div v-if="age>=18">成年</div>
<div v-else>未成年</div>
</div>
<script src="./vue.js"></script>
<script>
new Vue({
el:"#app",
data:{
score:92,
age:20
}
})
</script>
</body>六、v-show的使用
<body>
<div id="app">
<!-- 多分支 -->
<h1>成绩分布</h1>
<div v-show="score >=90">超优秀</div>
<div v-show="score >=80">优秀</div>
<div v-show="score >=60">一般</div>
<div v-show="score <60">不及格</div>
<hr>
<!-- 双分支 -->
<div v-show="age>=18">成年</div>
<div v-show="age<18">未成年</div>
</div>
<script src="./vue.js"></script>
<script>
new Vue({
el:"#app",
data:{
score:78,
age:20
}
})
</script>
</body>七、v-if和v-show的区别
1.原理
v-show指令：元素始终被渲染到HTML，它只是简单的伪元素设置css的style属性，当不满足条件的元素被设置style=“display：none”的样，是通过修改元素的的CSS属性(display)来决定实现显示还是隐藏
v-if指令：满足条件是会渲染到html中，不满足条件时是不会渲染到html中的，是通过操纵dom元素来进行切换显示
2.应用场景
v-if需要操作dom元素，有更高的切换消耗，v-show只是修改元素的的CSS属性有更高的初始渲染消耗，如果需要非常频繁的切换，建议使用v-show较好，如果在运行时条件很少改变，则使用v-if较好
八、v-for遍历
遍历普通数组
语法 : v-for="(item,index) in array"
item : 数组中的每一项
index : 索引值
如果只需要第一个参数item ,index可以不写,括号可以省略
<body>
<div id="app">
<ul>
<!-- in前边只写一个变量,变量中保存的是数据-->
<!-- <li style="color:red" v-for="item in array">{{item}}</li>-->
<!-- in前边写2个变量,第一个变量中保存的是数据,第二个变量中保存的是下标-->
<li style="color:red" v-for="(item,index) in array">{{item}} -- {{index}}</li>
</ul>
</div>
<script>
new Vue({
el:'#app',
data:{
array:['吃饭','睡觉','敲代码']
}
})
</script>
</body>遍历对象数组
语法 : v-for="(item,index) in array"
item : 数组中的每一项(每一个对象)
index : 索引值
如果只需要第一个参数item ,index可以不写,括号可以省略
<body>
<div id="app">
<table>
<thead>
<tr>
<th><input type="checkbox"></th>
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(item,index) in array">
<td><input type="checkbox"></td>
<td>{{index+1}}</td>
<td>{{item.name}}</td>
<td>{{item.age}}</td>
<td>{{item.sex}}</td>
<td>
<button>编辑</button>
<button>删除</button>
</td>
</tr>
</tbody>
</table>
</div>
<script>
new Vue({
el:'#app',
data:{
array:[
{
name:'小红',
age:21,
sex:'女'
},
{
name:'小黄',
age:21,
sex:'男'
},
{
name:'小蓝',
age:21,
sex:'男'
}
]
}
})
</script>
</body>遍历对象
语法 : v-for="(value,key,index) in obj"
value: 属性值
key : 属性
index : 索引值
如果只需要第一个参数value,那么key 和index可以不写,括号可以省略
<body>
<div id="app">
<ul>
<!-- in前边只写一个变量,变量中保存的是属性值-->
<!-- <li v-for="o1 in obj">{{o1}}</li>-->
<!-- in前边写2个变量,第一个变量中保存的是属性值,第二个变量中保存的是属性名-->
<!-- <li v-for="(o1,o2) in obj">{{o1}}--{{o2}}</li>-->
<!-- in前边写2个变量,第一个变量中保存的是属性值,第二个变量中保存的是属性名,第三个变量中保存的是下标-->
<li v-for="(o1,o2,o3) in obj">{{o1}}--{{o2}}--{{o3}}</li>
</ul>
</div>
<script>
new Vue({
el:'#app',
data:{
obj:
{
name:'小红',
age:21,
sex:'女'
}
}
})
</script>
</body>v-for中key的作用
Vue中为v-for提供了一个属性，key，在写v-for的时候，都需要给元素加上一个key属性，这个key属性必须是唯一的标识，并且给key赋值的内容不能是可变的。
vue不会去改变原有的元素和数据，而是创建新的元素然后把新的数据渲染进去
1. 提升v-for渲染的效率
2. 提高渲染性能
若对数据进行：逆序添加、逆序删除等破坏顺序操作， 会产生没有必要的真实DOM更新，虽然界面效果没问题, 但效率低。
3.避免数据混乱的情况出现
如果结构中还包含输入类的DOM： 会产生错误DOM更新 ，出现数据混乱。
九，侦听器的使用
Vue侦听器是提供给开发者可以用来监测某些数据的变化，一旦有变化就调用函数。
语法
new Vue({
el:'',
data:{},
methods:{},
//侦听器
//参数一：改变后的值
//参数二：改变前的值
watch:{
要侦听的数据(newValue,oldValue){
}
}
})
使用
<div id="app">
<button @click="msg ='word'"> 修改</button>
<p>{{ msg }}</p>
</div>
<script src="./vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
msg:'hello'
},
methods:{},
watch:{
//侦听的数据变化
//基本数据类型，
msg(newValue,oldValue){
//侦听到数据变化之后，需要完成的行为
console.log('数据改变',newValue,oldValue);
}
}
})
</script>
点击修改 hello变word
侦听器在数组中的使用
//对数组进行侦听
// 数组是引用类型，存在比较复杂的侦听类型。
// 从理论上说，修改一个数组的内容，比如修改数组中某个元素的值， 或者给数组添加新的元素，都不会修改数组本身的地址。
// 为此，Vue.js对数组做了特殊处理，使得使用标准的数组操作方法对数组所做的修改，都可以被侦听到。
总结
在数组中使用侦听器总结：
1.彻底替换为一个新数组，就可以被侦听到。
2.如果使用了push()等标准的数组操作方法，那么可以被侦听到。
3.如果直接修改数组的元素，那么无法被侦听到。
(解决方法：使用$set()方法修改元素的值。Vue3语法)不要使用length属性来改变数组长度，而改用其他标准方法显示数组长度的变化。
十、cookie的使用
一、cookie的使用场景：
1.记住密码，下次自动登录。
2.记录用户浏览数据，进行商品（广告）推荐二、特点：
1.cookie保存在浏览器端。
2.单个cookie保存的数据不能超过4KB
3.cookie中的数据是以域名的形式进行区分的
4.cookie中的数据是有过期时间的，超过时间数据会被浏览器自动删除
5.cookie中的数据会随着请求被自动发送到服务器端三、
由于cookie存储机制有很多缺点，HTML5不再使用它，转而使用改良后的WebStorage存储机制
WebStorage存储机制就是localStorage和sessionStorage
十一、localStorage
localStorage 用法及使用注意事项
localStorage 介绍
在HTML5中，为了解决cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)，增加了一个 localStorage，主要是用来作为本地存储的；localStorage 中一般浏览器支持的容量大小是5M，针对不同的浏览器，localStorage容量大小会有所不同。
localStorage 获取
//第一种方法读取
var a=storage.a;
console.log(a);
//第二种方法读取
var b=storage["b"];
console.log(b);
//第三种方法读取
var c=storage.getItem("c");
console.log(c);localStorage 修改
var getVal = localStorage.getItem('myStorage');
if( getVal != null ){
localStorage.setItem('myStorage','setOk');
console.log('修改成功');
}else{
console.log('未找到myStorage, getVal返回值为 null');
}localStorage删除
var getVal = localStorage.getItem('myStorage');
if( getVal != null ){
localStorage.removeItem('myStorage');
console.log('删除成功');
}else{
console.log('未找到myStorage，getVal返回值为 null');
}localStorage 清除当前域名下所有内容
localStorage.clear();
localStorage 注意事项：
- 浏览器的大小不统一，并且在IE8以上的IE版本才支持localStorage这个属性
- 目前所有的浏览器中都会把localStorage的值类型限定为string类型，这个在对我们日常比较常见的JSON对象类型需要一些转换
- localStorage在浏览器的隐私模式下面是不可读取的
- localStorage本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡
- localStorage不能被爬虫抓取到
十二、sessionStorage
sessionStorage 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。
提示: 如果你想在浏览器窗口关闭后还保留数据，可以使用 localStorage 属性， 改数据对象没有过期时间，今天、下周、明年都能用，除非你手动去删除。
1.方法
sessionStorage.key(int index) //返回当前 sessionStorage 对象的第index序号的key名称。若没有返回null。
sessionStorage.getItem(string key) //返回键名(key)对应的值(value)。若没有返回null。
sessionStorage.setItem(string key, string value) //该方法接受一个键名(key)和值(value)作为参数，将键值对添加到存储中；如果键名存在，则更新其对应的值。
sessionStorage.removeItem(string key) //将指定的键名(key)从 sessionStorage 对象中移除。
sessionStorage.clear() //清除 sessionStorage 对象所有的项。
2，存储数据
2.1 采用setItem()方法存储
sessionStorage.setItem('testKey','这是一个测试的value值'); // 存入一个值
2.2 通过属性方式存储
sessionStorage['testKey'] = '这是一个测试的value值';
2.3 存储Json对象
sessionStorage也可存储Json对象：存储时，通过JSON.stringify()将对象转换为文本格式；读取时，通过JSON.parse()将文本转换回对象。
var userEntity = {
name: 'tom',
age: 22
};
// 存储值：将对象转换为Json字符串
sessionStorage.setItem('user', JSON.stringify(userEntity));
// 取值时：把获取到的Json字符串转换回对象
var userJsonStr = sessionStorage.getItem('user');
userEntity = JSON.parse(userJsonStr);
console.log(userEntity.name); // => tom
3,读取数据
3.1 通过getItem()方法取值
sessionStorage.getItem('testKey'); // => 返回testKey对应的值
3.2 通过属性方式取值
sessionStorage['testKey']; // => 这是一个测试的value值
转载于:https://www.cnblogs.com/denken/p/11197612.html
十三、JSON字符串
JSON
== JSON是一种特殊的字符串格式，本质是一个字符串
== 像对象和数组，里面的key和value如果是字符串格式，都用双引号包裹（必须是双引号）
JSON语法过于严谨 注意事项
1.对象中的key和value都使用双引号包裹，数字和布尔值可以不用双引号包裹
2.数组里卖可以放多个对象
3.多个数据时，最后一个数据不能有逗号
4. JSON格式中，可以使用的符号只能是 { } [ ] " 双引号" 逗号
// JSON格式的字符串
var jsonObj = '{"name":"lucy","age":18,"love":"写代码"}'
var jsonArr = '[1，2，3，4，5，6]'
1
2
3
// JSON.parse(json字符串)：可以把json字符串转换成对象或者数组
var obj = JSON.parse(jsonObj);
var arr = JSON.parse(jsonArr)
console.log(obj);// 转换后是js对象 {name: 'lucy', age: 18, love: '写代码'}
console.log(arr);// arr就是我们的js数组 数组里面可以放多个对象
// JSON.stringify(对象或者数组)：可以把对象或者数组转换成json字符串
var obj2 = {
a:1,b:2,gender:'男'
}
var arr2 = [
{a:1,b:2,gender:'男'},
{a:10,b:20,gender:'女'}
]
var jsonObj2 = JSON.stringify(obj2);
var jsonArr2 = JSON.stringify(arr2)
console.log(jsonObj2);// json字符串
console.log(jsonArr2);// json字符串
十四、JSON和js对象互相转换
JSON.parse()方法，实现从JSON字符串转换为JS对象
var obj = JSON.parse(' { "a":"hello","b":"world" } ')
console.log(obj);//object
JSON.stringify()方法，实现从js对象转换为JSON字符串
var json = JSON.stringify({ "a":"hello","b":"world" })
console.log(json);//{"a":"hello","b":"world"}(是个字符串类型)
十五、计算属性
1、什么是计算属性
写在computed对象中的属性，本质上是一个方法，不过使用时依旧当属性来使用
2、为什么要有计算属性
1. 为什么不是使用模板语法
虽然模板语法使用非常便利，但是它是被设计成用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护
2. 为什么不是使用method对于复杂逻辑
无论计算属性还是methos，这两种实现方式的最终结果是完全相同的
因为计算属性是基于缓存实现的，只在计算属性所依赖的数据发生改变时它们才会重新求值，否则访问 计算属性会立即返回之前的计算结果，而不必再次执行函数。 相比之下，每当触发重新渲染时，调用方法将总会再次执行函数。
3. 什么时候要用计算属性
对于任何复杂逻辑其计算结果需要被缓存的你都应当使用计算属性
计算属性的基本结构
new Vue({
el:'',
// 数据
data:{},
// 方法属性
// 事件绑定，不用return，没有缓存
methods:{},
// 侦听器（重视过程）
// 监听一个值的改变，不用返回值
watch:{
要侦听的数据(){}
},
// 计算属性（重视结果）
// 必须有return，只求结果，有缓存
computed:{
计算属性名(){
// 经过一系列计算
return 处理操作后结果
}
}
})计算属性的完整结构
1.每一个计算属性都包含一个getter函数与setter函数
2.计算属性会默认使用getter函数，setter函数并不常见，所以一般计算属性getter和setter都不写
3.gette r函数是默认用法，setter函数不是默认用法。如果要使用setter函数，必须手动写出setter函数
4.setter函数内的形参是你要修改的值
十六、事件和事件流
事件是与浏览器或文档交互的瞬间，如点击按钮，填写表格等，它是JS与HTML之间交互的桥梁。
DOM是树形结构，如果同时给父子节点都绑定事件时，当触发子节点的时候，这两个事件的发生顺序如何决定?这就涉及到事件流的概念，它描述的是页面中接受事件的顺序。事件流有两种:
事件冒泡(Event Capturing): 是一种从下往上的传播方式。事件最开始由最具体的元素(文档中嵌套层次最深的那个节点接受, 也就是DOM最低层的子节点), 然后逐渐向上传播到最不具体的那个节点，也就是DOM中最高层的父节点。
事件捕获(Event Bubbling): 与事件冒泡相反。事件最开始由不太具体的节点最早接受事件, 而最具体的节点最后接受事件。
顺序：
捕获阶段-目标阶段-冒泡阶段
同时绑定事件捕获和事件冒泡，会先执行事件捕获。
十七、事件冒泡和事件捕获
1）事件捕获：由微软公司提出来的，事件从文档根节点（Document 对象）流向目标节点，途中会经过目标节点的各个父级节点，并在这些节点上触发捕获事件，直至到达事件的目标节点
（2）事件冒泡：由网景公司提出，与事件捕获相反，事件会从目标节点流向文档根节点，途中会经过目标节点的各个父级节点，并在这些节点上触发捕获事件，直至到达文档的根节点。整个过程就像水中的气泡一样，从水底向上运动
Tips：上面提到的目标节点指的是触发事件的节点
十八、AJAX
1.什么是AJAX
就是js这个语言和服务端交互的手段。
1.ajax 全名 async javascript and XML(异步JavaScript和XML)
2.是前后台交互的能⼒ 也就是我们客户端给服务端发送消息的⼯具，以及接受响应的⼯具
2.AJAX 不是新的编程语言，而是一种使用现有标准的新方法。
3.AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。
4.是⼀个 默认异步执⾏机制的功能,AJAX分为同步（async = false）和异步（async = true）
- 什么是同步请求？(false)
同步请求是指当前发出请求后，浏览器什么都不能做，
必须得等到请求完成返回数据之后，才会执行后续的代码，
相当于生活中的排队，必须等待前一个人完成自己的事物，后一个人才能接着办。
也就是说，当JS代码加载到当前AJAX的时候会把页面里所有的代码停止加载，页面处于一个假死状态，
当这个AJAX执行完毕后才会继续运行其他代码页面解除假死状态
默认异步：- 什么是异步请求？(默认:true)
异步请求就当发出请求的同时，浏览器可以继续做任何事，
Ajax发送请求并不会影响页面的加载与用户的操作，相当于是在两条线上，各走各的，互不影响。
一般默认值为true，异步。异步请求可以完全不影响用户的体验效果，
无论请求的时间长或者短，用户都在专心的操作页面的其他内容，并不会有等待的感觉。
2. AJAX 的优势
- 不需要插件的⽀持，原⽣ js 就可以使⽤
- ⽤户体验好（
不需要刷新⻚⾯就可以更新数据） 减轻服务端和带宽的负担- 缺点：搜索引擎的⽀持度不够，因为数据都不在⻚⾯上，搜索引擎搜索不到
3.
Ajax的工作流程
<body>
<script>
// 1.创建一个对象
let xhr = new XMLHttpRequest()
// 2.调用xhr对象的open方法，设置请求方式和请求地址
xhr.open('get','https://autumnfish.cn/api/joke')
// 3.设置请求成功后的回调函数
xhr.onload = function(){
// 在这里设置请求成功后要做的事情
console.log(xhr.response);
}
// 4.调用这个对象的send方法
xhr.send();
</script>
</body>
Ajax发送 get 请求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
text-align: center;
}
input {
border: 4px solid gray;
padding: 10px;
font-size: 25px;
background-color: skyblue;
color: white;
border-radius: 10px;
cursor: pointer;
outline: none;
}
.joke-container {
width: 500px;
height: 500px;
border: 1px solid gray;
border-radius: 10px;
padding-left: 10px;
margin: 10px auto;
font-size: 30px;
text-align: left;
text-indent: 60px;
}
</style>
</head>
<body>
<input type="button" value="点我获取笑话" class="getJoke">
<div class="joke-container"></div>
<script>
document.querySelector('.getJoke').onclick = function () {
// 1.通过new关键字创建一个网络请求对象
let xhr = new XMLHttpRequest()
// 2.调用xhr对象的open方法，设置请求方式和请求地址
xhr.open('get', 'https://autumnfish.cn/api/joke')
// 3.设置请求成功后的回调函数
xhr.onload = function () {
// 在这里设置请求成功后要做的事情
// console.log(xhr.response);
// 把返回的数据（笑话）显示在div中
document.querySelector('.joke-container').innerHTML = xhr.response;
}
// 4.调用这个对象的send方法
xhr.send();
}
</script>
</body>
</html>
get 请求提交参数
流程：
1.实例化一个请求对象。
2.调用open方法，设置请求方式和请求地址
3.设置请求完成后到回调函数
4.调用send方法，完成请求。
<body>
<!--
-->
<script>
// AJAX发送get请求，如何传递参数
// 拼接在URL地址上
// 格式：url地址?key = value
// url地址?key1=value1&key2=value2&key3=value3
// 1.创建请求对象
let xhr = new XMLHttpRequest
// 2.调用open方法，设置请求方法和请求地址
xhr.open('get','https://autumnfish.cn/api/joke/list?num=5')
// 3.调用onload方法，设置请求完成后到回调函数
xhr.onload = function(){
// console.log(xhr.response);//这样打印出来的5条笑话都堆在一起
let jokes = JSON.parse(xhr.response)//这样打印出来就把5条笑话列在一起
console.log(jokes);
}
// 4.调用send方法，完成请求
xhr.send()
</script>
</body>Ajax发送post请求
流程：
1.实例化请求对象
2.调用open方法，传递请求方法以及请求地址
3.设置请求头
4.设置请求成功后的回调函数
5.调用send方法
<body>
<!--
get请求传递参数：
直接在url地址后拼接，安全性不高
post请求传递参数：
在send()方法里传递
-->
<script>
// 1.实例化请求对象
let bll = new XMLHttpRequest
// 2.调用open方法，传递请求方法以及请求地址
bll.open('post','https://autumnfish.cn/api/user/register')
// 3.设置请求头
bll.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
// 4.设置请求成功后的回调函数
bll.onload = function(){
console.log(bll.response);
let name = JSON.parse(bll.response)//这样打印出来就把5条笑话列在一起
console.log(name);
}
// 5.调用send方法(发送请求)
// 请求的格式：'key = value'
bll.send('username=llll')
</script>
</body>
扫一扫
1699
到【灌水乐园】发言
