教你用三种不同方式获取 GET 和 POST 请求
目录
一、jQuery 方式
1. $.get() 获取数据
① $.get() 发起不带参数的请求
② $.get() 发起带参数的请求
2. $.post() 提交数据
$.post() 向服务器提交数据
3. $.ajax() 既可以获取也可以提交数据
① 使用 $.ajax() 发起 GET 请求（只需要将 type 属性设置为' GET '即可）
② 使用 $.ajax() 发起 POST 请求
二、xhr 方式
1. 使用 xhr 发起 GET 请求
2. 使用 xhr 发起 POST 请求
三、axios 方式
1. 使用 axios 发起 GET 请求
2. 使用 axios 发起 POST 请求
3. 直接使用 axios 发起请求
① 直接使用 axios 发起 GET 请求
② 直接使用 axios 发起 POST 请求
今天分享的内容都是数据交互中的重中之重，满满的干货，一定要仔细看噢~
一、jQuery 方式
浏览器中提供的XMLHttpRequest用法比较复杂，所以jQuery对XMLHttpRequest进行了封装,提供了一系列Ajax相关的函数，极大地降低了Ajax的使用难度。
jQuery 中发起 Ajax 请求最常用的三个方法如下：
1. $.get() 获取数据
$.get(url,[data],[callback])
参数名 参数类型 是否必选 说明 url string 是 要请求的资源地址 data object 否 请求资源期间要携带的参数 callback function 否 请求成功时的回调函数
① $.get() 发起不带参数的请求
$.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)
})切记！！！其中参数是以对象的形式
2. $.post() 提交数据
$.post(url,[data],[callback])
参数名 参数类型 是否必选 说明 url string 是 提交数据的地址 data object 否 要提交的数据 callback function 否 数据提交成功时的回调函数
$.post() 向服务器提交数据
$.post(
'http://www.liulongbin.top:3006/api/addbook', //请求的 URL 地址
{ bookname: '水浒传', author: '施耐庵', publisher: '上海图书出版社'}, //提交的数据
function(res) { // 回调函数
console.log(res)
}
)3. $.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',
data: { id: 1 }
success: function(res) {
console.log(res)
}
})② 使用 $.ajax() 发起 POST 请求
$.ajax({
type: 'post',
url: 'http://www.liulongbin.top:3006/api/getbooks',
data: {
bookname: '水浒传',
author: '施耐庵',
publisher: '上海图书出版社'
},
success: function(res) {
console.log(res)
}
})既然了解了概念，那我们就实操一下，下面看个例题：实现图书列表的增删显示功能
实现效果如下：
实现代码如下：
Document
添加新图书
书名
作者
出版社
Id
书名
作者
出版社
操作
二、xhr 方式
XMLHttpRequest(简称 xhr) 是浏览器提供的 Javascript 对象，通过它，可以 请求服务器上的数据资源. 之前所学的 jQuery 中的 Ajax 函数，就是基于 xhr 对象封装出来的
1. 使用 xhr 发起 GET 请求
方法如下图所示：
// 1. 创建 xhr 对象
var xhr = new XMLHttpRequest()
// 2. 调用 open 函数，指定 请求方式 与 URL地址
xhr.open('GET','http://www.liulongbin.top:3006/api/getbooks')
// 3. 调用 send 函数，发起 Ajax 请求
xhr.send()
// 4. 监听 onreadystatechange 事件
xhr.onreadystatechange = function() {
// 4.1 监听 xhr 对象的请求状态 readyState; 与服务器响应的状态 status
if(xhr.readyState === 4 && xhr.status === 200) {
// 4.2 打印服务器响应回来的数据
console.log(xhr.responseText);
}
}如果发起的是带参数的 GET 请求，只需要在调用 xhr.open 期间，为 URL 地址指定参数即可：
xhr.open('GET','http://www.liulongbin.top:3006/api/getbooks?id=1&bookname=西游记')
多个参数之间用 & 连接
2. 使用 xhr 发起 POST 请求
方法如下图所示：
// 1. 创建 xhr 对象
var xhr = new XMLHttpRequest()
// 2. 调用 open 函数，指定 请求方式 与 URL地址
xhr.open('POST','http://www.liulongbin.top:3006/api/addbooks')
// 3. 设置 Content-Type 属性（固定写法）
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
// 4. 调用 send 函数，同时将数据以 查询字符串 的形式，提交给服务器
xhr.send('bookname=水浒传&author=施耐庵&publisher=天津图书出版社')
// 5. 监听 onreadystatechange 事件
xhr.onreadystatechange = function() {
// 4.1 监听 xhr 对象的请求状态 readyState; 与服务器响应的状态 status
if(xhr.readyState === 4 && xhr.status === 200) {
// 4.2 打印服务器响应回来的数据
console.log(xhr.responseText);
}
}以 xhr 方式发起 PSOT 和 GET 请求的区别：
① 传递数据参数的位置不同：GET 方式是写在 URL 地址的后面，而 POST 方式是写在xhr.send() 中
② 发起 POST 请求时，必须写 xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded') ，GET 请求不需要写
三、axios 方式
Axios 是专注于网络数据请求的库，相比于原生的 XMLHttpRequest 对象， axios 简单易用. 相比于 jQuery，axios 更加轻量化，只专注于网络数据请求
使用前要先导入 axios.js 包
1. 使用 axios 发起 GET 请求
语法：
axios.get('url', { params: { /*参数*/} }).then(callback)
代码如下：
// 请求 URL 地址
var url = 'http://www.liulongbin.top:3006/api/get'
// 请求的参数对象
var paramsObj = { name: 'zs', age: 20 }
// 调用 axios.get() 发起 GET 请求
axios.get(url, { params: paramsObj }).then(function(res){
// res.data 是服务器返回的数据
var result = res.data
console.log(res);
})2. 使用 axios 发起 POST 请求
语法：
axios.post('url', { /*参数*/} ).then(callback)
代码如下：
// 请求 URL 地址
var url = 'http://www.liulongbin.top:3006/api/post'
// 要提交到服务器的数据
var dataObj = { location: '北京', address: '顺义' }
// 调用 axios.post() 发起 POST 请求
axios.post(url, dataObj).then(function(res){
// res.data 是服务器返回的数据
var result = res.data
console.log(res);
})axios 发起 GET 和 POST 语法的区别：
GET 请求时，参数要通过 params 属性提供，而 POST 不用
3. 直接使用 axios 发起请求
axios 也提供了类似于 jQuery 中 $.ajax() 的函数，语法如下：
axios({
method: '请求类型',
url: '请求的URL地址'
data: { /* POST数据 */}，
params: { /* GET参数 */}
}).then(callback)
① 直接使用 axios 发起 GET 请求
axios({
method: 'GET',
url: 'http://www.liulongbin.top:3006/api/get',
params: { // GET 参数要通过 params 属性提供
name: 'zs',
age: 20
}
}).then(function(res){
console.log(res.data);
})② 直接使用 axios 发起 POST 请求
axios({
method: 'POST',
url: 'http://www.liulongbin.top:3006/api/post',
data: { // POST 参数要通过 data 属性提供
bookname: '程序员的自我修养',
price: 666
}
}).then(function(res){
console.log(res.data);
})案例实践：使用 axios 发起 GET 和 POST 请求获取数据，并渲染到页面
实现效果：
实现代码：
Document
这次的分享到这就结束啦~希望可以收到你的小心心~
