Java-web：使用Axios代替JSP进行前后端分离与数据交互-Toy模板网

这篇具有很好参考价值的文章主要介绍了Java-web：使用Axios代替JSP进行前后端分离与数据交互。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

Java-web：使用Axios代替JSP

使用Servlet注解代替配置web.xml文件

在servlet3.0版本支持使用注解

1.创建一个Servlet响应axios发送的请求

@WebServlet("/hello")
public class HelloWorldServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //获取请求Reader对象
        BufferedReader br = req.getReader();
        //读取axios发送的data:字符串
        String params = br.readLine();
        //{"str":"hello world!"}
        System.out.println(params);
        //返回一个响应response
        //其中响应体里面的data对象有个"success"字符串
        resp.getWriter().write("success");
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
       this.doGet(req,resp);
    }
}

JSP代替：

还原JSP到HTML：

Axios：将ajax进行封装，简化JS发送异步请求的代码

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

下载axios.js文件到本地然后再HTML头文件引入或者直接引用网址的JS头文件两种方式

2.创建一个main.html文件，设置一个div用于显示axios使用回调函数时从响应体里获得的JSON数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../static/js/axios.js"></script>
</head>
<body>
     <div id="main"></div>
</body>
</html>

3.编写JS代码

设置窗口onload函数：里面直接调用axios封装好的ajax函数发送异步请求

axios发送POST请求跳转前面设置好的路径"/hello"，设置data

回调函数向div里插入servlet响应的JSON字符串

window.onload = function (){
   axios({
         method: 'post',
         url:'http://localhost:8080/test/hello',
         data:{
              str:'hello world!'
           }
         })
        .then(function (response){
            document.getElementById("main").innerText = response.data
            console.log(response);
        })
    }

4.maven打包（package）并运行http://localhost:8080/test/main.html

运行顺序如下：

main.html打开应该是空白页面,但是axios发送了一个POST请求

按下F12打开浏览器开发者工具NetWork查看捕获的请求和响应:

Java-web：使用Axios代替JSP进行前后端分离与数据交互

后端Servlet响应请求并且使用print打印传送的JSON字符串，Tomcat的console可以查看：

Java-web：使用Axios代替JSP进行前后端分离与数据交互

之后servlet也给予response响应体JSON字符串

html页面里对应axios的回调函数进行页面显示(innerText)和浏览器console显示(console.log)

Java-web：使用Axios代替JSP进行前后端分离与数据交互

打开f12浏览器的开发者工具查看控制台console：

Java-web：使用Axios代替JSP进行前后端分离与数据交互

TIPS:使用alibaba的FastJSON.jar可以帮助快速处理字符串

心得：

项目的一些实际的部署会安排到服务器上面html页面对于css/js/images等静态资源最好放在static文件夹里,引用时候最好直接是以完整的路径http://localhost:8080/demo/static/…，避免路径的误解，而不是使用…/static/…这样

一个完整的过程描述：

HTML页面→使用axios函数封装ajax发送异步请求(request)→servlert后端对request处理(获取发送的JSON字符串作为数据)，然后也能对response也能进行处理(response.getWirter().write(“xxxxxxx”))→axios的回调函数对servlet后端发送的resopnse也能进行处理(response.data)文章来源地址https://www.toymoban.com/news/detail-461127.html

到了这里，关于Java-web：使用Axios代替JSP进行前后端分离与数据交互的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！