jQuery之Ajax 详解
|
139
|
0
|
JavaWeb

588 字
|
4 分钟

一、什么是Ajax

Ajax的全称是Asynchronous JavaScript And XML（异步JavaScript和XML）我们可以理解为：在网页中利用XMLHttpRequest对象和服务器进行数据交互的方式就是Ajax，它可以帮助我们轻松实现网页与服务器之间的数据交互。

二、jQuery中的Ajax

在jQuery中，$.ajax()方法属于最底层的方法，第2层是$.get()，和$.post()，第3层是$.getScript()和$.getJSON()方法。

浏览器中提供的XMLHttpRequest用法比较复杂，所以jQuery对XMLHttpRequest进行了封装，提供了一系列Ajax相关的函数，极大地降低了Ajax的使用难度

三、 $.get( ) 方法

  • 请求结构

$.get( url，[ data ]，[ callback ]，[ type ])

参数名称类型说明
urlString请求的HTML页的URL地址
data（可选）Object发送至服务器的数据（key/value）
callback（可选）Function请求成功的回调函数
type（可选）String服务端返回内容的格式，常见的有json、html、text、xml等
$.get()方法参数解释
  • 请求样例：
function testGet(){
    $.get("url", {}, function(res) {
         console.log(res)
    })
}

四、$.post( )函数

GET 请求服务器方式常用于获取服务器数据，而 POST 请求服务器方式常用于向服务器发送数据，可携带参数量较大。

  • 请求结构

$.post( url，[ data ]，[ callback ]，[ type ])

  • 请求样例：
function testPost(){
    let data = {username: "ljc", password: "123456"} // 准备向服务器发送的内容
    $.post("url", data, function(res) {
         console.log(res)
    })
}

五、$.ajax( )函数

前面提到的$.get()，$.post()，$.getScript()，$.getJSON()这些方法，都是基于$.ajax()方法构建的，$.ajax()是jQuery最底层的Ajax实现，因为可以用来代替前面的所有方法。

所以如果需要编写复杂的Ajax程序，那么就要用$.ajax()，$.ajax()不仅能实现与$.get()，$.post()同样的功能，而且还可以设定beforeSend（提交前回调函数）、error（请求失败后处理）、success（请求成功后处理）、complete（请求完成后处理）回调函数，通过设定这些回调函数，可以给用户更多的Ajax提示信息，另外，还有一些参数可以设置Ajax请求的超时时间或者页面的“最后更改”状态。

$.ajax({
    url："", //请求地址
    type: "get | post | put | delete ", //默认是get
    data:{
         "usr":"ljc",
         "pwd":"123456"
    },
    dataType:"html | text | json | xml 等", //请求数据类型
    success: function(res){  //请求成功时
         console.log(res)
    },
    error: function(res){  //请求失败时
         console.log('error')
    },
    timeout: 10000, //超时时间

})
上一篇