教你用三种不同方式获取 GET 和 POST 请求
目录
① 使用 $.ajax() 发起 GET 请求（只需要将 type 属性设置为' GET '即可）
今天分享的内容都是数据交互中的重中之重，满满的干货，一定要仔细看噢~
一、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)
}
})既然了解了概念，那我们就实操一下，下面看个例题：实现图书列表的增删显示功能
实现效果如下：
实现代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="bootstrap.css">
<script src="jQuery.min.js"></script>
</head>
<body style="padding: 15px">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">添加新图书</h3>
</div>
<div class="panel-body form-inline">
<div class="input-group">
<div class="input-group-addon">书名</div>
<input type="text" class="form-control" id="iptBookname" placeholder="请输入书名">
</div>
<div class="input-group">
<div class="input-group-addon">作者</div>
<input type="text" class="form-control" id="iptAuthor" placeholder="请输入作者">
</div>
<div class="input-group">
<div class="input-group-addon">出版社</div>
<input type="text" class="form-control" id="iptPublisher" placeholder="请输入出版社">
</div>
<button id="btn" class="btn btn-primary">添加</button>
</div>
</div>
<table class="table table-bordered table-hover">
<thead>
<tr>
<th>Id</th>
<th>书名</th>
<th>作者</th>
<th>出版社</th>
<th>操作</th>
</tr>
</thead>
<tbody id="tb">
</tbody>
</table>
<script>
$(function(){
//获取图书列表数据
function getBookList(){
$.get('http://www.liulongbin.top:3006/api/getbooks',function(res){
if(res.status !== 200) return alert('获取数据失败！');
// 把获取到的数据都存放在数组中
var rows = []
$.each(res.data, function(i,item){
rows.push('<tr><td>'+item.id+'</td><td>'+item.bookname+'</td><td>'+item.author+'</td><td>'+item.publisher+'</td><td><a href:"javascript:;" class="del" data-id="'+item.id+'">删除</a></td></tr>')
})
// 将数组转化为字符串渲染到页面
$('#tb').empty().append(rows.join(''))
})
}
getBookList()
//删除图书
$('tbody').on('click','.del',function(){
var id = $(this).attr('data-id')
$.get('http://www.liulongbin.top:3006/api/delbook',{id: id},function(res){
if(res.status !== 200) return alert('删除图书失败！')
// 调用该函数，把页面重新渲染一遍
getBookList()
})
})
$('#btn').on('click',function(){
// trim() 函数可以去除字符串两端的空格
var bookname = $('#iptBookname').val().trim()
var author = $('#iptAuthor').val().trim()
var publisher = $('#iptPublisher').val().trim()
if(bookname.length <= 0 || author.length <=0 || publisher.length <=0) {
return alert('请填写完整的图书信息！')
}
// 添加图书
$.post('http://www.liulongbin.top:3006/api/addbook',{bookname: bookname, author: author,publisher: publisher},function(res){
if(res.status !== 201) return alert('添加图书失败！')
getBookList()
// 清空输入框内容
$('#iptBookname').val('')
$('#iptAuthor').val('')
$('#iptPublisher').val('')
})
})
})
</script>
</body>
</html>二、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 请求获取数据，并渲染到页面
实现效果：
实现代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./axios.js"></script>
<style>
body {
padding-left: 50px;
}
.container {
width: 300px;
height: 150px;
box-shadow: 0 0 5px rgba(0,0,0,0.8);
background-color: #c7c7c7;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div class="container">
</div>
<button id="btn1">get更换</button>
<button id="btn2">post更换</button>
<script>
document.querySelector('#btn1').addEventListener('click',function(){
var url = 'https://xl.xilinglaoshi.com:8001/fenshou'
axios({
method: 'GET',
url: url,
}).then(function(res){
// 获取到需要的数据并渲染到页面
document.querySelector('.container').innerHTML = res.data.data[0].content;
})
})
document.querySelector('#btn2').addEventListener('click',function(){
var url = 'https://xl.xilinglaoshi.com:8001/qingshi'
axios({
method:'POST',
url: url,
}).then(function(res){
document.querySelector('.container').innerHTML = res.data.data[0].content;
})
})
</script>
</body>
</html>这次的分享到这就结束啦~希望可以收到你的小心心~
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
THE END
二维码