SpringMVC+Hibernate利用ajax实现前端后台数据交互

         比如我做一个查询成绩功能，那么，点击查询的时候，就把选择的查询条件用ajax提交到后台去查询对应条件的成绩列表，得到数据再用ajax返回数据到前端，显示成绩列表

1 . 查询成绩界面

2 . 点击查询，用ajax提交以上四个输入框的内容到后台（哪怕是空的，也要提交）

$("#find").click(function(){var path = $("#path").val();var sub_name = $("#sub_name").val();var user_id = $("#user_id").val();var user_name = $("#user_name").val();var exam_time = $("#exam_time").val();$.ajax({type:"POST",dataType:"json",//url:path+"/teach/test",url:path+"/teach/queryScore",async: false, data:{ user_id:user_id, user_name:user_name, sub_name:sub_name, exam_time:exam_time},success:function(data){if(data.NOTFOUND == "true"){$("#tb").html("");alert("找不到合符条件的信息")}else{var html = "";for(var i=0;i<data.resultVO.length;i++){var vo = data.resultVO[i];html += ' <tr>';html += ' <td>'+vo.userHibernateVO.userId+'</td>';html += ' <td>'+vo.userHibernateVO.user_name+'</td>';html += ' <td>'+vo.examSubjectHibernateVO.name+'</td>';html += ' <td>'+vo.exam_time+'</td>';html += ' <td>'+vo.score+'</td>';html += ' </tr>';}$("#tb").html(html);}}, error: function(XMLHttpRequest, textStatus, errorThrown) { alert("XMLHttpRequest.status:"+XMLHttpRequest.status+"\n"+"XMLHttpRequest.readyState:"+XMLHttpRequest.readyState+"\n" +"textStatus:"+textStatus);   }})

3 . 后台处理，得到对应条件的集合，放到Map里面，返回给前端

@ResponseBody@RequestMapping(value = "/queryScore") // request // codepublic Map<String, Object> queryScore(HttpServletRequest req, Model model, String user_id, String user_name, String sub_name, String exam_time)throws Exception { Map<String, Object> map = new HashMap<String, Object>(); map.put("NOT-FOUND", "true");List<ExamScoreVO> list = teacherService.queryScore(user_id, user_name, sub_name, exam_time);if(!list.isEmpty()){map.put("NOTFOUND", "false");map.put("resultVO", list);}else{map.put("NOTFOUND", "true");}return map;}

4 . 其中model存储器ExamScoreVO.java代码如下

public class ExamScoreVO {private Integer id;private String exam_time;private Double score;private String user_id;private Integer sub_id;private long remainingTime;private ExamSubjectHibernateVO examSubjectHibernateVO;private UserHibernateVO userHibernateVO;public Integer getId() {return id;}public void setId(Integer id) {this.id = id;}public String getExam_time() {return exam_time;}public void setExam_time(String exam_time) {this.exam_time = exam_time;}public Double getScore() {return score;}public void setScore(Double score) {this.score = score;}public String getUser_id() {return user_id;}public void setUser_id(String user_id) {this.user_id = user_id;}public Integer getSub_id() {return sub_id;}public void setSub_id(Integer sub_id) {this.sub_id = sub_id;}public long getRemainingTime() {return remainingTime;}public void setRemainingTime(long remainingTime2) {this.remainingTime = remainingTime2;}public ExamSubjectHibernateVO getExamSubjectHibernateVO() {return examSubjectHibernateVO;}public void setExamSubjectHibernateVO(ExamSubjectHibernateVO examSubjectHibernateVO) {this.examSubjectHibernateVO = examSubjectHibernateVO;}public UserHibernateVO getUserHibernateVO() {return userHibernateVO;}public void setUserHibernateVO(UserHibernateVO userHibernateVO) {this.userHibernateVO = userHibernateVO;}}

5 . 查询方法queryScore()是得到对应输入框条件的集合

@Overridepublic List<ExamScoreVO> queryScore(String user_id, String user_name, String sub_name, String exam_time) throws Exception {Session session = getSession();ExamScore score = null;ExamScoreVO scorevo = null;List<ExamScoreVO> scorevoList = null;UserHibernate user = null;UserHibernateVO userVO = null;ExamSubjectHibernate sub = null;ExamSubjectHibernateVO subVO = null; StringBuilder sql = new StringBuilder(); scorevoList = new ArrayList<ExamScoreVO>(); sql.append(" SELECT score.id as ScoreId"); sql.append(" FROM exam_score score"); sql.append("  JOIN exam_user user on `user`.user_id = score.user_id"); if(!user_id.equals("")){ sql.append (" AND `user`.user_id LIKE '%"+user_id+"%'"); }if(!user_name.equals("")){ sql.append (" AND `user`.user_name LIKE '%"+user_name+"%'"); } sql.append(" JOIN exam_subject sub on sub.sub_id = score.sub_id ");      if(!sub_name.equals("")){     sql.append (" AND `sub`.name LIKE '%"+sub_name+"%'");     }     if(!exam_time.equals("")){     sql.append (" AND `score`.exam_time LIKE '%"+exam_time+"%'");     }  List<Integer> list = session.createSQLQuery(String.valueOf(sql))      .addScalar("ScoreId",IntegerType.INSTANCE).list(); System.out.println("list.size:"+list); for(Integer id:list){ score = getExamScoreById(id); scorevo = new ExamScoreVO(); userVO = new UserHibernateVO(); subVO = new ExamSubjectHibernateVO(); user = iUserHibernateDAO.getUserById(score.getUser_id()); sub = iExamHibernateDAO.getSubjectById(score.getSub_id());  BeanUtils.copyProperties(userVO,user); BeanUtils.copyProperties(subVO,sub);  scorevo.setExam_time((new SimpleDateFormat("yyyy-MM-dd")).format(score.getExam_time())); scorevo.setScore(score.getScore()); scorevo.setUserHibernateVO(userVO); scorevo.setExamSubjectHibernateVO(subVO); scorevoList.add(scorevo); } return scorevoList;}

6 . 前端接收后台传过来的List集合,再去看看第二步ajax请求成功时的success函数，遍历list，将每个对象的数据拼接成html，再append到前端相应的地方

7 . OK , SpringMVC + Hibernate 利用ajax实现前端后台数据交互完整流程已经一一讲解的经已很详细，谢谢大家