diff --git "a/27 \346\235\250\346\242\205/ajax\351\242\204\344\271\240.md.txt" "b/27 \346\235\250\346\242\205/ajax\351\242\204\344\271\240.md.txt" new file mode 100644 index 0000000000000000000000000000000000000000..0d6bc139777a0f19cc8b46fa603fc81b47a404e6 --- /dev/null +++ "b/27 \346\235\250\346\242\205/ajax\351\242\204\344\271\240.md.txt" @@ -0,0 +1,77 @@ +什么是Ajax + AJAX(Asynchronous Javascript And XML)翻译成中文就是“异步Javascript和XML”。 + 即使用Javascript语言与服务器进行异步交互,传输的数据为XML(当然,传输的数据不只是XML)。 + +ajax的特点 +优点 +可以无需刷新页面与服务器端进行通信 + +允许你根据用户时间来更新部分页面内容 + +缺点 +没有浏览历史,不能回退 + +存在跨域问题 + +SEO(搜索引擎优化)不太友好 + +ajax()函数语法 + $.ajax({ + type: '',//请求的方式,GET或 POST + url: '',//请求的url地址 + data: {},//请求要求带的数据 + success: function (res) { }//请求成功后的回调函数 + }) + +上传文件 +实现步骤: + +定义 UI 结构 +验证是否选择了文件 +向 FormData 中追加文件 +使用 xhr 发起上传文件的请求 +监听 onreadystatechange 事件 + + + + +
+ + // 2.验证是否选择了文件 + var upload = document.querySelector('#btnUpload') + upload.addEventListener('click', function () { + //选择框的 files数组 就是用户选择的文件数组 + var files = document.querySelector('#file').files + if (files.length <= 0) { + alert('请选择需要上传的文件') + } + + // 3.向 FormData 中追加文件 + var fd = new FormData(); + // 将用户选择的文件 添加到 FormData 中 + fd.append('avatae', files[0]) + + // 4.使用 xhr 发起上传文件的请求 + // 创建 xhr 对象 + var xhr = new XMLHttpRequest() + // 调用 open 函数,指定请求类型与URL地址。其中,请求类型必须为 POST + xhr.open('POST', 'http://www.liulongbin.top:3006/api/upload/avatar') + //发起请求 + xhr.send(fd) + // 5.监听 onreadystatechange 事件 + xhr.onreadystatechange = function () { + if (xhr.readyState === 4 && xhr.status === 200) { + // console.log(xhr.responseText); + // 打印格式{ "message": "上传文件成功!", "status": 200, "url": "/uploads/1662017485671_473443c41b39442b98a7aea7254aa5af.jpg" } + var data = JSON.parse(xhr.responseText); + if (data.status === 200) {//证明上传成功 + // 将图片地址,设置为 img标签 的 src + var img = document.querySelector('#img'); + img.src = 'http://www.liulongbin.top:3006' + data.url; + alert(data.message); + } else { + alert(data.message); + } + } + } + })