创建springboot+mybatis+mysql项目https://yydpt.blog.csdn.net/article/details/124185472
中已经讲解了如何创建JAVA的springboot+mybatis+mysql项目,

现在接着讲解JAVA是如何和前端进行交互的;
首先新建一个index.html的前端页面,然后在index.html页面中加入如下代码:

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


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

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

 

后端接口如下图:
图2

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5pyI5b2xV0VC,size_20,color_FFFFFF,t_70,g_se,x_16

然后按照下图启动前端调试:
图3

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5pyI5b2xV0VC,size_20,color_FFFFFF,t_70,g_se,x_16

 
图4

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5pyI5b2xV0VC,size_20,color_FFFFFF,t_70,g_se,x_16

点击地址栏之后页面会执行JQ的ajax进入后端API接口,如下图:
图5

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5pyI5b2xV0VC,size_20,color_FFFFFF,t_70,g_se,x_16

 
从图中可以看到此API方法中的return返回的是ceshi,然后我们再在前端ajax的返回值中看一下是否接收到了这个数据;
图6

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5pyI5b2xV0VC,size_20,color_FFFFFF,t_70,g_se,x_16

如果出现跨域问题则可以在后端接口API之中加入如下代码:
图7

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5pyI5b2xV0VC,size_20,color_FFFFFF,t_70,g_se,x_16

 如果还有疑问,欢迎留言提问!

关注微信公众号(月影WEB),了解更多的前后端知识;
欢迎大家关注互相交流学习;

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐