不言不语

您现在的位置是: 首页 >  Web前端  >  jQuery

jQuery

Jquery中的ajax的应用

2020-06-01jQuery
在实际的使用过程中,一般都会借助第三方的库来实现ajax。因为使用库更方便快捷,能大大的提高工作效率。

在实际的使用过程中,一般都会借助第三方的库来实现ajax。因为使用库更方便快捷,能大大的提高工作效率。


Jquery库中的ajax主要有三种用法:

  1. $.ajax

  2. $.post

  3. $.get

在实际应用中,大家要注意掌握$.ajax的使用,$.post$.get可以使用$.ajax来实现。可以看作后两种用法是$.ajax在post请求和get请求下进一步简化。


使用方法:

$.ajax的用法

常规用法:

一般情况下,咱们使用如下方式,即可满足需求。

$.ajax({
    type:"post",//提交方式
    url:url,//提交地址
    data:mydata,//提交的数据
    dataType:"json",
    success:function(res){//请求成功时的回调函数,res可以是任一变量,是用来接收响应数据的。
    
    }});

在这里一定要注意,如果直接复制上面的代码到项目录,可能会出现异常情况-不能正常请求。在这里主要是因为:注释信息的问题。

  • 1.直接将注释信息删除

  • 2.注释信息不要和代码放在同一行(建议注释信息单独一行)


其实,$.ajax 实际的功能远比这个复杂,它还有很多的选项可根据自己的实际需求进行配置。

高级用法

配置项:

async

类型:Boolean
默认值: true。默认设置下,所有请求均为异步请求。如果需要发送同步请求,请将此选项设置为 false。
注意,同步请求将锁住浏览器,用户其它操作必须等待请求完成才可以执行。

cache

类型:Boolean
默认值: true,dataType 为 script 和 jsonp 时默认为 false。设置为 false 将不缓存此页面。
jQuery 1.2 新功能。

contentType

类型:String
默认值: "application/x-www-form-urlencoded"。发送信息至服务器时内容编码类型。
默认值适合大多数情况。如果你明确地传递了一个 content-type 给 $.ajax() 那么它必定会发送给服务器(即使没有数据要发送)。

context

类型:Object
这个对象用于设置 Ajax 相关回调函数的上下文。也就是说,让回调函数内 this 指向这个对象(如果不设定这个参数,那么 this 就指向调用本次 AJAX 请求时传递的 options 参数)。比如指定一个 DOM 元素作为 context 参数,这样就设置了 success 回调函数的上下文为这个 DOM 元素。

$.ajax({ url: "test.html", context: document.body, success: function(){
        $(this).addClass("done");
      }});

global

类型:Boolean
是否触发全局 AJAX 事件。默认值: true。设置为 false 将不会触发全局 AJAX 事件,如 ajaxStart 或 ajaxStop 可用于控制不同的 Ajax 事件。

ifModified

类型:Boolean
仅在服务器数据改变时获取新数据。默认值: false。使用 HTTP 包 Last-Modified 头信息判断。在 jQuery 1.4 中,它也会检查服务器指定的 'etag' 来确定数据没有被修改过。

jsonp

类型:String
在一个 jsonp 请求中重写回调函数的名字。这个值用来替代在 "callback=?" 这种 GET 或 POST 请求中 URL 参数里的 "callback" 部分,比如 {jsonp:'onJsonPLoad'} 会导致将 "onJsonPLoad=?" 传给服务器。

jsonpCallback

类型:String
为 jsonp 请求指定一个回调函数名。这个值将用来取代 jQuery 自动生成的随机函数名。这主要用来让 jQuery 生成度独特的函数名,这样管理请求更容易,也能方便地提供回调函数和错误处理。你也可以在想让浏览器缓存 GET 请求的时候,指定这个回调函数名。

password

类型:String
用于响应 HTTP 访问认证请求的密码

processData

类型:Boolean
默认值: true。默认情况下,通过data选项传递进来的数据,如果是一个对象(技术上讲只要不是字符串),都会处理转化成一个查询字符串,以配合默认内容类型 "application/x-www-form-urlencoded"。如果要发送 DOM 树信息或其它不希望转换的信息,请设置为 false。

scriptCharset

类型:String
只有当请求时 dataType 为 "jsonp" 或 "script",并且 type 是 "GET" 才会用于强制修改 charset。通常只在本地和远程的内容编码不同时使用。

traditional

类型:Boolean
如果你想要用传统的方式来序列化数据,那么就设置为 true。请参考工具分类下面的 jQuery.param 方法。

timeout

类型:Number
设置请求超时时间(毫秒)。此设置将覆盖全局设置。

username

类型:String
用于响应 HTTP 访问认证请求的用户名。

回调函数

如果要处理 $.ajax() 得到的数据,则需要使用回调函数:beforeSend、error、dataFilter、success、complete。

beforeSend

在发送请求之前调用,并且传入一个 XMLHttpRequest 作为参数。

error

在请求出错时调用。传入 XMLHttpRequest 对象,描述错误类型的字符串以及一个异常对象(如果有的话)

dataFilter

在请求成功之后调用。传入返回的数据以及 "dataType" 参数的值。并且必须返回新的数据(可能是处理过的)传递给 success 回调函数。

success

当请求之后调用。传入返回后的数据,以及包含成功代码的字符串。

complete

当请求完成之后调用这个函数,无论成功或失败。传入 XMLHttpRequest 对象,以及一个包含成功或错误代码的字符串。

$.post$.get其实就是$.ajax的简化版

用法可以参考 $.ajax


文章评论