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后端传送数据的示例。

javascript 复制代码

//发送数据
$.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 请求向后端请求数据时，如果我们是这样的语句：

javascript 复制代码

$.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"

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

javascript 复制代码

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

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

1.3$.post()

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

例如：

二.forEach()方法

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

例如：

javascript 复制代码

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

效果：

三.this指针

3.1为什么要用this指针

this 可以用来指向某些元素、对象，在合适的地方使用this，可以减少无用代码的编写。

下面是一个冗余且不易维护的代码：

javascript 复制代码

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指针。

javascript 复制代码

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 的指向(值) 和函数在哪里定义无关 ，只与"如何调用"有关。

javascript 复制代码

 function foo(){
  console.log(this)
}

foo()

var obj = {
  foo: foo
}
obj.foo() 

obj.foo.apply("hello")

执行结果：

3.3this指针的四种绑定方式

3.3.1默认绑定

当函数独立调用时，this指针默认绑定window

javascript 复制代码

//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隐式绑定

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

(通过对象调用函数)

javascript 复制代码

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

执行结果：

注意：

将对象内的函数单独取出并且赋值给某个变量，通过这个变量来调用函数，就是"直接绑定 "，this指针 指向"window对象"。

而直接通过对象调用这个函数，this指针 指向"该对象"。

3.3.3显式绑定

不希望在对象内部包含这个函数的引用，但又希望通过对象强制绑定

(手动修改this指向)

使用call/apply/bind 进行"显式绑定

javascript 复制代码

function f(){
    console.log(this);
}

var testV = {
    "name":"小明"
}

f.call(testV)
f.apply(testV)
f.call("大明")

执行结果：

3.3.4new绑定

通过new关键字来创建构造函数的示例，绑定this

javascript 复制代码

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指针传入，用来代指该标

javascript 复制代码

    <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

javascript 复制代码

        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)

javascript 复制代码

        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指针来源于上级作用域

javascript 复制代码

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

执行结果：

四.event指针

4.1event指针介绍

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

javascript 复制代码

    <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部分：

html 复制代码

<div class="parents" id="parents">
    <div class="child" id="child"></div>
</div>

JS部分：

javascript 复制代码

<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区域 、 你点击了屏幕任何区域 这两个弹框。
当点击区域④ 的时候：就只弹出 你点击了屏幕任何区域 这一个弹框。

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冒泡阶段