SSM前后端数据交互（通过表单和Ajax）

2024-06-25 14:37| 来源: 网络整理| 查看: 265

一、搭建SSM开发环境

请参照链接一个基于IDEA搭建SSM的教程，非常详细。

二、表单交互

这部分是普通表单形式：

测试添加姓名：金额：

后台处理代码：

@RequestMapping("/account/save") //springMvc会将参数自动封装成对象 public void save(Account account, HttpServletRequest request, HttpServletResponse response) throws IOException { //先执行保存操作 accountService.saveAccount(account); //重定向到查询全部的控制器方法(重定向是第二次请求) response.sendRedirect(request.getContextPath()+"/account/findAll"); return; } @RequestMapping("/account/findAll") public String findAll(Model model){ //通过model向前端传递数据 System.out.println("Controller表现层：查询所有账户..."); List list = accountService.findAll(); model.addAttribute("list",list); return "list"; }

这里通过Model将数据返回给前端，通过视图解析器解析跳转。下面的界面通过取出list，进行数据展示：

Title 查询所有的账户 ${account.id} ${account.name} ${account.money}

最后前端效果：在这里插入图片描述

三、Ajax交互方式

1.首先要把jquery的文件引入，如下：在这里插入图片描述 2.前端页面中引入：下面可以编写ajax请求

测试ajax请求数据库数据并显示

给按钮添加事件：

$(document).ready(function(){ $("#checkIdButton").bind('click',check_User); }); function check_User(){ var id = $("#checkId").val(); $.ajax({ url: "account/checkUser", type: "get", data: {"id":id}, success:function (data) { //传递过来的是json格式的字符串，需要解析为json对象 var data = $.parseJSON(data); $("#span3").text(data.account.id); $("#span4").text(data.account.name); $("#span5").text(data.account.money); }, error:function () { alert("Ajax失败了"); } }); }

在这里遇到两个坑：一是一直获取不到id，后来发现是checkIdButton我设置成了name，而不是id。第二个是，后台返回的json是字符串，需要解析成json对象再渲染到界面上。此外，请求链接一定要正确。

下面是后端代码：

@ResponseBody @RequestMapping(value = "/account/checkUser") public String checkUser(HttpServletRequest req){ //获取参数 String id = req.getParameter("id"); //调用service层方法查询对象 Account a = accountService.findById(id); //创建JSONObject对象 JSONObject jsonObject = new JSONObject(); //将返回的数据放到json对象里面 jsonObject.put("account",a); //将json对象转为json字符串返回给前端页面 return jsonObject.toJSONString(); }

添加ResponseBody注解，防止springMvc解析为视图。此外，要将返回的数据放到json对象里面，最后把该对象转为字符串交给前端。

在前端页面渲染数据时候，中文数据变成了？？。解决方式是在springmvc配置文件中添加下面的配置：

最后效果

查询前：在这里插入图片描述查询后(原页面显示，没有刷新页面)：

【本文地址】

公司简介

联系我们