JQuery异步请求与Flask后端通信、this和event指针汇总
目录一.JQuery与Flask通信的三种方法
1.1$.ajax()
1.2$.get()
1.3$.post()
二.forEach()方法
三.this指针
3.1为什么要用this指针
3.2this的指向
3.3this指针的四种绑定方式
3.3.1默认绑定
3.3.2隐式绑定
3.3.3显式绑定
3.3.4new绑定
3.3.5通过标签调用this指针函数
3.4this绑定的优先级
3.5特殊的绑定
3.5.1忽略空值的绑定
3.5.2函数赋值同时调用函数(间接函数引用)
3.5.3箭头函数
四.event指针
4.1event指针先容
4.2变乱相干概念
编辑
4.2.1变乱流
4.2.2捕获阶段
4.2.3变乱触发过程
4.2.4冒泡阶段
一.JQuery与Flask通信的三种方法
根据HTTP的“get”与“post”两种请求，JQuery提供“$.get()”、“$.post()”、“$.ajax()”三种方式通信。
1.1$.ajax()
使用$.ajax()可以很方便的与后端交换数据，不过当我们传入的数据是一个JS对象时，我们必要使用“JSON.stringify(object)”方法来将JS对象转换为JSON数据。
除此之外，我们还必要修改“请求头格式”为“application/json”，假如不修改“请求头格式”，那么会报错：“415 (Unsupported Media Type)”
而办理办法就是在$.ajax()中添加语句“contentType: "application/json;charset=UTF-8"”
一个ajax向Flask后端传送数据的示例。
//发送数据
$.ajax({
type:"post",
dataType:"json",
url:"/main/blog/commit/comment",
contentType: "application/json;charset=UTF-8",
data:JSON.stringify(data),
}); 后端使用“request.json”获取字典对象来使用数据。
1.2$.get()
$.get()是ajax使用get请求的简化版，在使用get请求向后端请求数据时，假如我们是这样的语句：
$.get("/main/blog/get/allcomment",{"blog_id":"123"},function(res){
if(res.length == 0){
//pass
}
} 注意我们使用get请求的同时，附加了“blog_id”这个数据参数，这会改变我们get请求的URL，变成："/main/blog/get/allcomment?blog_id=66"，也就是说我们的请求参数自动作为修饰符添加到URL中。
此时，在后端Flask中，我们必要使用：“request.args.get("blog_id")”来获取“123”
https://i-blog.csdnimg.cn/direct/82ca964f1cfa4db59086277493bb28d6.png
若数据参数有多个，例如：
{
"test1":"123",
"test2":"456"
} 仍然使用“request.args.get("blog_id")”来获取对应值
1.3$.post()
$.post是ajax的post请求简化版，需注意，传入的数据类型必要是JSON类型，在后端使用：“request.json”获取字典对象来使用数据。
例如：
https://i-blog.csdnimg.cn/direct/26a7bca719c649619c1e1d345dd0f704.png
二.forEach()方法
forEach()方法用来对一个数组中的所有成员实行方法内操纵。
例如：
let value =
value.forEach(function(item){
console.log(item);
}); 效果：
https://i-blog.csdnimg.cn/direct/52584e8d21b4437bb8deed736d94c7a1.png
三.this指针
3.1为什么要用this指针
this可以用来指向某些元素、对象，在合适的地方使用this，可以镌汰无用代码的编写。
下面是一个冗余且不易维护的代码：
var user = {
name: "aclie",
sing: function () {
console.log(user.name + '在唱歌')
},
dance: function () {
console.log(user.name + '在跳舞')
},
study: function () {
console.log(user.name + '在学习')
},
} 在这个代码中，每个方法都必要用到user对象中的name属性，假如user对象名称发生变化，那么所有用到user的地方都要修改，在这种环境下，就可以使用this指针。
var user = {
name: "aclie",
sing: function () {
console.log(this.name + '在唱歌')
},
dance: function () {
console.log(this.name + '在跳舞')
},
study: function () {
console.log(this.name + '在学习')
},
} 3.2this的指向
this的指向(值)和函数在那里界说无关，只与“怎样调用”有关。
function foo(){
console.log(this)
}
foo()
var obj = {
foo: foo
}
obj.foo()
obj.foo.apply("hello") 实行结果：
https://i-blog.csdnimg.cn/direct/d68f9bfcbcf0466388c9d376a992e5be.png
3.3this指针的四种绑定方式
3.3.1默认绑定
当函数独立调用时，this指针默认绑定window
//1.直接调用函数
function f(){
console.log(this);
}
f();
//2.对象中的函数
var obj1 = {
f:f
}
var fn1 = obj1.f;
fn1();
//3.被全局变量引用
var obj2 = {
bar:function(){
console.log(this);
}
}
var fn2 = obj2.bar;
fn2();
//4.函数嵌套调用
function f1(){
console.log("f1",this);
f2();
}
function f2(){
console.log("f2",this);
f3();
}
function f3(){
console.log("f3",this);
}
f1();
//5.通过闭包调用
var obj3 = {
bar:function(){
return function(){
console.log(this);
}
}
}
obj3.bar()();
实行结果：
https://i-blog.csdnimg.cn/direct/32c3de9db5d244509b56b2ed13eb4343.png
3.3.2隐式绑定
调用的对象内部有对函数的引用
(通过对象调用函数)
//通过对象调用函数
//注意区别“使用对象调用函数”与“直接调用对象中函数”两者区别
//前者是通过对象调用，故this指向该对象
//后者直接调用，故this指向window
var obj2 = {
f:f
}
var myF = obj2.f
obj2.f(); //隐式调用,通过对象调用
myF(); //直接调用 实行结果：
https://i-blog.csdnimg.cn/direct/f55f4f70b4144d72a71abe27580ed2c0.png
注意：
将对象内的函数单独取出并且赋值给某个变量，通过这个变量来调用函数，就是“直接绑定”，this指针指向“window对象”。
而直接通过对象调用这个函数，this指针指向“该对象”。
3.3.3显式绑定
不盼望在对象内部包含这个函数的引用，但又盼望通过对象逼迫绑定
(手动修改this指向)
使用call/apply/bind进行“显式绑定
function f(){
console.log(this);
}
var testV = {
"name":"小明"
}
f.call(testV)
f.apply(testV)
f.call("大明") 实行结果：
https://i-blog.csdnimg.cn/direct/6ba3fcaa6b4a4fd3bdd46149344e1bc9.png
3.3.4new绑定
通过new关键字来创建构造函数的示例，绑定this
function animal(aName,aAge){
this.aName = aName;
this.aAge = aAge;
}
const cat = new animal("小花",14);
const dog = new animal("大黄",15);
console.log(cat);
console.log(dog); 实行结果：
https://i-blog.csdnimg.cn/direct/d981bff3afbd481eab21a630f214d9bf.png
总结：
在这里的this指针，跟Pythonn对象里的“self”指针差不多，都是指向对象自身
3.3.5通过标签调用this指针函数
当某个标签调用某个含有this指针函数时，是默认绑定，故this指针指向window
(其实就是相当于单独在script标签中调用了函数，故是默认绑定)
可以将this指针传入，用来代指该标
<button onclick="myclick1(this)">按钮1</button>
<button onclick="myclick2()">按钮2</button>
<script>
function myclick1(e){
console.log(e);
}
function myclick2(){
console.log(this);
}
</script> 实行结果：
https://i-blog.csdnimg.cn/direct/818155c781b8485cbd6665ae21c82762.png
3.4this绑定的优先级
[*]隐式绑定高于默认绑定
[*]表现绑定高于隐式绑定
[*]new绑定高于隐式绑定
[*]new绑定高于表现绑定
绑定优先级：
new关键字绑定 > 显式绑定 > 隐式绑定 > 默认绑定
3.5特殊的绑定
除了上述四种常见绑定以外，另有三种“特殊的绑定规则”，少见，但是轻易犯浑
3.5.1忽略空值的绑定
当显式绑定的值为“null/undefined”时，this忽略显式昂定，转而绑定window
var testV = {
name:"小明",
f:function f(){
console.log(this);
}
}
testV.f.call("123");
testV.f.call(null);
testV.f.call(undefined); 实行结果：
https://i-blog.csdnimg.cn/direct/446e025eccaf489da3c77b91d9fa9717.png
3.5.2函数赋值同时调用函数(间接函数引用)
间接函数引用相当少见(正常人不会写这种犯抽代码，某些面试官可能喜欢问用来装X)
var testV1 = {
name:"小明"
};
testV1.f = function (){
console.log(this);
};
testV1.f();
testV2 = {
name:"大明"
};
(testV2.f = testV1.f)() 实行结果：
https://i-blog.csdnimg.cn/direct/7ece8c4de4764e98a122d9f48d9331e4.png
总结：
testV2在吸收testV1的值(函数)时，添加了小括号，相当于赋值过程和调用函数过程同时发生(并发过程)，而在这个函数调用过程中，因为“赋值过程”没有结束，而“函数又被调用”(此时因为是在内存中的函数被调用，而不是隐式绑定[例如：“testV1.f()”])，故被当做“默认绑定”由window调用this指针
3.5.3箭头函数
箭头函数不绑定this指针，它的this指针来源于上级作用域
var testV = {
name:"小明",
f:() => {
console.log(this);
}
};
testV.f(); 实行结果：
https://i-blog.csdnimg.cn/direct/42b41eb933d64052b8106eb817b4cc2c.png
四.event指针
4.1event指针先容
当变乱(鼠标点击、键盘敲击等等)发生以后，会产生一个变乱对象，作为参数传给监听函数。
<button onclick="myclick1(event)">按钮</button>
<script>
function myclick1(e){
console.log(e);
}
</script> 点击按钮后，实行结果：
https://i-blog.csdnimg.cn/direct/5dc4c2a25c6f472db7f75fd540055f14.png
可以看出event是一个变乱对象，在这里表示一个点击变乱对象
4.2变乱相干概念
要想学会event，我们还必要相识“变乱流”、“捕获过程”、“变乱触发过程”、“冒泡过程”
https://i-blog.csdnimg.cn/direct/81d1471e16df47c4949bf852f60d304f.png
一个完备的JS变乱流是从window开始，最后回到window的一个过程。
变乱流别分为三个阶段：“(1-5)捕获阶段”、“(5-6)变乱触发过程”、“(6-10)冒泡阶段”。
4.2.1变乱流
指页面中担当变乱的顺序，即上图中的顺序。
4.2.2捕获阶段
在捕获阶段中，也可以通过“addEventListener(evnt,function,useCapture)”方法实行变乱，在捕获阶段实行的元素，在冒泡阶段就不会在实行
addEventListener()界说与用法
[*]document.addEventListener() 方法用于向文档添加变乱句柄。
[*]提示： 可以使用 document.removeEventListener() 方法来移除 addEventListener() 方法添加的 变乱句柄。
[*]提示：使用 element.addEventListener() 方法为指定元素添加变乱句柄。
参数描述event必须。描述变乱名称的字符串，例如“click”是点击变乱function必须。描述变乱触发后实行的函数useCapture可选。布尔值，true-变乱句柄在捕获阶段实行，false-变乱句柄在冒泡阶段实行。 4.2.3变乱触发过程
“被点击位置”最内层元素实行变乱且准备向上通报变乱句柄的过程
4.2.4冒泡阶段
当一个元素吸收到变乱的时间 会把他吸收到的变乱传给本身的父级，一直到window。
假如它的父级元素也有某个变乱函数，当实行完它的变乱函数后，也会实行它父级的变乱函数。
一个例子代码：
HTML部分：
<div class="parents" id="parents">
<div class="child" id="child"></div>
</div> JS部分：
<script>
var parents = document.getElementById("parents");
var child = document.getElementById("child");
document.onclick = function(e){
alert("你点击了屏幕任何区域");
};
document.body.onclick = function(e){
alert("你点击了body区域");
};
parents.onclick = function (e) {
alert("你点击了parents区域");
};
child.onclick = function (e) {
alert("你点击了child区域");
};
</script> 详细HTML元素的区域：
https://i-blog.csdnimg.cn/direct/b0ff031af7b04ecc96fd7bc58cc433db.png
[*]当点击区域①的时间：会依次弹出你点击了child区域 、你点击了parents区域 、 你点击了body区域、 你点击了屏幕任何区域 这四个弹框。
[*]当点击区域②的时间：会依次弹出你点击了parents区域 、 你点击了body区域 、 你点击了屏幕任何区域 这三个弹框。
[*]当点击区域③的时间：会弹出 你点击了body区域 、 你点击了屏幕任何区域 这两个弹框。
[*]当点击区域④的时间：就只弹出 你点击了屏幕任何区域 这一个弹框。
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]