MyEclipse整合SSM框架(四):整合前端頁面,通過ajax請求獲得資料
Spring+SpringMVC+Mybatis 框架已經搭建完成,其中包括:(1)maven工程的搭建 (2)框架所需要的配置檔案的配置 (3)Mybatis 建立逆向工程連結資料庫。相應的配置檔案參見前幾篇部落格。
此篇整理前端頁面傳送ajax 請求到後端,後端通過 Mybatis 連結資料庫,返回JSON資料給前端頁面,完成顯示功能。
一、在webapp目錄下建立 index.jsp ,將前端內容寫入,這裡以一個文字框為例(用到bootStrap 這個前端框架):
二、在 index.jsp 中寫 ajax請求,這裡用 jquery 來寫,請求為/frames,帶上引數 count=200即返回200個數,判斷如果成功的返回資料,就將返回的資料寫入 textarea進行顯示
- <scripttype="text/javascript">
- $("#frame_getReal_btn").click(function(){
- $.ajax({
- url:"${APP_PATH}/frames",
- data:"count=200",
- type:"GET",
- success:function(result){
- $("#frame_getReal_btn").parent().find("textarea").empty();
- var frames = result.returnData.frames;
- if(result.code == 100){
- $.each(frames, function(index, item){
- $("#frame_getReal_btn").parent().find("textarea").append(item.pRealFrame1).append(" "); });
- }
- }
- });
- });
- </script>
三、在 controller 包下建立 FrameController.java ,類上添加註解 @Controller 交給 SpringMVC 處理相應的請求。新增方法 getRealFramesWithJSON( ) 返回 從資料庫裡查到的資料。@ResponseBody 註解自動封裝 Map 資料成 JSON 資料返回給前端。
- @ResponseBody
- @RequestMapping(value = "/frames", method = RequestMethod.GET)
- public Msg getRealFramesWithJSON(@RequestParam(value = "count", defaultValue = "10") Integer count) {
- List<RealFrame> frames = frameService.getFrame(count);
- return Msg.success().add("frames", frames);
- }
四、在FrameController 類中 @Autowired 自動注入 FrameService的物件,在Service包下建立FrameService.java 類,添加註解 @Service ,用於處理業務邏輯和呼叫dao層。@Autowired 自動注入RealFrameMapper在dao層的這個類,前提是RealFrame 這個 javaBean 以及mybatis的對映檔案,已經通過 Mybatis 逆向工程或者自己建立好。
- public List <RealFrame> getFrame(Integer count){
- RealFrameExample realFrameExample = new RealFrameExample();
- Criteria criteria = realFrameExample.createCriteria();
- criteria.andIdLessThanOrEqualTo(count);
- List<RealFrame> list= realFrameMapper.selectByExample(realFrameExample);
- return list;
- }
五、呼叫dao 層自動連結資料庫,查詢資料返回給到前端顯示。前兩圖分別是dao 層查詢介面和 相應的 mapper.xml 對映檔案。