jQuery中使用ajax

偶尔善良 提交于 2020-03-24 17:31:49

基本属性

$.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"。

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!