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

1. //发送数据
2. $.ajax({
3.     type:"post",
4.     dataType:"json",
5.     url:"/main/blog/commit/comment",
6.     contentType: "application/json;charset=UTF-8",
7.     data:JSON.stringify(data),
8. });

复制代码

后端使用“request.json”获取字典对象来使用数据。
1.2$.get()

$.get()是ajax使用get请求的简化版，在使用get请求向后端请求数据时，假如我们是这样的语句：

1. $.get("/main/blog/get/allcomment",{"blog_id":"123"},function(res){
2.     if(res.length == 0){
3.         //pass
4.     }
5. }

复制代码

注意我们使用get请求的同时，附加了“blog_id”这个数据参数，这会改变我们get请求的URL，变成："/main/blog/get/allcomment?blog_id=66"，也就是说我们的请求参数自动作为修饰符添加到URL中。
此时，在后端Flask中，我们必要使用：“request.args.get("blog_id")”来获取“123”

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

1. {
2.     "test1":"123",
3.     "test2":"456"
4. }

复制代码

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

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

二.forEach()方法

forEach()方法用来对一个数组中的所有成员实行方法内操纵。
例如：

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

复制代码

效果：

三.this指针

3.1为什么要用this指针

this可以用来指向某些元素、对象，在合适的地方使用this，可以镌汰无用代码的编写。
下面是一个冗余且不易维护的代码：

1. var user = {
2.   name: "aclie",
3.   sing: function () {
4.     console.log(user.name + '在唱歌')
5.   },
6.   dance: function () {
7.     console.log(user.name + '在跳舞')
8.   },
9.   study: function () {
10.     console.log(user.name + '在学习')
11.   },
12. }

复制代码

在这个代码中，每个方法都必要用到user对象中的name属性，假如user对象名称发生变化，那么所有用到user的地方都要修改，在这种环境下，就可以使用this指针。

1. var user = {
2.   name: "aclie",
3.   sing: function () {
4.     console.log(this.name + '在唱歌')
5.   },
6.   dance: function () {
7.     console.log(this.name + '在跳舞')
8.   },
9.   study: function () {
10.     console.log(this.name + '在学习')
11.   },
12. }

复制代码

3.2this的指向

this的指向(值)和函数在那里界说无关，只与“怎样调用”有关。

1. function foo(){
2.   console.log(this)
3. }
5. foo()
7. var obj = {
8.   foo: foo
9. }
10. obj.foo()
12. obj.foo.apply("hello")

复制代码

实行结果：

3.3this指针的四种绑定方式

3.3.1默认绑定

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

1. //1.直接调用函数
2. function f(){
3.     console.log(this);
4. }
6. f();
8. //2.对象中的函数
9. var obj1 = {
10.     f:f
11. }
12. var fn1 = obj1.f;
13. fn1();
15. //3.被全局变量引用
16. var obj2 = {
17.     bar:function(){
18.         console.log(this);
19.     }
20. }
21. var fn2 = obj2.bar;
22. fn2();
24. //4.函数嵌套调用
25. function f1(){
26.     console.log("f1",this);
27.     f2();
28. }
29. function f2(){
30.     console.log("f2",this);
31.     f3();
32. }
33. function f3(){
34.     console.log("f3",this);
35. }
36. f1();
38. //5.通过闭包调用
39. var obj3 = {
40.     bar:function(){
41.         return function(){
42.             console.log(this);
43.         }
44.     }
45. }
46. obj3.bar()();

复制代码

实行结果：

3.3.2隐式绑定

   调用的对象内部有对函数的引用
  (通过对象调用函数)

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

复制代码

实行结果：

注意：
将对象内的函数单独取出并且赋值给某个变量，通过这个变量来调用函数，就是“直接绑定”，this指针指向“window对象”。
而直接通过对象调用这个函数，this指针指向“该对象”。
3.3.3显式绑定

   不盼望在对象内部包含这个函数的引用，但又盼望通过对象逼迫绑定
  (手动修改this指向)
  使用call/apply/bind进行“显式绑定

1. function f(){
2.     console.log(this);
3. }
5. var testV = {
6.     "name":"小明"
7. }
9. f.call(testV)
10. f.apply(testV)
11. f.call("大明")

复制代码

实行结果：

3.3.4new绑定

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

1. function animal(aName,aAge){
2.     this.aName = aName;
3.     this.aAge = aAge;
4. }
6. const cat = new animal("小花",14);
7. const dog = new animal("大黄",15);
9. console.log(cat);
10. console.log(dog);

复制代码

实行结果：

总结：
在这里的this指针，跟Pythonn对象里的“self”指针差不多，都是指向对象自身
3.3.5通过标签调用this指针函数

   当某个标签调用某个含有this指针函数时，是默认绑定，故this指针指向window
  (其实就是相当于单独在script标签中调用了函数，故是默认绑定)
  可以将this指针传入，用来代指该标

1.     <button onclick="myclick1(this)">按钮1</button>
2.     <button onclick="myclick2()">按钮2</button>
3.     <script>
4.         function myclick1(e){
5.             console.log(e);
6.         }
7.         function myclick2(){
8.             console.log(this);
9.         }
10.     </script>

复制代码

实行结果：

3.4this绑定的优先级

• 隐式绑定高于默认绑定
  
• 表现绑定高于隐式绑定
  
• new绑定高于隐式绑定
  
• new绑定高于表现绑定
  

   绑定优先级：
  new关键字绑定 > 显式绑定 > 隐式绑定 > 默认绑定 
  3.5特殊的绑定

   除了上述四种常见绑定以外，另有三种“特殊的绑定规则”，少见，但是轻易犯浑
   3.5.1忽略空值的绑定

   当显式绑定的值为“null/undefined”时，this忽略显式昂定，转而绑定window

1.         var testV = {
2.             name:"小明",
3.             f:function f(){
4.                 console.log(this);
5.             }
6.         }
7.         testV.f.call("123");
8.         testV.f.call(null);
9.         testV.f.call(undefined);

复制代码

实行结果：

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

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

1.         var testV1 = {
2.             name:"小明"
3.         };
4.         testV1.f = function (){
5.             console.log(this);
6.         };
7.         testV1.f();
8.         testV2 = {
9.             name:"大明"
10.         };
11.         (testV2.f = testV1.f)()

复制代码

实行结果：

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

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

1.         var testV = {
2.             name:"小明",
3.             f:() => {
4.                 console.log(this);
5.             }
6.         };
7.         testV.f();

复制代码

实行结果：

四.event指针

4.1event指针先容

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

1.     <button onclick="myclick1(event)">按钮</button>
2.     <script>
3.         function myclick1(e){
4.             console.log(e);
5.         }
6.     </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部分：

1. <div class="parents" id="parents">
2.     <div class="child" id="child"></div>
3. </div>

复制代码

JS部分：

1. <script>
2.     var parents = document.getElementById("parents");
3.     var child = document.getElementById("child");
6.     document.onclick = function(e){
7.         alert("你点击了屏幕任何区域");
8.     };
10.     document.body.onclick = function(e){
11.         alert("你点击了body区域");
12.     };
14.     parents.onclick = function (e) {
15.         alert("你点击了parents区域");
16.     };
18.     child.onclick = function (e) {
19.         alert("你点击了child区域");
20.     };
22. </script>

复制代码

详细HTML元素的区域：

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

 

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。