JQuery异步请求与Flask后端通信、this和event指针汇总

一.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”

若数据参数有多个，例如：

{"test1":"123","test2":"456"
}

仍然使用“request.args.get("blog_id")”来获取对应值

1.3$.post()

$.post是ajax的post请求简化版，需注意，传入的数据类型需要是JSON类型，在后端使用：“request.json”获取字典对象来使用数据。

例如：

二.forEach()方法

forEach()方法用来对一个数组中的所有成员执行方法内操作。

例如：

let value = [1,2,3]
value.forEach(function(item){console.log(item);
});

效果：

三.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")

执行结果：

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()();

执行结果：

3.3.2隐式绑定

调用的对象内部有对函数的引用

(通过对象调用函数)

//通过对象调用函数
//注意区别“使用对象调用函数”与“直接调用对象中函数”两者区别
//前者是通过对象调用，故this指向该对象
//后者直接调用，故this指向window
var obj2 = {f:f
}
var myF = obj2.f
obj2.f();    //隐式调用,通过对象调用
myF();      //直接调用

执行结果：

注意：

将对象内的函数单独取出并且赋值给某个变量，通过这个变量来调用函数，就是“直接绑定”，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("大明")

执行结果：

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);

执行结果：

总结：

在这里的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>

执行结果：

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);

执行结果：

3.5.2函数赋值同时调用函数(间接函数引用)

间接函数引用相当少见(正常人不会写这种犯抽代码，某些面试官可能喜欢问用来装X)

        var testV1 = {name:"小明"};testV1.f = function (){console.log(this);};testV1.f();testV2 = {name:"大明"};(testV2.f = testV1.f)()

执行结果：

总结：

testV2在接收testV1的值(函数)时，添加了小括号，相当于赋值过程和调用函数过程同时发生(并发过程)，而在这个函数调用过程中，因为“赋值过程”没有结束，而“函数又被调用”(此时因为是在内存中的函数被调用，而不是隐式绑定[例如：“testV1.f()”])，故被当做“默认绑定”由window调用this指针

3.5.3箭头函数

箭头函数不绑定this指针，它的this指针来源于上级作用域

        var testV = {name:"小明",f:() => {console.log(this);}};testV.f();

执行结果：

四.event指针

4.1event指针介绍

当事件(鼠标点击、键盘敲击等等)发生以后，会产生一个事件对象，作为参数传给监听函数。

    <button onclick="myclick1(event)">按钮</button><script>function myclick1(e){console.log(e);}</script>

点击按钮后，执行结果：

可以看出event是一个事件对象，在这里表示一个点击事件对象

4.2事件相关概念

要想学会event，我们还需要了解“事件流”、“捕获过程”、“事件触发过程”、“冒泡过程”

一个完整的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元素的区域：

当点击区域①的时候：会依次弹出你点击了child区域 、你点击了parents区域 、 你点击了body区域 、 你点击了屏幕任何区域 这四个弹框。
当点击区域②的时候：会依次弹出你点击了parents区域 、 你点击了body区域 、 你点击了屏幕任何区域 这三个弹框。
当点击区域③的时候：会弹出 你点击了body区域 、 你点击了屏幕任何区域 这两个弹框。
当点击区域④的时候：就只弹出 你点击了屏幕任何区域 这一个弹框。