好的各位小伙伴
繼續(xù)學習知識了
ajax_json
咱們之前用SSM三大框架整合,實現(xiàn)了用戶的增刪改查功能.今天主要是將之前實現(xiàn)的用戶功能,修改成?ajax 的方式,實現(xiàn)頁面的局部刷新功能.
首先來實現(xiàn)一個簡單的
頁面切換功能
頁面的代碼
css 樣式
js 代碼
整個頁面的效果
實現(xiàn)查詢用戶列表功能
ajax 請求 url 與 SpringMVC 的 url 同樣能夠匹配,但是 ajax 是異步刷新,不需要返回頁面地址,所以一般 ajax 請求無論是集合還是字符串,都會轉(zhuǎn)化成 json類型的字符串返回,然后 ajax 得到返回進行解析
springMVC 提供了 json 返回類型的轉(zhuǎn)換器?MappingJackson2HttpMessageConverter?
( 在springMVC中開啟注解驅(qū)動會默認加上)
加入 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 調(diào)用 MappingJackson2HttpMessageConverter 轉(zhuǎn)換講集合或者對象轉(zhuǎn)換成 json 字符串
解析返回的json對象顯示在頁面上
看一下效果
首先點擊頁面上的查詢按鈕,調(diào)用 js ,js 請求 controller 中的 getUserListAjaxJson 返回一個 json 對象,在通過 js 來解析這個 json 對象顯示到頁面上,最終完成我們的查詢功能.
實現(xiàn)刪除功能
先在頁面上添加兩個按鈕修改和刪除
接下來寫刪除的 js 代碼,調(diào)用 controller 的 userDelAjaxJson
編寫 controller 中的 userDelAjaxjaon,用map來裝返回的對象.
刪除功能效果展示:
修改功能的實現(xiàn)
按鈕咱們已經(jīng)寫好了,直接寫 js 代碼
修改功能首先要獲取用戶的 userId 根據(jù) userId 去后臺數(shù)據(jù)庫獲取用戶的信息.
把獲取的信息展示到另一個頁面上
獲取了用戶的信息之后,進行修改,修改完了數(shù)據(jù)還要進行一下保存,來寫保存的js 代碼
再來寫一下 controller 里面的保存代碼
效果展示
新增功能的實現(xiàn)
先來寫一個添加用戶的按鈕
其實新增用戶可以和修改用戶共用一套業(yè)務邏輯,這邊就不重復的了,唯一需要的就是添加一個判斷功能,如果 userId 為空就是添加用戶的功能,否則就是修改用戶.
效果展示:
今天的分享就到這里了
小伙伴們
拜拜
