基于jQuery的三种AJAX请求

寻技术 JQuery 2023年07月11日 147

基于jQuery的三种AJAX请求

1. 介绍

  • get请求 通常用于 获取服务端资源(向服务器要资源)

​ 例如:根据URL地址,从服务器获取HTML文件、CSS文件、JS文件、图片文件、数据资源等。

  • post请求 通常用于 向服务器提交数据(往服务器发送资源)

​ 例如:登录时向服务器提交的登录信息、注册是向服务器提交的注册信息、添加用户时向服务器提交的用户信息等各种数据提交操作。

  • ajax请求 就比较综合,既可以发送 get请求 也可以发送 post请求

2. 用法

2.1. get请求

语法:

$.get(url, [data], [callback]);  // 带有中括号的参数表示可以省略

参数介绍:

参数名 是否可省略 参数类型 参数作用
url 不可省略 string 规定你请求的url
data 可省略 object 请求资源期间要携带的参数
callback 可省略 function 请求成功后所执行的函数名

案例:

 // 发送get请求,请求 bookname 为 '西游记' 的数据
 $.get('http://www.liulongbin.top:3006/api/getbooks', { bookname: '西游记' }, function (res) {
   console.log(res);  // res 是服务器返回的数据
})

2.2. post请求

语法:

$.post(url, [data], [callback]);  // 带有中括号的参数表示可以省略

参数介绍:

参数名 是否可省略 参数类型 参数作用
url 不可省略 string 规定你请求的url
data 可省略 object 要提交的数据
callback 可省略 function 请求成功后所执行的函数名

案例:

// 定义url
let url = 'http://www.liulongbin.top:3006/api/addbooks'  
// 定义data数据
let data = {
  bookname: '富婆成长计',
  author: 'tuoni',
  publisher: '广东出版社'
}
// post请求
$.post(url, data, function (res) {
  console.log(res);
})

2.3. ajax请求

语法以及参数:

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

用微信“扫一扫”