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 // code
	public 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()是得到对应输入框条件的集合

@Override
	public 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实现前端后台数据交互完整流程已经一一讲解的经已很详细，谢谢大家