目录
一、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])
参数名参数类型是否必选说明urlstring是要请求的资源地址dataobject否请求资源期间要携带的参数callbackfunction否请求成功时的回调函数
① $.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])
参数名参数类型是否必选说明urlstring是提交数据的地址dataobject否要提交的数据callbackfunction否数据提交成功时的回调函数
$.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 对象，通过它，可以 请求服务器上的数据资源.
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 方式
网络数据请求的库，相比于原生的 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 请求
语法：
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({
请求类型',
请求的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>这次的分享到这就结束啦~希望可以收到你的小心心~
