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