jQuery中的Ajax以及请求函数

Posted 别Null.了

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jQuery中的Ajax以及请求函数相关的知识,希望对你有一定的参考价值。

目录

认识Ajax

Ajax介绍

Ajax的应用场景

Ajax的优势

jQuery中的Ajax

$.get()函数

$.post()

$.ajax()

接口

通过GET方式请求接口的过程

通过POST方式请求接口的过程


认识Ajax

Ajax介绍

Ajax:Asynchronous javascript And XML,异步JavaScriptXML技术。不是一门新的语言或技术,是由JavaScriptXMLDOMCSS等多种已有技术组合而成的一种浏览器端技术。用于实现网页与服务器进行异步交互的功能。

通俗的理解就是:在网页中利用XMLHttpRequest 对象和服务器进行数据交互的方式,就是Ajax

Ajax的应用场景

  1. 用户名检测:注册用户时,通过Ajax的形式,动态的检测用户名是否被占用。(判断数据库里面有没有此用户名的记录,所以必须在数据库服务器中查找,但是只有应用服务器才可以在数据库中查找,这时候页面不可以刷新,这就是典型的Ajax)
  2. 搜索提示:当输入搜索关键字时,通过ajax的形式,动态加载搜索提示列表。
  3. 数据分页显示:当点击页码值的时候,通过ajax的形式,根据页码值动态刷新表格的数据。
  4. 数据的增删改查:数据的添加、删除、修改、查询操作,都需要ajax的形式来实现数据的交互。

Ajax的优势

  • 减轻服务器的负担;
  • 节省带宽;
  • 用户体验更好

jQuery中的Ajax

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

$.get()函数

用来发起get请求,从而将服务器上的资源请求到客户端来进行使用。

语法格式为:  $.get(url, [data], [callback])  

参数名参数类型是否必选说明
urlstring要请求的资源地址
dataobject请求资源期间要携带的参数
callbackfunction(回调函数)请求成功时的回调函数

$.get()发起请求示例:

//$.get()发起不带参数的请求:直接提供请求的url地址和请求成功之后的回调函数
$.get('http://www.liulongbin.top:3006/api/getbooks', function(res) 
    console.log(res) // 这里的 res 是服务器返回的数据
)

//$.get()发起带参数的请求
$.get('http://www.liulongbin.top:3006/api/getbooks',  id: 1 , function(res) 
    console.log(res)
)

$.post()

jQuery $.post() 函数的功能单一,专门用来发起 post 请求,从而向服务器提交数据。

语法格式为:  $.post(url, [data], [callback])  

参数名参数类型是否必选说明
urlstring提交数据的地址
dataobject要提交的数据
callbackfunction(回调函数)数据提交成功时的回调函数

使用$.post()向服务器提交数据的示例:

$.post(
   'http://www.liulongbin.top:3006/api/addbook', // 请求的URL地址
    bookname: '水浒传', author: '施耐庵', publisher: '上海图书出版社' , // 提交的数据
   function(res)  // 回调函数
      console.log(res)
   
)

$.ajax()

$.ajax(
   type: '', // 请求的方式,例如 GET 或 POST
   url: '',  // 请求的 URL 地址
   data:  ,// 这次请求要携带的数据
   success: function(res)   // 请求成功之后的回调函数
)

使用$.ajax()发起GET请求:只需要将type属性的值设置为“GET”。

$.ajax(
   type: 'GET', // 请求的方式
   url: 'http://www.liulongbin.top:3006/api/getbooks',  // 请求的 URL 地址
   data:  id: 1 ,// 这次请求要携带的数据
   success: function(res)  // 请求成功之后的回调函数
       console.log(res)
   
)

使用$.ajax()发起POST请求:只需要将type属性的值设置为“POST”。

$.ajax(
   type: 'POST', // 请求的方式
   url: 'http://www.liulongbin.top:3006/api/addbook',  // 请求的 URL 地址
   data:  // 要提交给服务器的数据
      bookname: '水浒传',
      author: '施耐庵',
      publisher: '上海图书出版社'
    ,
   success: function(res)  // 请求成功之后的回调函数
       console.log(res)
   
)

接口

使用 Ajax 请求数据时,被请求的 URL 地址,就叫做数据接口(简称接口)。同时,每个接口必须有请求方式。

例如:

http://www.liulongbin.top:3006/api/getbooks    获取图书列表的接口(GET请求)

http://www.liulongbin.top:3006/api/addbook     添加图书的接口(POST请求)

接口测试工具:PostMan(对接口进行调用和测试)

通过GET方式请求接口的过程

通过POST方式请求接口的过程

以上是关于jQuery中的Ajax以及请求函数的主要内容,如果未能解决你的问题,请参考以下文章

前端面试题之手写promise

jquery中的ajax请求用法以及参数详情

jQuery发送Ajax请求以及出现的问题

如何将请求数据传递到 JQuery.ajax 中的 Complete 事件中

JavaScript封装Ajax工具函数及jQuery中的ajax

.JQuery中的Ajax