好的各位小伙伴
继续学习知识了
ajax_json
咱们之前用SSM三大框架整合,实现了用户的增删改查功能.今天主要是将之前实现的用户功能,修改成 ajax 的方式,实现页面的局部刷新功能.
首先来实现一个简单的
页面切换功能
页面的代码
css 样式
js 代码
整个页面的效果
实现查询用户列表功能
ajax 请求 url 与 SpringMVC 的 url 同样能够匹配,但是 ajax 是异步刷新,不需要返回页面地址,所以一般 ajax 请求无论是集合还是字符串,都会转化成 json类型的字符串返回,然后 ajax 得到返回进行解析
springMVC 提供了 json 返回类型的转换器 MappingJackson2HttpMessageConverter
( 在springMVC中开启注解驱动会默认加上)
加入 json 解析需要的 jar 包
jackson-annotations-2.5.4.jar
jackson-core-2.5.4.jar
jackson-databind-2.5.4.jar
编写页面代码
js请求
通过 getUserListAjaxJson 返回一个 json 对象
ajax 返回的格式类型必须设置为'json'在controller方法里面可以直接返回集合或者对象 ,但是要加上 @ResponseBody 注解来标明返回一个json 对象让springmvc 调用 MappingJackson2HttpMessageConverter 转换讲集合或者对象转换成 json 字符串
解析返回的json对象显示在页面上
看一下效果
首先点击页面上的查询按钮,调用 js ,js 请求 controller 中的 getUserListAjaxJson 返回一个 json 对象,在通过 js 来解析这个 json 对象显示到页面上,最终完成我们的查询功能.
实现删除功能
先在页面上添加两个按钮修改和删除
接下来写删除的 js 代码,调用 controller 的 userDelAjaxJson
编写 controller 中的 userDelAjaxjaon,用map来装返回的对象.
删除功能效果展示:
修改功能的实现
按钮咱们已经写好了,直接写 js 代码
修改功能首先要获取用户的 userId 根据 userId 去后台数据库获取用户的信息.
把获取的信息展示到另一个页面上
获取了用户的信息之后,进行修改,修改完了数据还要进行一下保存,来写保存的js 代码
再来写一下 controller 里面的保存代码
效果展示
新增功能的实现
先来写一个添加用户的按钮
其实新增用户可以和修改用户共用一套业务逻辑,这边就不重复的了,唯一需要的就是添加一个判断功能,如果 userId 为空就是添加用户的功能,否则就是修改用户.
效果展示:
今天的分享就到这里了
小伙伴们
拜拜
