前端

前后端如何实现交互

Posted by 石坤 on 2019-01-01

JS 知识点补充

this 是个特殊的变量, 代表触发事件的元素. 使用attr可以读取元素的属性
var URL = $(this).attr("href");

1
2
3
4
5
6
7
8
9
$.ajax({
  url: url,
  method: 'DELETE',
  dataType: 'json', //要求服务器回传json
  success: function(data){  //data为服务器回传的json数据
    $("#post-"+data["id"]).remove();
  }
  
})

侦测浏览器把页面滚动到最下方: (Endless Page)

1
2
3
4
5
$(window).scroll(function(){
   if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
   
   }
})

注意: 制作endless page
一开始要求服务器返回html, 当页面拉到底部时, 需要返回js, 以便可以append画面. 所以后端需要判断客户端要求的是html还是JS.

需要判断是否为最后一页. 终止条件

closest(“XXX”) 会定位到最近的上一层元素
find(“XXX”) 会往里层找目标XXX
trick: 可以先往上层找到共同的祖先, 然后再往里层找目标.

success是异步的回呼, 里面的this不等同于外层的this. 所以得先在外层记下this是触发事件的元素.

1
2
3
4
5
6
7
8
9
10
11
12
$("XXX").on('click',"YYY", function(){
  var that = this;
  
  $.ajax({
    url: url,
    method: 'DELETE',
    datatype: 'json',
    success: function(data){
      $(that).closest("ZZZ").remove();
    }
  })
})

PUT VS PATCH method
PUT: 替换整个页面
PATCH: 修改已有页面(eg. 选择分类)

beforeSend 会在Ajax送出前触发
complete会在完成后触发

绑定事件

1
2
3
4
5
1. $("XXX").click(function(){...}) //点击事件

2. $("XXX").on("click", function(){...}) // 点击事件
 
3. $("XXX").on("change", function(){...}) //输入框变动事件 eg.checkbox

浏览器特殊事件

####evt 是浏览器事件物件

1
2
3
$("XXX").click(function(evt)){
  evt.preventDefault(); // 终止这个元素的默认行为; 可以用于a标签, 终止跳转行为
}

浏览器Bubble Up事件模型

由于浏览器并不会为新增的元素自动绑定事件, 所以后来使用Ajax新增的元素没有事件被绑定
要想解决这个问题, 得先理解浏览器的Bubble Up事件模型
假设有以下html:

1
2
3
4
5
6
7
<body>
  <div>
     <p>
        <a>XXX</a>
     </p>
  </div>
</body>

当点击XXX的时候, 浏览器不只会触发a元素的点击事件, 还会一路往外层触发, 接着会触发p的click事件, div的click事件, 再到body的click事件. 这就是所谓的Bubble Up事件模型

知道这个模型之后, 我们可以把事情绑定到更稳定的上一层元素上, 然后再向内定位需要真正触发的元素.
如果这样做的话, 就需要多传递一个参数, 以便于可以过滤出真正触发的元素.
例子:
$("XXX").on('change', "YYY", function())
XXX为YYY的上一层元素, 先把事件绑定到XXX上, 然后会找到真正的触发元素YYY.

流程:

  1. 触发某个元素或事件
  2. 从元素中取到需要的URL(请求的网址)
  3. 发起ajax请求: 主要包括以下字段
    • URL
    • method
    • dataType(script或者json)
    • 服务器处理请求并返回对应的data数据
    • 请求成功后用返回的data数据, 执行什么操作 success: function(data){ }
  4. 页面发生变化

思考模式:

后端:

  1. URL是什么
  2. 处理请求的视图函数是什么
  3. 应该返回什么数据段

前端:

  1. trigger:触发事件或元素是什么? (从触发的元素中能否提取到有用且必要的信息)
  2. 请求的URL是什么?
  3. 请求的method的是什么?
  4. 服务器返回的数据类型是什么?
  5. 服务器返回的数据格式是什么?
  6. 获取到数据之后, 触发什么操作, 操作的元素是什么?
    • 若返回script, 另写一个js文件, 执行其中的js代码
    • 若返回json. 在ajax中执行success中的函数

FEATURED TAGS
前端