JAVA与前端交互持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第31天，点击查看活动详情在 “

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第31天，点击查看活动详情

在 “创建springboot+mybatis+mysql项目”

juejin.cn/post/709723…

中已经讲解了如何创建JAVA的springboot+mybatis+mysql项目，

之后在

“项目swagger-bootstrap-ui对外开放API文档的开发和使用” juejin.cn/post/711356…

中讲解了JAVA项目swagger-bootstrap-ui对外开放API文档的开发和使用；

现在接着讲解JAVA是如何和前端进行交互的；

首先新建一个index.html的前端页面，然后在index.html页面中加入如下代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>前后端交互</title>
</head>
<body>
</body>

这是一个前端页面的基础代码；

然后再在代码中引入一个JQ库，用JQ中的ajax来进行前后端交互，加入后的代码如下图：

图1

代码为：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>前后端交互</title>

    <script src="./jquery.min.js"></script>

</head>

<body>

    <script>

        $.ajax({

            url: "http://localhost:8080/api/los", //后端启动的地址和所需要调用的后端接口API

            type:"POST",//传输类型

            data:{username:'yueying',password:'123456'},//前端传递给后端接口API的数据参数

            success:function(res){

                //如果接口调用成功并且后端API接口也成功的话，就会将后端的成功数据返回到前端这里

                console.log(res)

            },

            error:function(error){

                //如果接口调用API接口失败，就会进入这里

                console.log(error)

            }

        })

    </script>

</body>

后端接口如下图：

图2