jQuery中使用ajax

时间:2020-03-24
本文章向大家介绍jQuery中使用ajax,主要包括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"。

原文地址:https://www.cnblogs.com/ashen1999/p/12559667.html