Spring+SpringMVC+Mybatis 框架已經搭建完成，其中包括：（1）maven工程的搭建 （2）框架所需要的配置檔案的配置 （3）Mybatis 建立逆向工程連結資料庫。相應的配置檔案參見前幾篇部落格。

此篇整理前端頁面傳送ajax 請求到後端，後端通過 Mybatis 連結資料庫，返回JSON資料給前端頁面，完成顯示功能。

一、在webapp目錄下建立 index.jsp ，將前端內容寫入，這裡以一個文字框為例（用到bootStrap 這個前端框架）：

二、在 index.jsp 中寫 ajax請求，這裡用 jquery 來寫，請求為/frames，帶上引數 count=200即返回200個數，判斷如果成功的返回資料，就將返回的資料寫入 textarea進行顯示

1. <scripttype="text/javascript">
2.     $("#frame_getReal_btn").click(function(){  
3.         $.ajax({  
4.             url:"${APP_PATH}/frames",  
5.             data:"count=200",  
6.             type:"GET",  
7.             success:function(result){  
8.                 $("#frame_getReal_btn").parent().find("textarea").empty();  
9.                 var frames = result.returnData.frames;  
10.                 if(result.code == 100){  
11.                     $.each(frames, function(index, item){  
12.                         $("#frame_getReal_btn").parent().find("textarea").append(item.pRealFrame1).append(" ");                                    });  
13.                 }  
14.             }  
15.         });  
16.     });  
17. </script>

三、在 controller 包下建立 FrameController.java ，類上添加註解 @Controller 交給 SpringMVC 處理相應的請求。新增方法 getRealFramesWithJSON( ) 返回 從資料庫裡查到的資料。@ResponseBody 註解自動封裝 Map 資料成 JSON 資料返回給前端。

1. @ResponseBody
2. @RequestMapping(value = "/frames", method = RequestMethod.GET)  
3. public Msg getRealFramesWithJSON(@RequestParam(value = "count", defaultValue = "10") Integer count) {  
4.         List<RealFrame> frames = frameService.getFrame(count);  
5.         return Msg.success().add("frames", frames);  
6. }  

四、在FrameController 類中 @Autowired 自動注入 FrameService的物件，在Service包下建立FrameService.java 類，添加註解 @Service ，用於處理業務邏輯和呼叫dao層。@Autowired 自動注入RealFrameMapper在dao層的這個類，前提是RealFrame 這個 javaBean 以及mybatis的對映檔案，已經通過 Mybatis 逆向工程或者自己建立好。

1. public List <RealFrame> getFrame(Integer count){  
2.         RealFrameExample realFrameExample = new RealFrameExample();  
3.         Criteria criteria = realFrameExample.createCriteria();  
4.         criteria.andIdLessThanOrEqualTo(count);  
5.         List<RealFrame> list= realFrameMapper.selectByExample(realFrameExample);  
6.         return list;  
7.     }  

五、呼叫dao 層自動連結資料庫，查詢資料返回給到前端顯示。前兩圖分別是dao 層查詢介面和 相應的 mapper.xml 對映檔案。