【JavaWeb学习-第四章（1）】Ajax

Cpdr2023-12-30 14:09

文章目录

  • [1. Ajax介绍](#1. Ajax介绍)
    • [1.1. Ajax概述](#1.1. Ajax概述)
    • [1.2. Ajax作用](#1.2. Ajax作用)
    • [1.3. 同步异步](#1.3. 同步异步)
  • [2. 原生Ajax](#2. 原生Ajax)
  • [3. Axios](#3. Axios)
    • [3.1. Axios的基本使用](#3.1. Axios的基本使用)
    • [3.2. Axios快速入门](#3.2. Axios快速入门)
    • [3.3. 请求方法的别名](#3.3. 请求方法的别名)
    • [3.4. 案例](#3.4. 案例)

注意：本篇博文中的代码只含前端的，后端实现的代码没有（因为还没有学到这个知识点），因此代码功能无法完全实现。

1. Ajax介绍

1.1. Ajax概述

前端页面中的数据，如下图所示的表格中的学生信息，应该来自于后台，那么我们的后台和前端是互不影响的2个程序 ，那么我们前端应该如何从后台获取数据呢？

因为是2个程序，所以必须涉及到2个程序的交互 ，所以这就需要用到我们接下来学习的Ajax技术。

Ajax: 全称A synchronous J avaScript A nd X ML，异步的JavaScript和XML 。其作用有如下2点：

① 与服务器进行数据交换 ：通过Ajax可以给服务器发送请求，并获取服务器响应的数据。

② 异步交互：可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术，如：搜索联想、用户名是否可用的校验等等。

1.2. Ajax作用

我们详细的解释一下Ajax技术的2个作用

① 与服务器进行数据交互

如下图所示前端资源被浏览器解析，但是前端页面上缺少数据，前端可以通过Ajax技术，向后台服务器发起请求，后台服务器接受到前端的请求，从数据库中获取前端需要的资源，然后响应给前端，前端在通过我们学习的vue技术，可以将数据展示到页面上，这样用户就能看到完整的页面了。此处可以对比JavaSE中的网络编程技术来理解。

② 异步交互：可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术。

如下图所示，当我们在百度搜索java时，下面的联想数据是通过Ajax请求从后台服务器得到的，在整个过程中，我们的Ajax请求不会导致整个百度页面的重新加载，并且只针对搜索栏这局部模块的数据进行了数据的更新 ，不会对整个页面的其他地方进行数据的更新，这样就大大提升了页面的加载速度，用户体验高。

1.3. 同步异步

针对于上述Ajax的局部刷新功能是因为Ajax请求是异步的 ，与之对应的有同步请求。接下来我们介绍一下异步请求和同步请求的区别。

（1）同步请求发送过程如下图所示：

浏览器页面在发送请求给服务器，在服务器处理请求的过程中，浏览器页面不能做其他的操作。只能等到服务器响应结束后才能，浏览器页面才能继续做其他的操作。

（2）异步请求发送过程如下图所示：

浏览器页面发送请求给服务器，在服务器处理请求的过程中，浏览器页面还可以做其他的操作。

2. 原生Ajax

对于Ajax技术有了充分的认知了，我们接下来通过代码来演示Ajax的效果。

此处我们先采用原生的Ajax代码 来演示。因为Ajax请求 是基于客户端 发送请求，服务器响应数据的技术。所以为了完成快速入门案例，我们需要提供服服务器端 和编写客户端

服务器端

因为这里暂时还没学服务器端的代码，所以此处已经直接提供好了服务器端的请求地址，我们前端直接通过Ajax请求访问该地址即可。后台服务器地址：http://yapi.smart-xwork.cn/mock/169327/emp/list

上述地址我们也可以直接通过浏览器来访问，访问结果如图所示：只截取部分数据

客户端

客户端的Ajax请求代码如下有如下4步：

第一步：首先我们再VS Code中创建AJAX的文件夹，并且创建.html的文件，提供如下代码，主要是按钮绑定单击事件，通过点击按钮，来发送ajax请求。

html 复制代码 
<!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>原生Ajax</title>
</head>
<body>
    
    <input type="button" value="获取数据" onclick="getData()">

    <div id="div1"></div>
    
</body>
<script>
    function getData(){
        
    }
</script>
</html>

第二步：创建XMLHttpRequest对象，用于和服务器交换数据，也是原生Ajax请求的核心对象，提供了各种方法。代码如下：

javascript 复制代码 
//1. 创建XMLHttpRequest
var xmlHttpRequest = new XMLHttpRequest();

第三步：调用对象的open()方法设置请求的参数信息，例如请求地址，请求方式。然后调用send()方法向服务器发送请求，代码如下：

javascript 复制代码 
//2. 发送异步请求
xmlHttpRequest.open('GET','http://yapi.smartxwork.cn/mock/169327/emp/list');
xmlHttpRequest.send();//发送请求

第四步：我们通过绑定事件的方式，来获取服务器响应的数据。

javascript 复制代码 
//3. 获取服务响应数据
xmlHttpRequest.onreadystatechange = function(){
	//此处判断 4表示浏览器已经完全接受到Ajax请求得到的响应， 200表示这是一个正确的Http请求，没有错误
	if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status ==200){
		document.getElementById('div1').innerHTML = xmlHttpRequest.responseText;
	}
}

最后我们通过浏览器打开页面，请求点击按钮，发送Ajax请求，最终显示结果如下图所示：

并且通过浏览器的F12抓包，我们点击网络中的XHR请求，发现可以抓包到我们发送的Ajax请求。XHR代表的就是异步请求

3. Axios

上述原生的Ajax请求 的代码编写起来还是比较繁琐的，所以接下来我们学习一门更加简单的发送Ajax请求的技术Axios 。Axios是对原生的Ajax进行封装，简化书写 。

Axios官网是：https://www.axios-http.cn

3.1. Axios的基本使用

Axios的使用比较简单，主要分为2步：

① 引入Axios文件

html 复制代码 
<script src="js/axios-0.18.0.js"></script>

② 使用Axios发送请求，并获取响应结果，官方提供的api很多，此处给出2种，如下

发送 get 请求

javascript 复制代码 
axios({
	method:"get",
	url:"http://localhost:8080/ajax-demo1/aJAXDemo1? username=zhangsan"
}).then(function (resp){
	alert(resp.data);
})

发送 post 请求

javascript 复制代码 
axios({
	method:"post",
	url:"http://localhost:8080/ajax-demo1/aJAXDemo1",
	data:"username=zhangsan"
}).then(function (resp){
	alert(resp.data);
});

axios()是用来发送异步请求的，小括号中使用 js的JSON对象传递请求相关的参数：

  • method属性：用来设置请求方式的。取值为 get 或者 post。
  • url属性：用来书写请求的资源路径。如果是 get 请求，需要将请求参数拼接到路径的后面，格式为： url?参数名=参数值&参数名2=参数值2。
  • data属性：作为请求体被发送的数据。也就是说如果是 post 请求的话，数据需要作为data 属性的值。

then() 需要传递一个匿名函数。我们将 then()中传递的匿名函数称为 回调函数 ，意思是该匿名函数在发送请求时不会被调用，而是在成功响应后调用的函数 。而该回调函数中的 resp 参数是对响应的数据进行封装的对象，通过 resp.data 可以获取到响应的数据。

3.2. Axios快速入门

后端实现

查询所有员工信息服务器地址：http://yapi.smart-xwork.cn/mock/169327/emp/list

根据员工id删除员工信息服务器地址：http://yapi.smart-xwork.cn/mock/169327/emp/deleteById

前端实现

首先在VS Code中创建js文件夹，与.html文件同级，然后将资料axios-0.18.0.js 文件拷贝到js目录下，然后创建名为02. Ajax-Axios.html的文件，工程结果如图所示：

axios-0.18.0.js 文件内容如下：

javascript 复制代码 
/* axios v0.18.0 | (c) 2018 by Matt Zabriskie */
!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.axios=t():e.axios=t()}(this,function(){return function(e){function t(r){if(n[r])return n[r].exports;var o=n[r]={exports:{},id:r,loaded:!1};return e[r].call(o.exports,o,o.exports,t),o.loaded=!0,o.exports}var n={};return t.m=e,t.c=n,t.p="",t(0)}([function(e,t,n){e.exports=n(1)},function(e,t,n){"use strict";function r(e){var t=new s(e),n=i(s.prototype.request,t);return o.extend(n,s.prototype,t),o.extend(n,t),n}var o=n(2),i=n(3),s=n(5),u=n(6),a=r(u);a.Axios=s,a.create=function(e){return r(o.merge(u,e))},a.Cancel=n(23),a.CancelToken=n(24),a.isCancel=n(20),a.all=function(e){return Promise.all(e)},a.spread=n(25),e.exports=a,e.exports.default=a},function(e,t,n){"use strict";function r(e){return"[object Array]"===R.call(e)}function o(e){return"[object ArrayBuffer]"===R.call(e)}function i(e){return"undefined"!=typeof FormData&&e instanceof FormData}function s(e){var t;return t="undefined"!=typeof ArrayBuffer&&ArrayBuffer.isView?ArrayBuffer.isView(e):e&&e.buffer&&e.buffer instanceof ArrayBuffer}function u(e){return"string"==typeof e}function a(e){return"number"==typeof e}function c(e){return"undefined"==typeof e}function f(e){return null!==e&&"object"==typeof e}function p(e){return"[object Date]"===R.call(e)}function d(e){return"[object File]"===R.call(e)}function l(e){return"[object Blob]"===R.call(e)}function h(e){return"[object Function]"===R.call(e)}function m(e){return f(e)&&h(e.pipe)}function y(e){return"undefined"!=typeof URLSearchParams&&e instanceof URLSearchParams}function w(e){return e.replace(/^\s*/,"").replace(/\s*$/,"")}function g(){return("undefined"==typeof navigator||"ReactNative"!==navigator.product)&&("undefined"!=typeof window&&"undefined"!=typeof document)}function v(e,t){if(null!==e&&"undefined"!=typeof e)if("object"!=typeof e&&(e=[e]),r(e))for(var n=0,o=e.length;n<o;n++)t.call(null,e[n],n,e);else for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&t.call(null,e[i],i,e)}function x(){function e(e,n){"object"==typeof t[n]&&"object"==typeof e?t[n]=x(t[n],e):t[n]=e}for(var t={},n=0,r=arguments.length;n<r;n++)v(arguments[n],e);return t}function b(e,t,n){return v(t,function(t,r){n&&"function"==typeof t?e[r]=E(t,n):e[r]=t}),e}var E=n(3),C=n(4),R=Object.prototype.toString;e.exports={isArray:r,isArrayBuffer:o,isBuffer:C,isFormData:i,isArrayBufferView:s,isString:u,isNumber:a,isObject:f,isUndefined:c,isDate:p,isFile:d,isBlob:l,isFunction:h,isStream:m,isURLSearchParams:y,isStandardBrowserEnv:g,forEach:v,merge:x,extend:b,trim:w}},function(e,t){"use strict";e.exports=function(e,t){return function(){for(var n=new Array(arguments.length),r=0;r<n.length;r++)n[r]=arguments[r];return e.apply(t,n)}}},function(e,t){function n(e){return!!e.constructor&&"function"==typeof e.constructor.isBuffer&&e.constructor.isBuffer(e)}function r(e){return"function"==typeof e.readFloatLE&&"function"==typeof e.slice&&n(e.slice(0,0))}/*!
 * Determine if an object is a Buffer
 *
 * @author   Feross Aboukhadijeh <https://feross.org>
 * @license  MIT
 */
    e.exports=function(e){return null!=e&&(n(e)||r(e)||!!e._isBuffer)}},function(e,t,n){"use strict";function r(e){this.defaults=e,this.interceptors={request:new s,response:new s}}var o=n(6),i=n(2),s=n(17),u=n(18);r.prototype.request=function(e){"string"==typeof e&&(e=i.merge({url:arguments[0]},arguments[1])),e=i.merge(o,{method:"get"},this.defaults,e),e.method=e.method.toLowerCase();var t=[u,void 0],n=Promise.resolve(e);for(this.interceptors.request.forEach(function(e){t.unshift(e.fulfilled,e.rejected)}),this.interceptors.response.forEach(function(e){t.push(e.fulfilled,e.rejected)});t.length;)n=n.then(t.shift(),t.shift());return n},i.forEach(["delete","get","head","options"],function(e){r.prototype[e]=function(t,n){return this.request(i.merge(n||{},{method:e,url:t}))}}),i.forEach(["post","put","patch"],function(e){r.prototype[e]=function(t,n,r){return this.request(i.merge(r||{},{method:e,url:t,data:n}))}}),e.exports=r},function(e,t,n){"use strict";function r(e,t){!i.isUndefined(e)&&i.isUndefined(e["Content-Type"])&&(e["Content-Type"]=t)}function o(){var e;return"undefined"!=typeof XMLHttpRequest?e=n(8):"undefined"!=typeof process&&(e=n(8)),e}var i=n(2),s=n(7),u={"Content-Type":"application/x-www-form-urlencoded"},a={adapter:o(),transformRequest:[function(e,t){return s(t,"Content-Type"),i.isFormData(e)||i.isArrayBuffer(e)||i.isBuffer(e)||i.isStream(e)||i.isFile(e)||i.isBlob(e)?e:i.isArrayBufferView(e)?e.buffer:i.isURLSearchParams(e)?(r(t,"application/x-www-form-urlencoded;charset=utf-8"),e.toString()):i.isObject(e)?(r(t,"application/json;charset=utf-8"),JSON.stringify(e)):e}],transformResponse:[function(e){if("string"==typeof e)try{e=JSON.parse(e)}catch(e){}return e}],timeout:0,xsrfCookieName:"XSRF-TOKEN",xsrfHeaderName:"X-XSRF-TOKEN",maxContentLength:-1,validateStatus:function(e){return e>=200&&e<300}};a.headers={common:{Accept:"application/json, text/plain, */*"}},i.forEach(["delete","get","head"],function(e){a.headers[e]={}}),i.forEach(["post","put","patch"],function(e){a.headers[e]=i.merge(u)}),e.exports=a},function(e,t,n){"use strict";var r=n(2);e.exports=function(e,t){r.forEach(e,function(n,r){r!==t&&r.toUpperCase()===t.toUpperCase()&&(e[t]=n,delete e[r])})}},function(e,t,n){"use strict";var r=n(2),o=n(9),i=n(12),s=n(13),u=n(14),a=n(10),c="undefined"!=typeof window&&window.btoa&&window.btoa.bind(window)||n(15);e.exports=function(e){return new Promise(function(t,f){var p=e.data,d=e.headers;r.isFormData(p)&&delete d["Content-Type"];var l=new XMLHttpRequest,h="onreadystatechange",m=!1;if("undefined"==typeof window||!window.XDomainRequest||"withCredentials"in l||u(e.url)||(l=new window.XDomainRequest,h="onload",m=!0,l.onprogress=function(){},l.ontimeout=function(){}),e.auth){var y=e.auth.username||"",w=e.auth.password||"";d.Authorization="Basic "+c(y+":"+w)}if(l.open(e.method.toUpperCase(),i(e.url,e.params,e.paramsSerializer),!0),l.timeout=e.timeout,l[h]=function(){if(l&&(4===l.readyState||m)&&(0!==l.status||l.responseURL&&0===l.responseURL.indexOf("file:"))){var n="getAllResponseHeaders"in l?s(l.getAllResponseHeaders()):null,r=e.responseType&&"text"!==e.responseType?l.response:l.responseText,i={data:r,status:1223===l.status?204:l.status,statusText:1223===l.status?"No Content":l.statusText,headers:n,config:e,request:l};o(t,f,i),l=null}},l.onerror=function(){f(a("Network Error",e,null,l)),l=null},l.ontimeout=function(){f(a("timeout of "+e.timeout+"ms exceeded",e,"ECONNABORTED",l)),l=null},r.isStandardBrowserEnv()){var g=n(16),v=(e.withCredentials||u(e.url))&&e.xsrfCookieName?g.read(e.xsrfCookieName):void 0;v&&(d[e.xsrfHeaderName]=v)}if("setRequestHeader"in l&&r.forEach(d,function(e,t){"undefined"==typeof p&&"content-type"===t.toLowerCase()?delete d[t]:l.setRequestHeader(t,e)}),e.withCredentials&&(l.withCredentials=!0),e.responseType)try{l.responseType=e.responseType}catch(t){if("json"!==e.responseType)throw t}"function"==typeof e.onDownloadProgress&&l.addEventListener("progress",e.onDownloadProgress),"function"==typeof e.onUploadProgress&&l.upload&&l.upload.addEventListener("progress",e.onUploadProgress),e.cancelToken&&e.cancelToken.promise.then(function(e){l&&(l.abort(),f(e),l=null)}),void 0===p&&(p=null),l.send(p)})}},function(e,t,n){"use strict";var r=n(10);e.exports=function(e,t,n){var o=n.config.validateStatus;n.status&&o&&!o(n.status)?t(r("Request failed with status code "+n.status,n.config,null,n.request,n)):e(n)}},function(e,t,n){"use strict";var r=n(11);e.exports=function(e,t,n,o,i){var s=new Error(e);return r(s,t,n,o,i)}},function(e,t){"use strict";e.exports=function(e,t,n,r,o){return e.config=t,n&&(e.code=n),e.request=r,e.response=o,e}},function(e,t,n){"use strict";function r(e){return encodeURIComponent(e).replace(/%40/gi,"@").replace(/%3A/gi,":").replace(/%24/g,"$").replace(/%2C/gi,",").replace(/%20/g,"+").replace(/%5B/gi,"[").replace(/%5D/gi,"]")}var o=n(2);e.exports=function(e,t,n){if(!t)return e;var i;if(n)i=n(t);else if(o.isURLSearchParams(t))i=t.toString();else{var s=[];o.forEach(t,function(e,t){null!==e&&"undefined"!=typeof e&&(o.isArray(e)?t+="[]":e=[e],o.forEach(e,function(e){o.isDate(e)?e=e.toISOString():o.isObject(e)&&(e=JSON.stringify(e)),s.push(r(t)+"="+r(e))}))}),i=s.join("&")}return i&&(e+=(e.indexOf("?")===-1?"?":"&")+i),e}},function(e,t,n){"use strict";var r=n(2),o=["age","authorization","content-length","content-type","etag","expires","from","host","if-modified-since","if-unmodified-since","last-modified","location","max-forwards","proxy-authorization","referer","retry-after","user-agent"];e.exports=function(e){var t,n,i,s={};return e?(r.forEach(e.split("\n"),function(e){if(i=e.indexOf(":"),t=r.trim(e.substr(0,i)).toLowerCase(),n=r.trim(e.substr(i+1)),t){if(s[t]&&o.indexOf(t)>=0)return;"set-cookie"===t?s[t]=(s[t]?s[t]:[]).concat([n]):s[t]=s[t]?s[t]+", "+n:n}}),s):s}},function(e,t,n){"use strict";var r=n(2);e.exports=r.isStandardBrowserEnv()?function(){function e(e){var t=e;return n&&(o.setAttribute("href",t),t=o.href),o.setAttribute("href",t),{href:o.href,protocol:o.protocol?o.protocol.replace(/:$/,""):"",host:o.host,search:o.search?o.search.replace(/^\?/,""):"",hash:o.hash?o.hash.replace(/^#/,""):"",hostname:o.hostname,port:o.port,pathname:"/"===o.pathname.charAt(0)?o.pathname:"/"+o.pathname}}var t,n=/(msie|trident)/i.test(navigator.userAgent),o=document.createElement("a");return t=e(window.location.href),function(n){var o=r.isString(n)?e(n):n;return o.protocol===t.protocol&&o.host===t.host}}():function(){return function(){return!0}}()},function(e,t){"use strict";function n(){this.message="String contains an invalid character"}function r(e){for(var t,r,i=String(e),s="",u=0,a=o;i.charAt(0|u)||(a="=",u%1);s+=a.charAt(63&t>>8-u%1*8)){if(r=i.charCodeAt(u+=.75),r>255)throw new n;t=t<<8|r}return s}var o="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";n.prototype=new Error,n.prototype.code=5,n.prototype.name="InvalidCharacterError",e.exports=r},function(e,t,n){"use strict";var r=n(2);e.exports=r.isStandardBrowserEnv()?function(){return{write:function(e,t,n,o,i,s){var u=[];u.push(e+"="+encodeURIComponent(t)),r.isNumber(n)&&u.push("expires="+new Date(n).toGMTString()),r.isString(o)&&u.push("path="+o),r.isString(i)&&u.push("domain="+i),s===!0&&u.push("secure"),document.cookie=u.join("; ")},read:function(e){var t=document.cookie.match(new RegExp("(^|;\\s*)("+e+")=([^;]*)"));return t?decodeURIComponent(t[3]):null},remove:function(e){this.write(e,"",Date.now()-864e5)}}}():function(){return{write:function(){},read:function(){return null},remove:function(){}}}()},function(e,t,n){"use strict";function r(){this.handlers=[]}var o=n(2);r.prototype.use=function(e,t){return this.handlers.push({fulfilled:e,rejected:t}),this.handlers.length-1},r.prototype.eject=function(e){this.handlers[e]&&(this.handlers[e]=null)},r.prototype.forEach=function(e){o.forEach(this.handlers,function(t){null!==t&&e(t)})},e.exports=r},function(e,t,n){"use strict";function r(e){e.cancelToken&&e.cancelToken.throwIfRequested()}var o=n(2),i=n(19),s=n(20),u=n(6),a=n(21),c=n(22);e.exports=function(e){r(e),e.baseURL&&!a(e.url)&&(e.url=c(e.baseURL,e.url)),e.headers=e.headers||{},e.data=i(e.data,e.headers,e.transformRequest),e.headers=o.merge(e.headers.common||{},e.headers[e.method]||{},e.headers||{}),o.forEach(["delete","get","head","post","put","patch","common"],function(t){delete e.headers[t]});var t=e.adapter||u.adapter;return t(e).then(function(t){return r(e),t.data=i(t.data,t.headers,e.transformResponse),t},function(t){return s(t)||(r(e),t&&t.response&&(t.response.data=i(t.response.data,t.response.headers,e.transformResponse))),Promise.reject(t)})}},function(e,t,n){"use strict";var r=n(2);e.exports=function(e,t,n){return r.forEach(n,function(n){e=n(e,t)}),e}},function(e,t){"use strict";e.exports=function(e){return!(!e||!e.__CANCEL__)}},function(e,t){"use strict";e.exports=function(e){return/^([a-z][a-z\d\+\-\.]*:)?\/\//i.test(e)}},function(e,t){"use strict";e.exports=function(e,t){return t?e.replace(/\/+$/,"")+"/"+t.replace(/^\/+/,""):e}},function(e,t){"use strict";function n(e){this.message=e}n.prototype.toString=function(){return"Cancel"+(this.message?": "+this.message:"")},n.prototype.__CANCEL__=!0,e.exports=n},function(e,t,n){"use strict";function r(e){if("function"!=typeof e)throw new TypeError("executor must be a function.");var t;this.promise=new Promise(function(e){t=e});var n=this;e(function(e){n.reason||(n.reason=new o(e),t(n.reason))})}var o=n(23);r.prototype.throwIfRequested=function(){if(this.reason)throw this.reason},r.source=function(){var e,t=new r(function(t){e=t});return{token:t,cancel:e}},e.exports=r},function(e,t){"use strict";e.exports=function(e){return function(t){return e.apply(null,t)}}}])});
//# sourceMappingURL=axios.min.map

然后在html中引入axios所依赖的js文件，并且提供2个按钮，绑定单击事件，分别用于点击时发送ajax请求，完整代码如下：

html 复制代码 
<!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, initialscale=1.0">
<title>Ajax-Axios</title>
<script src="js/axios-0.18.0.js"></script>
</head>
<body>
<input type="button" value="获取数据GET" onclick="get()">
<input type="button" value="删除数据POST" onclick="post()">
</body>
<script>
function get(){
//通过axios发送异步请求-get
 }
function post(){
//通过axios发送异步请求-post
 }
 </script>
</html>

然后分别使用Axios的方法，完整get请求和post请求的发送

get请求代码如下：

javascript 复制代码 
//通过axios发送异步请求-get
axios({
	method: "get",
	url: "http://yapi.smart-xwork.cn/mock/169327/emp/list"
 }).then(result => {
	console.log(result.data);
 })

post请求代码如下：

javascript 复制代码 
//通过axios发送异步请求-post
axios({
	method: "post",
	url: "http://yapi.smart-xwork.cn/mock/169327/emp/deleteById",
	data: "id=1"
 }).then(result => {
	console.log(result.data);
 })

浏览器打开，F12抓包，然后分别点击2个按钮，查看控制台效果如下：

完整代码如下：

html 复制代码 
<!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, initialscale=1.0">
	<title>Ajax-Axios</title>
	<script src="js/axios-0.18.0.js"></script>
</head>
<body>
	<input type="button" value="获取数据GET" onclick="get()">
	<input type="button" value="删除数据POST" onclick="post()">
</body>
<script>
	function get(){
		//通过axios发送异步请求-get
		axios({
			method: "get",
			url: "http://yapi.smartxwork.cn/mock/169327/emp/list"
		}).then(result => {
			console.log(result.data);
		})
	}
	function post(){
		// 通过axios发送异步请求-post
		axios({
			method: "post",
			url: "http://yapi.smartxwork.cn/mock/169327/emp/deleteById",
			data: "id=1"
		}).then(result => {
			console.log(result.data);
		})
	}
</script>
</html>

3.3. 请求方法的别名

Axios还针对不同的请求，提供了别名方式的api,具体如下：

方法 描述
axios.get(url [, config]) 发送get请求
axios.delete(url [, config]) 发送delete请求
axios.post(url [, data[, config]]) 发送post请求
axios.put(url [, data[, config]]) 发送put请求

我们目前只关注get和post请求，所以在上述的入门案例中，我们可以将get请求代码改写成如下：

javascript 复制代码 
axios.get("http://yapi.smartxwork.cn/mock/169327/emp/list").then(result => {
	console.log(result.data);
})

post请求改写成如下：

javascript 复制代码 
axios.post("http://yapi.smartxwork.cn/mock/169327/emp/deleteById","id=1").then(result => {
	console.log(result.data);
})

3.4. 案例

需求：

基于Vue及Axios完成数据的动态加载展示，如下图所示

其中数据是来自于后台程序 的，地址是：http://yapi.smart-xwork.cn/mock/169327/emp/list

分析：

前端首先是一张表格，我们缺少数据，而提供数据的地址已经有了，所以意味这我们需要使用Ajax请求获取后台的数据。

但是Ajax请求什么时候发送呢？

页面的数据应该是页面加载完成，自动发送请求，展示数据，所以我们需要借助vue的mounted钩子函数。

那么拿到数据了，我们该怎么将数据显示表格中呢？

这里就得借助v-for指令来遍历数据，展示数据。

步骤：

① 首先创建文件，提前准备基础代码，包括表格以及vue.js和axios.js文件的引入

② 我们需要在vue的mounted钩子函数中发送ajax请求，获取数据

③ 拿到数据，数据需要绑定给vue的data属性

④ 在<tr>标签上通过v-for指令遍历数据，展示数据

代码实现：

  1. 首先创建文件，提前准备基础代码，包括表格以及vue.js和axios.js文件的引入

提供初始代码如下：

html 复制代码 
<!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>Ajax-Axios-案例</title>
	<script src="js/axios-0.18.0.js"></script>
	<script src="js/vue.js"></script>
</head>
<body>
	<div id="app">
		<table border="1" cellspacing="0" width="60%">
			<tr>
				<th>编号</th>
				<th>姓名</th>
				<th>图像</th>
				<th>性别</th>
				<th>职位</th>
				<th>入职日期</th>
				<th>最后操作时间</th>
			</tr>
			<tr align="center" >
				<td>1</td>
				<td>Tom</td>
				<td>
					<img src="" width="70px" height="50px">
				</td>
				<td>
					<span>男</span>
					<!-- <span>女</span>-->
				</td>
				<td>班主任</td>
				<td>2009-08-09</td>
				<td>2009-08-09 12:00:00</td>
			</tr>
		</table>
	</div>
</body>
<script>
	new Vue({
		el: "#app",
		data: {
	}
});
</script>
</html>
  1. 在vue的mounted钩子函数，编写Ajax请求，请求数据，代码如下：
javascript 复制代码 
mounted () {
	//发送异步请求,加载数据
	axios.get("http://yapi.smartxwork.cn/mock/169327/emp/list").then(result => {
	})
}
  1. ajax请求的数据我们应该绑定给vue的data属性，之后才能进行数据绑定到视图；并且浏览器打开后台地址，数据返回格式如下图所示：

    因为服务器响应的json中的data属性才是我们需要展示的信息，所以我们应该将员工列表信息赋值给vue的data属性，代码如下：
javascript 复制代码 
//发送异步请求,加载数据
axios.get("http://yapi.smartxwork.cn/mock/169327/emp/list").then(result => {
	this.emps = result.data.data;
})

其中，data中生命emps变量，代码如下：

javascript 复制代码 
data: {
	emps:[]
},
  1. 在<tr>标签上通过v-for指令遍历数据，展示数据，其中需要注意的是图片的值，需要使用vue的属性绑定 ，男女的展示需要使用条件判断，其代码如下：
html 复制代码 
<tr align="center" v-for="(emp,index) in emps">
	<td>{{index + 1}}</td>
	<td>{{emp.name}}</td>
	<td>
		<img :src="emp.image" width="70px" height="50px">
	</td>
	<td>
		<span v-if="emp.gender == 1">男</span>
		<span v-if="emp.gender == 2">女</span>
	</td>
	<td>{{emp.job}}</td>
	<td>{{emp.entrydate}}</td>
	<td>{{emp.updatetime}}</td>
</tr>

完整代码如下：

html 复制代码 
<!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, initialscale=1.0">
	<title>Ajax-Axios-案例</title>
	<script src="js/axios-0.18.0.js"></script>
	<script src="js/vue.js"></script>
</head>
<body>
	<div id="app">
		<table border="1" cellspacing="0" width="60%">
			<tr>
				<th>编号</th>
				<th>姓名</th>
				<th>图像</th>
				<th>性别</th>
				<th>职位</th>
				<th>入职日期</th>
				<th>最后操作时间</th>
			</tr>
			
			<tr align="center" v-for="(emp,index) in emps">
				<td>{{index + 1}}</td>
				<td>{{emp.name}}</td>
				<td>
					<img :src="emp.image" width="70px" height="50px">
				</td>
				<td>
					<span v-if="emp.gender == 1">男</span>
					<span v-if="emp.gender == 2">女</span>
				</td>
				<td>{{emp.job}}</td>
				<td>{{emp.entrydate}}</td>
				<td>{{emp.updatetime}}</td>
			</tr>
		</table>
	</div>
</body>
<script>
	new Vue({
		el: "#app",
		data: {
		emps:[]
	},
	mounted () {
		//发送异步请求,加载数据
		axios.get("http://yapi.smartxwork.cn/mock/169327/emp/list").then(result => {
			console.log(result.data);
			this.emps = result.data.data;
			})
		}
	});
</script>
</html>
相关推荐
莹雨潇潇几秒前
Docker 快速入门（Ubuntu版）
java·前端·docker·容器
Jiaberrr8 分钟前
Element UI教程：如何将Radio单选框的圆框改为方框
前端·javascript·vue.js·ui·elementui
Ace＇1 小时前
每日一题&&学习笔记
笔记·学习
Tiffany_Ho1 小时前
【TypeScript】知识点梳理（三）
前端·typescript
IM_DALLA1 小时前
【Verilog学习日常】—牛客网刷题—Verilog进阶挑战—VL25
学习·fpga开发·verilog学习
丶Darling.1 小时前
LeetCode Hot100 | Day1 | 二叉树：二叉树的直径
数据结构·c++·学习·算法·leetcode·二叉树
安冬的码畜日常2 小时前
【D3.js in Action 3 精译_029】3.5 给 D3 条形图加注图表标签（上）
开发语言·前端·javascript·信息可视化·数据可视化·d3.js
小白学习日记2 小时前
【复习】HTML常用标签＜table＞
前端·html
学习使我快乐013 小时前
AJAX 2——Bootstrap弹框使用、图书管理案例、图片上传方法
ajax·okhttp·bootstrap
热门推荐
01分享几个惊艳的 Three.js 个人站点02【经验分享】Ubuntu22.04安装微信(linux官方版)032024年高教社杯数学建模国赛C题超详细解题思路分析04组基轨迹建模 GBTM的介绍与实现（Stata 或 R）05安卓系列机型永久去除data分区加密 详细步骤解析06【2024数模国赛赛题思路公开】国赛B题思路丨附可运行代码丨无偿自提07CTF网络安全大赛简单的web抓包题目：HEADache08Ubuntu24.04安装中文输入法09【2024高教社杯全国大学生数学建模竞赛】B题 生产过程中的决策问题——解题思路 代码 论文10springer 在线投稿编译踩坑