基于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) {} // 请求成功之后的回调函数
})