SSM整合-Ajax的增删改查

创建Maven工程

分包增添模块

controller
dao
pojo
service
pom.xml文件依赖架构

<properties><project.build.sourceEncoding>UTF-8</project.build.sourceEncoding><maven.compiler.source>1.8</maven.compiler.source><maven.compiler.target>1.8</maven.compiler.target><spring.version>5.2.9.RELEASE</spring.version><slf4j.version>1.6.6</slf4j.version><log4j.version>1.2.12</log4j.version><mysql.version>5.1.6</mysql.version><mybatis.version>3.4.5</mybatis.version></properties>

Resouce文件正常配置即可

技术要点

Controller方法返回值类型Object
（1） Controller方法返回的几种类型
ModelAndView
void
String
Object
（2）@ResponseBody注解
调jackson库将Object转成json字符串返回
如果没有依赖jackson库则，抛出异常。所以需要配置依赖的Jackson库

<dependency><groupId>com.fasterxml.jackson.core</groupId><artifactId>jackson-databind</artifactId><version>2.11.3</version></dependency>

Controller方法返回Result
返回Result

    private int code;//编码private String msg;//提示信息private Object data;

将数据能够放进Result对象里面

    public static Result init(int code, String msg, Object data){Result result =new Result(code,msg,data);return result;}public Result() {}public Result(int code, String msg, Object data) {this.code = code;this.msg = msg;this.data = data;}

Controller方法返回Result

@Controller
@RequestMapping("/resume")
public class ResumeController {private static final Logger log = Logger.getLogger(ResumeController.class);@Autowiredprivate ResumeService resumeService;@RequestMapping(path = "/listUI", method = RequestMethod.GET)public String listUI() {return "list_resume";}

Ajax的使用（详细会出一篇博客进行说明）

（1）ajax是什么
AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
AJAX 不是新的编程语言，而是一种使用现有标准的新方法。
AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。
（2）ajax的特点
AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。
ps:本版本使用ajax不需要重定向或者请求转发
Jquery实现Ajax
导入jQuery库
在页面最上方引入库

<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%pageContext.setAttribute("path", request.getContextPath());%>

jQuery代码编写

编写逻辑
js 发送请求 $.get $.post serialize()
js 接收结果 function(data){…}
js 更新页面 $(id值) html()
Jquery实现员工列表

  $(function () {$.get('${path}/resume/list', function (result) {console.info("result =" + result)var trs = ''trs += '<tr>\n' +'        <td>编号</td>\n' +'        <td>用户名</td>\n' +'        <td>密码</td>\n' +'        <td>毕业院校</td>\n' +'        <td>年龄</td>\n' +'        <td>出生日期</td>\n' +'        <td>操作</td>\n' +'\n' +'    </tr>'if (200 == result.code) {var items = result.data;for (var i = 0; i < items.length; i++) {var ruser = items[i]console.info(ruser)trs += ' <tr>\n' +'        <td>' + ruser.id + '</td>\n' +'        <td>' + ruser.username + '</td>\n' +'        <td>' + ruser.password + '</td>\n' +'        <td>' + ruser.edg + '</td>\n' +'        <td>' + ruser.age + '</td>\n' +'        <td>' + ruser.birthday + '</td>\n' +'        <td><a href="javascript:deleteById(' + ruser.id + ')">删除 |</a><a href="javascript:updateUI(' + ruser.id + ')">修改</a></td>\n' +'\n' +'    </tr>'}//end for$('#table').html(trs)}}, 'json')  //参1 地址 参2 处理函数  参3 数据类型}

删除指定id的员工
Controller层

@RequestMapping(path="/delete",method = RequestMethod.GET)public @ResponseBody  Object delete(Integer id){log.info("delete id"+id);try {resumeService.deleteRuserById(id);return Result.init(200,"删除成功",null);} catch (Exception e) {e.printStackTrace();}return Result.init(-200,"删除失败",null);}

list _resume.jsp

 function deleteById(id) {$.get('${path}/resume/delete?id=' + id, function (result) {console.info(result)if (200 == result.code) {alert(result.msg)refreshTable()//调用列表更新} else {alert(result.msg)}}, 'json')}

默认情况下点击超链接是跳转页面-整体刷新
Ajax是局部刷新，点击链接调用函数，函数内部发起请求，处理返回结果，更新页面
属性display:none
Ajax不切换页面，所有内容在一个页面，只需要通过style的属性display，将值设置为none不可见，不占高度。
如果需要显示出来，设置display的值为block

 function switchDiv(part) {//隐藏内容$('#addDiv').css("display", "none")$('#listDiv').css("display", "none")$('#editDiv').css("display", "none")if (1 == part) {//$('#addDiv').css("display", "block")$('#add_id').val()$('#add_username').val('')$('#add_password').val('')$('#add_edg').val('')$('#add_age').val('')$('#add_birthday').val('')} else if (2 == part) {//列表页面$('#listDiv').css("display", "block")} else if (3 == part) {//编辑页面$('#editDiv').css("display", "block")}}

添加功能

 @RequestMapping(path="/add",method = RequestMethod.POST)public @ResponseBodyObject add(Ruser ruser){log.info("add Ruser"+ruser);try {resumeService.saveRuser(ruser);return Result.init(200,"添加员工成功",null);} catch (Exception e) {e.printStackTrace();}return Result.init(-200,"添加员工失败",null);}

前台代码

<div id="addDiv"><h1>添加页面</h1><form id="add_form"><input type="hidden" name="did" id="add_id"/><br/><input type="text" name="username" /><br/><input type="text" name="password" id="add_password"/><br/><input type="text" name="edg" id="add_edg"/><br/><input type="text" name="age" id="add_age"/><br/>
<%--        <input type="date" name="birthday" id="add_birthday"/><br/>--%><input id="btn_add" type="button" value="保存"/><br/></form>
</div>

修改代码
修改带有回显（就是先查到再赋值再修改）
回显代码

 function updateUI(id) {alert(id)//显示修改页面switchDiv(3)//获取被修改的数据作回显$.get('${path}/resume/find?id=' + id, function (result) {if (200 == result.code) {var ruser = result.data;//{"code":200,"msg":null,"data":{"did":9,"dname":"测试部门3"}}$('#u_id1').val(ruser.id)$('#u_id2').val(ruser.id)$('#u_username').val(ruser.username)$('#u_password').val(ruser.password)$('#u_edg').val(ruser.edg)$('#u_age').val(ruser.age)$('#u_birthday').val(ruser.birthday)$('#u_username1').val(ruser.username)$('#u_password1').val(ruser.password)$('#u_edg1').val(ruser.edg)$('#u_age1').val(ruser.age)$('#u_birthday1').val(ruser.birthday)} else {alert(result.msg)//提示没有查询结果}}, 'json')}

调用查询

@RequestMapping(path = "/find", method = RequestMethod.GET)public @ResponseBodyObject find(Integer id) {log.info("find id=" + id);//打数据if (id != null) {Ruser ruser = resumeService.finResumeById(id);if (ruser != null) {return Result.init(200, null, ruser);//转成json返回页面}}return Result.init(-200, "没有查询结果", null);}

正式修改后台代码

 @RequestMapping(path = "/update", method = RequestMethod.POST)@ResponseBodyObject update(Ruser ruser){log.info("update ruser="+ruser);try {resumeService.updateRuserById(ruser);return Result.init(200, "更新成功", null);} catch (Exception e) {e.printStackTrace();}return Result.init(-200, "更新失败", null);}

前台代码

 function update() {var data = $('#update_form').serialize();// k1=v1&k2=v2$.post('${path}/resume/update', data, function (result) {alert(result.msg)//切换页面switchDiv(2)//刷新列表refreshTable()}, 'json')}

表单代码

<div id="editDiv"><h1>编辑页面</h1><form id="update_form"><input id="u_id1" type="hidden" name="id"><input id="u_id2" type="text" disabled="disabled"/><br/><input id="u_username" type="text" disabled="disabled"/><br/><input id="u_password" type="text" disabled="disabled"/><br/><input id="u_edg" type="text" disabled="disabled"/><br/><input id="u_age" type="text" disabled="disabled"/><br/><input id="u_birthday" type="text" disabled="disabled"/><br/><input id="u_username1" type="text" name="username"/><br/><input id="u_password1" type="text" name="password"/><br/><input id="u_edg1" type="text" name="edg"/><br/><input id="u_age1" type="text" name="age"/><br/><input id="btn_update" onclick="update()" type="button" value="保存修改"/><br/></form>
</div>

SSM整合版本二之Ajax的CRUD相关推荐

SSM整合教程(二)-SpringMVC教程
Spring MVC属于SpringFrameWork的后续产品,已经融合在Spring Web Flow里面.Spring 框架提供了构建 Web 应用程序的全功能 MVC 模块.使用 Spring ...
SSM整合项目实践——完成图书的CRUD
该SSM整合项目用的是环境是JDK1.8.MySQL8.0,前端用到了bootstrap 源码链接:https://github.com/uphe/ssm-crud 先看一下基本架构这里展示一下效果 ...
SSM整合版本一之普通的CRUD
项目简介 (1)项目的经典模块-CRUD功能 (2)什么是CRUD CRUD:Create( 创建 )Retrieve(查询)Update(更新)Delete(删除) 使用的技术栈:ssm:Spri ...
【Activity学习五】--基于SSM整合Activiti之请假流程实现（二）
[Activity学习五]--基于SSM整合Activiti之请假流程实现(二) 1.部署流程资源 2.查询流程定义信息 3.发布请假流程 4.查询用户任务 5.提出请假 6.老板查看请假任务 7.老 ...
二、SSM整合按步骤详解（清晰的思路加代码）从零开始一步步整合【二】（完结）
接上一章节继续SSM整合按步骤详解(清晰的思路加代码)从零开始一步步整合[一] 上面讲了Spring和SpringMVC的整合,现在开始下一步,先来搭建一下MyBatis的环境我们先来看看目录结构图 ...
SSM整合框架实现ajax校验
SSM整合框架实现ajax校验刚学习了ssm框架,ajax校验成功,分享下 1.导入jar包 2.配置spring-servlet.xml 1 <bean class="org. ...
SSM整合时Maven项目的pom.xml版本兼容的代码备份
场景 jdk:1.8 Tomcat:7.0 本地mysql:8.0 Eclipse:Eclipse Jee Photon Spring:4.3.8 AOP:1.8.0 mybatis:3.3.0 My ...
ajax在ssm中的使用,Ajax 框架之SSM整合框架实现ajax校验
刚学习了ssm框架,ajax校验成功,分享下 1.导入jar包 2.配置spring-servlet.xml text/html;charset=UTF-8 text/json;charset=UTF ...
mybatis+spring+springmvc ssm整合
文章目录 mybatis 开发我的第一个mybatis程序关于mybatis的核心API:SqlSession对象. mybatis连接数据库操作 log4j jackson parameterTy ...

SSM整合版本二之Ajax的CRUD

SSM整合-Ajax的增删改查

创建Maven工程

技术要点

Controller方法返回Result

Ajax的使用（详细会出一篇博客进行说明）

jQuery代码编写

SSM整合版本二之Ajax的CRUD相关推荐

最新文章

热门文章