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进行显示

1. <script type="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.           
3.         RealFrameExample realFrameExample = new RealFrameExample();  
4.         Criteria criteria = realFrameExample.createCriteria();  
5.         criteria.andIdLessThanOrEqualTo(count);  
6.         List<RealFrame> list= realFrameMapper.selectByExample(realFrameExample);  
7.         return list;  
8.     }  

五、调用dao 层自动链接数据库，查询数据返回给到前端显示。前两图分别是dao 层查询接口和 相应的 mapper.xml 映射文件。