一 FormData的使用
(1)FormData对象管理表单数据
Ajax操作往往用来提交表单数据。为了方便表单处理, HTML5新增了一个FormData对象,可以模拟表单操作:
// 1.新建FormData对象
var fd = new FormData ()
// 2.为FormData 添加表单项
fd.append ('uname', 'zs')
fd.append('upwd','123456')
//3.创建XHR对象
var xhr = new XMLHttpRequest ()
// 4.指定请求类型与URI地址
xhr.open('POsT', 'http://www. liulongbin.top: 3006/api/formdata')
// 5.直接提交FormData 对象,这与提交网页表单的效果,完全一样
xhr.send (fd)
FormData对象也可以用来获取网页表单的值,示例代码如下:
// 1. 通过 DOM 操作,获取到 form 表单元素
var form = document.querySelector('#form1')
form.addEventListener('submit', function (e) {
// 阻止表单的默认提交行为
e.preventDefault()
// 创建 FormData,快速获取到 form 表单中的数据
var fd = new FormData(form)
var xhr = new XMLHttpRequest()
xhr.open('POST', 'http://www.liulongbin.top:3006/api/formdata')
xhr.send(fd)
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(JSON.parse(xhr.responseText))
}
}
})
二 FormData上传文件
新版XMLHttpRequest对象,不仅可以发送文本信息,还可以上传文件。
实现步骤:
①定义UI结构
<!-- 1. 文件选择框 -->
<input type="file" id="file1" />
<!-- 2. 上传文件的按钮 -->
<button id="btnUpload">上传文件</button>
<br />
<!-- 3. img 标签,来显示上传成功以后的图片 -->
<img src="" alt="" id="img" width="800" />
②验证是否选择了文件
// 1. 获取到文件上传按钮
var btnUpload = document.querySelector('#btnUpload')
// 2. 为按钮绑定单击事件处理函数
btnUpload.addEventListener('click', function () {
// 3. 获取到用户选择的文件列表
var files = document.querySelector('#file1').files
if (files.length <= 0) {
return alert('请选择要上传的文件!')
}
})
③向FormData中追加文件
//创建FormData对象
var fd = new FormData()
// 将用户选择的文件,添加到 FormData 中
// fd.append('自定义文件名',文件),files是一个数组,取第一个文件所以索引为0
fd.append('avatar', files[0])
④使用xhr发起上传文件的请求
//1.创建xhr对象
var xhr = new XMLHttpRequest ()
// 2.调用open函数,指定请求类型与URL地址。其中,请求类型必须为POST
xhr. open('POST', 'http://www.liulongbin.top:3006/api/upload/avatar')
// 3.发起请求
xhr.send (fd)
⑤监听onreadystatechange事件
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
var data = JSON.parse(xhr.responseText)
if (data.status === 200) {
// 上传成功
document.querySelector('#img').src = 'http://www.liulongbin.top:3006' + data.url
} else {
// 上传失败
console.log('图片上传失败!' + data.message)
}
}
}
三 显示文件上传进度
(1)新版本的XMLHttpRequest对象中,可以通过监听xhr.upload.onprogress事件,来获取到文件的上传进度。
var xhr = new XMLHttpRequest()
// 监听文件上传的进度(监听xhr.upload 的onprogress 事件)
xhr.upload.onprogress = function (e) {
//e. lengthComputable是一个布尔值,表示当前上传的资源是否具有可计算的长度
if (e.lengthComputable) {
// e.loaded 已传输的字节
// e.total 需传输的总字节
// 计算出上传的进度
var procentComplete = Math.ceil((e.loaded / e.total) * 100)
console.log(procentComplete)
}}
(2)导入需要的库
<link rel="stylesheet" href="./lib/bootstrap.css" />
<script src="./lib/jquery.js"></script>
<!-- bootstrap 中的进度条 -->
<div class="progress" style="width: 500px; margin: 15px 10px;">
<div class="progress-bar progress-bar-striped active" style="width: 0%" id="percent">
0%
</div>
</div>
(3)监听上传进度的事件
xhr.upload.onprogress = function(e) {
if(e.lengthComputable) {
// 1.计算出当前上传进度的百分比
var percentCdaplete = Math.ceil((e.loaded/e.total)*100)
$('#percent')
// 2.设置进度条的宽度
.attr('style', 'width:' + percentComplete + '%')
// 3.显示当前的上传进度百分比
.html(percentComplete + '%')
}
}
(4)监听上传完成的事件
xhr.upload.onload=function(){
$('#percent')
//移除上传中的类样式
.removeClass()
//添加上传完成的类样式
.addClass('progress-bar progress-bar-success')
}
四 jQuery实现文件上传
(1)定义UI结构
<!--导入jQuery -->
<script src="./1ib/jquery.js"></script>
<!--文件选择框-->
<input type="file" id="file1" />
<!--上传文件按钮-->
<button id="btnUpload">上传</button>
<br />
<img src="./images/loading.gif" alt="" style="display: none;" id="loading" />
(2)验证是否选择了文件
$('#btnUpload').on('click', function() {
// 1.将jQuery 对象转化为DOM对象,并获取选中的文件列表
// $('#file1')是jQuery对象,通过加[0]转化为原生dom对象
var files = $('#file1')[0].files
// 2.判断是否选择了文件
if (files.length <= 0) {
return alert('请选择文件后再上传!')
}
})
(3)向FormData中添加文件
//创建FormData对象
var fd = new FormData()
// 将用户选择的文件,添加到 FormData 中
// fd.append('自定义文件名',文件),files是一个数组,取第一个文件所以索引为0
fd.append('avatar', files[0])
(4) 使用jQuery发起上传文件的请求
$.ajax({
method:'POST' ,
url:'http://www.liulongbin.top:3006/api/upload/avatar',
data:fd,
//不修改Content-Type 属性,使用FormData 默认的Content-Type 值
contentType:false,
//不对FormData 中的数据进行url编码,而是将FormData 数据原样发送到服务器
processData:false,
success:function(res) {
console.log(res)
}
})
jQuery实现loading效果
(1)ajaxStart(callback)
Ajax请求开始时,执行ajaxStart函数。可以在ajaxStart的callback中显示loading效果,示例代码如下:
//自jQuery 版本1.8起,该方法只能被附加到文档
$ (document).ajaxStart (function () {
$('#loading').show ()
})
注意: $(document).ajaxStart()函数会监听当前文档内所有的Ajax请求。
(2) ajaxStop(callback)
Ajax请求结束时,执行ajaxStop函数。可以在ajaxStop的callback中隐藏loading效果,示例代码如下:
//自jQuery 版本1.8起,该方法只能被附加到文档
$ (document).ajaxStart (function () {
$('#loading').hide()
})
五 基于axios发送ajax请求
axios发起get请求的语法:
axios.get('url', { params:{ /*参数*/ } }) . then (callback)
具体请求示例:
var url = 'http://www.liulongbin.top:3006/api/get'
var paramsObj = { name: 'zs', age: 20 }
axios.get(url, { params: paramsObj }).then(function (res) {
//res.data是服务器返回的数据
console.log(res.data)
})
axios发起post请求的语法:
axios.post('url', { /*参数*/ }) . then (callback)
具体请求示例:
var url = 'http://www.liulongbin.top:3006/api/post'
var dataObj = { address: '北京', location: '顺义区' }
axios.post(url, dataObj).then(function (res) {
console.log(res.data)
})
axios也提供了类似于jQuery中$.ajax()的函数,语法如下:
axios ({
method: '请求类型',
url: ‘请求的URL地址",
data: { /* POST数据*/ },
params: { /* GET参数*/ }
}) . then (callback)