🎨领域：Java后端开发

---

---

🔥收录专栏： 前端技术
🐒个人主页：BreezAm
💖Gitee：https://gitee.com/BreezAm
✨个人标签：【后端】【大数据】【前端】【运维】

介绍

一、相关技术

• jQuery
• JavaScript
• Ajax
• Promise

二、实战

  在Vue-cli开发的项目中，可以看到前后端交互是通过Promise封装axios发送请求的，下面通过实战的方式介绍如何使用Promise封装Ajax实现POST和GET请求。

2.1 在页面引入JQuery依赖

  将下载好的JQuery放入resources/static/js下面（Spring Boot），然后在需要使用的页面导入如下外部js依赖。

<script src="/static/js/jquery-3.6.0.js"></script>

2.2 封装Ajax

  在resource/static/js/下建立request.js文件，并编写如下代码。

2.2.1 封装POST

function sendPost(url, data) {return new Promise((resolve, reject) => {$.ajax({type: "post",dataType: "json",contentType: 'application/json',url: url,headers:{},data: JSON.stringify(data),success: function (res) {setTimeout(() => {resolve(res);}, 100);}, error: function (jqXHR, textStatus, errorThrown) {reject(errorThrown);}});});
}

2.2.1 封装GET

function sendGet(url, data) {return new Promise((resolve, reject) => {$.get(url, data,function (res) {setTimeout(() => {resolve(res);}, 100);});});
}

2.2.1 如何使用

  在需要使用POST和GET请求的地方引入如下依赖。

<script src="/static/js/request.js"></script>

1、发送POST请求：

sendPost('/auth/userLogin',{username:'admin',password:'123456'}).then(res=>{alert(res.data)
}).catch(err=>{alert("出现了异常")
})

2、发送GET请求：

sendGet("/user/list",{}).then(res=>{alert(res.data)
}).catch(err=>{alert("出现了异常")
})

三、参考文献

  因为Ajax是属于jQuery的一部分，所以需要要使用Ajax，必须引入jQuery依赖。

• jQuery
• Promise

🔥收录专栏：前端技术