在
“创建springboot+mybatis+mysql项目”
https://www.jianshu.com/p/9ebd9b288d49
中已经讲解了如何创建JAVA的springboot+mybatis+mysql项目，
之后在
“项目swagger-bootstrap-ui对外开放API文档的开发和使用”
https://www.jianshu.com/p/465660ec0bc0
中讲解了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
然后按照下图启动前端调试：
图3
图4
点击地址栏之后页面会执行JQ的ajax进入后端API接口，如下图：
图5
从图中可以看到此API方法中的return返回的是ceshi，然后我们再在前端ajax的返回值中看一下是否接收到了这个数据；
图6
如果出现跨域问题则可以在后端接口API之中加入如下代码：
图7
