Java学习——前后端数据交互(一)

本文介绍了HTML页面如何通过JavaScript与后端JavaController层进行数据交互的过程,包括数据的获取与提交,涉及到JSON格式字符串的使用及转换。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

当前的结果是提交之后js内有响应。不知道原因在哪个地方,下面是当前了解的一些知识。


1、在html页面要链接到js页面,要有个这样的东西(html页面


2、在js页面要定义controller层的url地址,就是requestMapping后面的内容(js页面)


3、分为获取数据和提交数据(js页面)

首先是获取数据,shopInfoUrl是定义的conroller层的url地址,data是转换为json格式的字符串,通过$.getJSON来获取


其次是提交数据,为提交提供一个响应

然后在获取页面的数据,并转换为JSON格式。通过new FormData(), formData.append('shop',shopImg),将数据封装到对象里面


最后是提交数据,通过$.ajax



4、调用定义的方法(js页面)



5、后台获取数据,通过Request.getParameter()来获取JSON格式的字符串。(Java Controller层)



6、将JSON格式的字符串,转为原来的格式,通过ObjectMapper类的readValue方法来讲JSON格式的字符串转为对象


总结一下:

Java前后端数据的交互,不仅是获取还是提交,需要转换为JSON格式的字符串。比如从前端传递到js需要转换为JSON格式,通过加上@ResponseBody的注解,返回类型为Map;从前端传递到后端,需要new FormData()。在进行传递。




### Java 车票管理系统的前后端数据交互Java车票管理系统中,前后端数据交互通常采用RESTful API的方式进行。前端通过发送HTTP请求与后端通信,而后端则负责处理这些请求并返回相应数据。 #### 前端发起请求 前端部分可以使用Vue.js框架配合Axios库来发送HTTP请求至后端服务[^2]。例如,在用户登录场景下: ```javascript // 发送POST请求到服务器的/login接口 axios.post('/login', { username: 'exampleUser', password: 'examplePassword' }) .then(function (response) { console.log(response.data); // 处理成功后的逻辑,比如跳转页面或更新状态 }) .catch(function (error) { console.error('There was an error!', error); }); ``` #### 后端接收请求 后端利用Spring Boot框架中的@Controller注解定义控制器类,并通过@RequestMapping映射URL路径。对于上述登录请求的具体实现如下所示: ```java @RestController public class LoginController { @Autowired private UserService userService; /** * 登录接口 */ @PostMapping("/login") public Result login(@RequestParam Map<String, Object> params){ EntityWrapper<User> ew = new EntityWrapper<>(); // 设置查询条件 ew.eq("username",params.get("username")); ew.eq("password",params.get("password")); List<User> userList = userService.selectList(ew); if(userList != null && !userList.isEmpty()){ User user = userList.get(0); return R.ok().put("data",userService.selecView(ew)); }else{ return R.error(); } } } ``` 这段代码展示了如何在个名为`LoginController`的类中定义了个处理POST请求的方法`login()`,该方法接受来自前端传来的用户名和密码作为参数,之后调用了Service层的服务来进行数据库查询操作。最终根据查询结果决定返回成功的响应还是错误提示给客户端[^4]。 #### 数据传输格式 为了确保前后端之间能够顺利交换信息,双方约定好了统数据传输协议——JSON(JavaScript Object Notation),这是种轻量级的数据交换格式,易于阅读和编写,同时也便于机器解析和生成。无论是从前端向后端提交表单数据还是从后端向前端反馈查询结果都采用了这种格式。
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值