素材巴巴 > 程序开发 >

JAVA与前端如何进行交互?

程序开发 2023-09-14 08:33:33


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

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


 
 前后端交互
 
 
 


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

然后再在代码中引入一个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),了解更多的前后端知识;
欢迎大家关注互相交流学习;


标签:

上一篇: MATLAB中filter的理解与使用 下一篇:
素材巴巴 Copyright © 2013-2021 http://www.sucaibaba.com/. Some Rights Reserved. 备案号:备案中。