ToB企服应用市场:ToB评测及商务社交产业平台

标题: JQuery异步请求与Flask后端通信、this和event指针汇总 [打印本页]
作者: 没腿的鸟    时间: 2024-9-19 23:56
标题: 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关键字绑定 > 显式绑定 > 隐式绑定 > 默认绑定 
  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()界说与用法

参数描述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元素的区域：


 

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



欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/) Powered by Discuz! X3.4