ssm项目实战实现页面的局部刷新功能

好的各位小伙伴

继续学习知识了

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 为空就是添加用户的功能,否则就是修改用户.

效果展示:

今天的分享就到这里了

小伙伴们

拜拜