(1) Ajax+SpringBoot

本文主要介绍了在前后端交互中遇到的1.415错误和400错误的解决方法。问题源于缺少contentType设置及前端数据未正确转化为JSON格式。通过在前端使用JSON.stringify()将数据转化为JSON格式,并在请求头中添加'contentType: application/json;charset=utf-8',解决了数据解析问题。同时,确保前端发送的数据结构与后端接收的数据结构匹配,以避免400错误。示例代码展示了正确的前后端交互实现。

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

1.415错误

 由于没有加contentType: "application/json; charset=utf-8",后台不知道改以什么格式解析数据

2.400错误

前端请求数据和后端数据结构不匹配

前端一定要用函数:JSON.stringify()严格的转化为JSON格式才行

转化后:

如果不进行转化的话:

即使在前端严格的写成{“username”:username,“password”:password}的格式也不行!!!

最终成功代码

前端部分:

   $ = layui.jquery;
            $.ajax({
                    type:'post',      //get或者post
                    url:'http://localhost:8080/login',              //进行数据交换的通信地址
                 //  data: JSON.stringify({"username":username,"password":password}),  
               data:{"username":username,"password":password},  

                   dataType:"text",              //data是从页面发送到服务器   dataType是从服务器传回来的数据  可以是text或json
                    contentType: "application/json; charset=utf-8",
                    success:function(res){
                        if(res=="ok")
                          alert("登陆成功 即将跳转到主页!");
                        else 
                          alert("登陆失败!")
                    }
          });

后端部分:

@RestController
public class LoginController {
     @RequestMapping("/login")
     @ResponseBody
     public String login(@RequestBody Users user){
          System.out.println("user:"+user);
          return "ok";
     }
}

 

好的,这是一个典型的前后端分离的例子,我可以给您提供一个简单的示例代码,来帮助您理解如何使用 Vue3 + Vite + Ajax + SpringBoot 实现增删改查功能。 前端使用 Vue3 + Vite + Ajax 实现: 1. 在 Vue3 中,使用 `axios` 或者 `fetch` 进行 AJAX 请求,请求后端 SpringBoot 服务器,获取数据或者提交数据。 2. 在 Vue3 中,使用 `vue-router` 进行 SPA 单页应用的路由控制,实现前端页面的跳转。 3. 在 Vue3 中,使用 `vuex` 进行状态管理,方便组件之间的数据共享和传递。 下面是一个简单的 Vue3 组件的示例代码: ```vue <template> <div> <h1>用户列表</h1> <table> <thead> <tr> <th>ID</th> <th>用户名</th> <th>邮箱</th> <th>操作</th> </tr> </thead> <tbody> <tr v-for="user in users" :key="user.id"> <td>{{ user.id }}</td> <td>{{ user.username }}</td> <td>{{ user.email }}</td> <td> <button @click="editUser(user)">编辑</button> <button @click="deleteUser(user.id)">删除</button> </td> </tr> </tbody> </table> </div> </template> <script> import axios from 'axios'; export default { name: 'UserList', data() { return { users: [], }; }, methods: { async getUsers() { const response = await axios.get('/api/users'); this.users = response.data; }, async deleteUser(id) { await axios.delete(`/api/users/${id}`); this.getUsers(); }, editUser(user) { // 跳转到编辑用户页面,使用 vue-router this.$router.push(`/users/${user.id}`); }, }, mounted() { this.getUsers(); }, }; </script> ``` 后端使用 SpringBoot 实现: 1. 在 SpringBoot 中,使用 `@RestController` 和 `@RequestMapping` 注解定义 RESTful API 接口,实现增删改查的逻辑。 2. 在 SpringBoot 中,使用 `@Service` 和 `@Repository` 注解定义服务层和数据访问层,实现业务逻辑和数据库操作。 3. 在 SpringBoot 中,使用 `Spring Data JPA` 或者 `MyBatis` 等框架进行数据库操作,简化代码编写。 下面是一个简单的 SpringBoot Controller 的示例代码: ```java @RestController @RequestMapping("/api/users") public class UserController { private final UserService userService; public UserController(UserService userService) { this.userService = userService; } @GetMapping public List<User> listUsers() { return userService.listUsers(); } @PostMapping public void createUser(@RequestBody User user) { userService.createUser(user); } @PutMapping("/{id}") public void updateUser(@PathVariable Long id, @RequestBody User user) { userService.updateUser(id, user); } @DeleteMapping("/{id}") public void deleteUser(@PathVariable Long id) { userService.deleteUser(id); } } ``` 这是一个简单的增删改查的示例代码,您可以根据自己的需要进行修改和扩展。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值