jQuery中使用ajax

基本属性

$.ajax({
url:'add.php',
type:'post',
data:{id:1,name:'ashen'},
success:function(res){
console.log(res);
}
})
  • dataType:设置响应体数据类型

  • success函数:只有状态码为200即请求成功才会执行

  • error函数:只有请求不正常才执行,即状态码不是200

  • complete函数:请求完成后执行,即成功或失败都会执行

  • beforeSend函数:在发送请求之前执行

高度封装函数

  • $.get(url,数据,成功后执行的函数) 发送get请求

  • $.post(url,数据,成功后执行的函数) 发送post请求

  • $.getJSON(url,数据,成功后执行的函数) 发送get请求 并设置响应体为json格式

  • $.getScript() 发送get请求 并设置响应体为javascript格式

 

全局事件处理函数

  • $(selector).ajaxStart(function(){}); 给某一元素注册请求开始时触发的事件 全局事件处理函数

  • $(selector).ajaxStop(function(){}); 给某一元素注册请求结束时触发的事件 全局事件处理函数

  

其中加入css或其他效果,可以实现正在加载或加载进度条等用户体验性较好的页面

如:

$(document)
  .ajaxStart(function () {
    NProgress.start()
  })
  .ajaxStop(function () {
    NProgress.done()
  })

NProgress 实现进度条

 

$(selector).load()

  • 将$(selector)重新加载,通过load中的参数指定被载入的代码

  • load(url,数据,请求成功后回调的函数)

  • 默认使用 GET 方式 - 传递附加参数时自动转换为 POST 方式。jQuery 1.2 中,可以指定选择符,来筛选载入的 HTML 文档,DOM 中将仅插入筛选出的 HTML 代码。语法形如 "url #some > selector"。

posted @ 2020-03-24 16:17  ashen1999  阅读(134)  评论(0编辑  收藏  举报