在最近的項目中遇到這樣一個問題:用戶點擊一個按鈕後要調用後臺的方法,此方法將返回一個List的集合;頁面要求,不刷新整個頁面只刷新局部頁面,並將List中的對象遍歷的顯示在頁面中。
局部刷新,我最快想到的都是用Ajax來完成,但是之前沒有用過json,所以在實現的過程中遇到了一點小麻煩,不過最後還是解決了。
頁面代碼爲:
<div>您這天作試卷了嗎? <span class="len_yes" οnclick="checkExamYes('<s:property value="checkDay"/>');"><a href="javascript:void(0)">做了</a></span> </div>
<script type="text/javascript"> function checkExamYes(checkDay){ $.ajax({ url : "<%=contextPath%>/stu/studyplanWeb!getExamSummaryLimtContent.action", type : "post", dataType : "json", data : { "examSummary.summarydate" : checkDay }, success : function(result) { //顯示 var epNameList = result.entity; if(epNameList == null){ checkExam(checkDay); }else{ var displayexminfo=""; //用Jquery的each()方法循環遍歷得到的epNameList $.each(epNameList,function(key,val){ displayexminfo+="<li>您做了"+"<font style='color:yellow;'>"+ val.substring(0,6)+"..."+"</font>"+"試卷。</li>"; //alert(key); (只顯示5條計入) if(key=='5'){ return false; //跳出循環 } }); $("#examdo2").show(); $("#examdo").hide(); $("#resExamText").html(displayexminfo); $("#resExamText").show(); } }, error : function(error) { showErrorWin('error===checkExamYes',''); } }); } </script>
java 代碼爲:
public String getExamSummaryLimtContent(){ List<ExamSummary> examSummaryList = null; try{ QueryExamSummaryCondition qExamsummaryCondition = getQueryExamSummaryCondition(); // 當天 String currdate = DateUtil. formatDate(examSummary.getSummarydate()); Date summarydate = DateUtil.toSqlDate(currdate, "yyyy-MM-dd"); qExamsummaryCondition.setSummarydate(summarydate); qExamsummaryCondition.setCusId(getLoginUserId()); examSummaryList = examSummaryService.getExamSummaryList(queryExamSummaryCondition); List<String> epNameList = new ArrayList<String>(); if(examSummaryList != null && examSummaryList.size()>0){ //取得 Exapa的epName 集合 for(int i=0;i<examSummaryList.size();i++){ ExamSummary es = examSummaryList.get(i); int epId = es.getExamId(); Exapa exapa = null; exapa = examSummaryService.getExampaperById(epId); System.out.println(exapa.getEpName()); if(exapa != null){ String epName = exapa.getEpName(); epNameList.add(epName); } } //將epNameList設置進Result中 setResult( new Result<List<String>>(false,"success",null,epNameList)); }else{ setResult( new Result<List<String>>(false,"failure",null,null)); } }catch(Exception e){ e.printStackTrace(); setResult( new Result<List<String>>(false,"failure",null,null)); } return "json" ; }