好的各位小伙伴

繼續(xù)學(xué)習(xí)知識(shí)了

ajax_json

咱們之前用SSM三大框架整合,實(shí)現(xiàn)了用戶(hù)的增刪改查功能.今天主要是將之前實(shí)現(xiàn)的用戶(hù)功能,修改成?ajax 的方式,實(shí)現(xiàn)頁(yè)面的局部刷新功能.

首先來(lái)實(shí)現(xiàn)一個(gè)簡(jiǎn)單的

頁(yè)面切換功能

頁(yè)面的代碼

css 樣式

js 代碼

整個(gè)頁(yè)面的效果

實(shí)現(xiàn)查詢(xún)用戶(hù)列表功能

ajax 請(qǐng)求 url 與 SpringMVC 的 url 同樣能夠匹配,但是 ajax 是異步刷新,不需要返回頁(yè)面地址,所以一般 ajax 請(qǐng)求無(wú)論是集合還是字符串,都會(huì)轉(zhuǎn)化成 json類(lèi)型的字符串返回,然后 ajax 得到返回進(jìn)行解析

springMVC 提供了 json 返回類(lèi)型的轉(zhuǎn)換器?MappingJackson2HttpMessageConverter?

( 在springMVC中開(kāi)啟注解驅(qū)動(dòng)會(huì)默認(rèn)加上)

加入 json 解析需要的 jar 包

jackson-annotations-2.5.4.jar

jackson-core-2.5.4.jar

jackson-databind-2.5.4.jar

編寫(xiě)頁(yè)面代碼

js請(qǐng)求

通過(guò) getUserListAjaxJson 返回一個(gè) json 對(duì)象

ajax 返回的格式類(lèi)型必須設(shè)置為'json'在controller方法里面可以直接返回集合或者對(duì)象 ,但是要加上?@ResponseBody?注解來(lái)標(biāo)明返回一個(gè)json?對(duì)象讓springmvc 調(diào)用 MappingJackson2HttpMessageConverter 轉(zhuǎn)換講集合或者對(duì)象轉(zhuǎn)換成 json 字符串

解析返回的json對(duì)象顯示在頁(yè)面上

看一下效果

首先點(diǎn)擊頁(yè)面上的查詢(xún)按鈕,調(diào)用 js ,js 請(qǐng)求 controller 中的 getUserListAjaxJson 返回一個(gè) json 對(duì)象,在通過(guò) js 來(lái)解析這個(gè) json 對(duì)象顯示到頁(yè)面上,最終完成我們的查詢(xún)功能.

實(shí)現(xiàn)刪除功能

先在頁(yè)面上添加兩個(gè)按鈕修改和刪除

接下來(lái)寫(xiě)刪除的 js 代碼,調(diào)用 controller 的 userDelAjaxJson

編寫(xiě) controller 中的 userDelAjaxjaon,用map來(lái)裝返回的對(duì)象.

刪除功能效果展示:

修改功能的實(shí)現(xiàn)

按鈕咱們已經(jīng)寫(xiě)好了,直接寫(xiě) js 代碼

修改功能首先要獲取用戶(hù)的 userId 根據(jù) userId 去后臺(tái)數(shù)據(jù)庫(kù)獲取用戶(hù)的信息.

把獲取的信息展示到另一個(gè)頁(yè)面上

獲取了用戶(hù)的信息之后,進(jìn)行修改,修改完了數(shù)據(jù)還要進(jìn)行一下保存,來(lái)寫(xiě)保存的js 代碼

再來(lái)寫(xiě)一下 controller 里面的保存代碼

效果展示

新增功能的實(shí)現(xiàn)

先來(lái)寫(xiě)一個(gè)添加用戶(hù)的按鈕

其實(shí)新增用戶(hù)可以和修改用戶(hù)共用一套業(yè)務(wù)邏輯,這邊就不重復(fù)的了,唯一需要的就是添加一個(gè)判斷功能,如果 userId 為空就是添加用戶(hù)的功能,否則就是修改用戶(hù).

效果展示:

今天的分享就到這里了

小伙伴們

拜拜