2009年7月28日 星期二

Struts2 + Dojo實現Ajax功能 

功能說明：延續Struts2 + MySql實現分頁顯示之CRUD功能，增加列出學生連絡資料後，並於學號欄位增加一個連結，如此只要使用者按下此連結即可得到此學號之基本資料並將此資料秀於學生連絡資料表格之下方。


1.修改show.jsp頁面：如紅色字體部分為新增加。



<%@ page contentType="text/html; charset=UTF-8" %>



<%@ taglib prefix="s" uri="/struts-tags" %>



<html>



<head>



<title>分頁秀出學員資料</title>



<s:head theme="ajax"/><!-- for Ajax -->



</head>



<script type="text/javascript">



 var i=0;



 function ProcessTimer(){



  setInterval("showTimer()",1000);



 }



 function showTimer(){



  i++;



  msg.innerText=i;



  var date = new Date();



  dateTime.innerText=date.getMonth()+1+"/"+date.getDate()+"/"+date.getYear()+" "+date.getHours()+":"+date.getMinutes()+":"+date.getSeconds();



 }



 //for Aajx with dojo



 function show_user_detail(id){



  document.form_student.sid.value=id;



  dojo.event.topic.publish("show_detail");



 }



</script>



<body onload="ProcessTimer()">



 <div align="center">



  <s:form id="form_student" name="form_student">



  <h3>學生連絡資料</h3>



  <table border="1" bordercolor="#999999">



   <tr bgcolor="#CCFFFF">



    <th>學號</th>



    <th>姓名</th>



    <th>地址</th>



    <th>電話</th>



    <th colspan=3>動作</th>



   </tr>   



   <s:iterator value="students" status="status">



   <s:if test="#status.odd==true">



    <tr bgcolor="pink">



   </s:if>



   <s:else>



    <tr bgcolor="#FF99FF">



   </s:else>    



     <td align="center"><s:a href="#" onclick="javascript:show_user_detail('%{#status.index}');return false;"><s:property value="stu_id" /></s:a></td>



     <td><s:property value="stuName" /></td>



     <td><s:property value="address" /></td>



     <td><s:property value="stuPhone" /></td>    



     <script type="text/javascript">



      function edit_<s:property value='#status.index' />(){ 



       location.href="updateForm.action?sid=<s:property value='#status.index'/>&pageNow=<s:property value='pageNow'/>";



      }



      function delete_<s:property value='#status.index' />(){    



       location.href="delete.action?sid=<s:property value='#status.index'/>";



      }



      function showDetail_<s:property value='#status.index' />(){    



       location.href="showDetail.action?sid=<s:property value='#status.index'/>&pageNow=<s:property value='pageNow'/>";



      }      



     </script>



     <td><input type="button" value="編輯" onclick="edit_<s:property value='#status.index' />()"/>



     <td><input type="button" value="刪除" onclick="delete_<s:property value='#status.index' />()"/>



     <td><input type="button" value="查看" onclick="showDetail_<s:property value='#status.index' />()"/>



    </tr>



   </s:iterator>



   <!-- put students to session -->



   <s:set name="students" value="students" scope="session"></s:set>    



  </table> 



  <br/>



  <s:url id="url_pre" value="show.action">



   <s:param name="pageNow" value="pageNow-1"></s:param>



  </s:url>



  <s:url id="url_next" value="show.action">



   <s:param name="pageNow" value="pageNow+1"></s:param>



  </s:url>



  <s:url id="url_last" value="show.action">



   <s:param name="pageNow" value="totalPage"></s:param>



  </s:url>



  <s:url id="url_first" value="show.action">



   <s:param name="pageNow" value="1"></s:param>



  </s:url>  



  <script type="text/javascript">



   function nextPage(){



    location.href="<s:property value='#url_next'/>";    



   }



   function prePage(){



    location.href="<s:property value='#url_pre'/>";    



   }



   function lastPage(){



    location.href="<s:property value='#url_last'/>";



   }



   function firstPage(){



    location.href="<s:property value='#url_first'/>";



   }   



  </script> 



  <s:if test="students.size()==0"/>



  <s:elseif test="%{pageNow==1}">



   <!--



   <s:a href="#url_next">下一頁</s:a>&nbsp;&nbsp;&nbsp;&nbsp;



   <s:a href="#url_last">最後一頁</s:a><br/><br/>



   -->



   <input type="button" value="下一頁" onclick="nextPage()"/>&nbsp;&nbsp;&nbsp;&nbsp; 



   <input type="button" value="最後一頁" onclick="lastPage()"/><br/><br/> 



  </s:elseif>



  <s:elseif test="%{totalPage==pageNow}">



   <!--



   <s:a href="#url_pre">上一頁</s:a>&nbsp;&nbsp;&nbsp;&nbsp;



   <s:a href="#url_first">第一頁</s:a><br/><br/>



   -->



   <input type="button" value="上一頁" onclick="prePage()"/>&nbsp;&nbsp;&nbsp;&nbsp;



   <input type="button" value="第一頁" onclick="firstPage()"/><br/><br/>



  </s:elseif>



  <s:else>



   <!--



   <s:a href="#url_pre">上一頁</s:a>&nbsp;&nbsp;&nbsp;&nbsp;   



   <s:a href="#url_next">下一頁</s:a>&nbsp;&nbsp;&nbsp;&nbsp;



   <s:a href="#url_first">第一頁</s:a>&nbsp;&nbsp;&nbsp;&nbsp;



   <s:a href="#url_last">最後一頁</s:a><br/><br/>   



    -->



    <input type="button" value="上一頁" onclick="prePage()"/>&nbsp;&nbsp;&nbsp;&nbsp;



    <input type="button" value="下一頁" onclick="nextPage()"/>&nbsp;&nbsp;&nbsp;&nbsp;



    <input type="button" value="第一頁" onclick="firstPage()"/>&nbsp;&nbsp;&nbsp;&nbsp;



    <input type="button" value="最後一頁" onclick="lastPage()"/><br/><br/>



  </s:else>



  共<s:property value="totalCount"/>筆記錄,



  共<s:property value="totalPage"/>頁,



  第<s:property value="pageNow"/>頁&nbsp;&nbsp;&nbsp;&nbsp;



  <a href="main.action">回到首頁</a> 



  <!-- for Ajax with dojo -->



  <s:hidden name="sid"/>



  <s:url id="d_url" action="StudentDetailAction"/>   




  <s:div id="student_details" href="%{d_url}" theme="ajax" listenTopics="show_detail" formId="form_student"/>     




  </s:form>   




  <!-- for Ajax with dojo -->    




 </div>



 <br/>



 <div>



  Timer:<span id=msg></span><br/>



  Current Date Time:<span id=dateTime></span>



  <s:debug/>



 </div>



</body>



</html>



=============================================






2.新增studentDetail.jsp頁面來呈現Ajax執行結果











<jsp:directive.page contentType="text/html; charset=UTF-8"/>



<jsp:directive.taglib prefix="s" uri="/struts-tags"/>








<s:if test="student!=null">



<table border="0">



 <tr><th colspan="2">學生基本資料(Ajax demo for Dojo)</th></tr>



 <tr><td><s:label key="stu_id" label="學號"/></td></tr>



 <tr><td><s:label key="stuName" label="姓名"/></td></tr>



 <tr><td><s:label key="stuPhone" label="電話"/></td></tr>



 <tr><td><s:label key="address" label="住址"/></td></tr>



</table>



</s:if>



<s:debug/>





============================================








3.修改struts.xml：增加一個StudentDetailAction Action。如紅色字體部份。







<?xml version="1.0" encoding="UTF-8" ?>



<!DOCTYPE struts PUBLIC



"-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"



"http://struts.apache.org/dtds/struts-2.0.dtd">



<struts>



<constant name="struts.devMode" value="true" />








 <package name="default" namespace="/" extends="struts-default">



  <global-results>



   <result name="error">/Error.jsp</result>



  </global-results>



  <global-exception-mappings>



   <exception-mapping result="error" exception="java.lang.Exception"></exception-mapping>



  </global-exception-mappings>



  <action name="main" class="study.Main">



   <result>/index.jsp</result>



  </action>



  <action name="show" class="study.ShowAction">



   <result name="success">/show.jsp</result>



   <result name="error">/Error.jsp</result>



   <result name="input">/index.jsp</result>



  </action>



  <action name="updateForm" class="study.UpdateForm">



   <result>/updateForm.jsp</result>



  </action>



  <action name="update" class="study.UpdateSuccess">



   <result>/updateSuccess.jsp</result>



  </action>



  <action name="insertForm" class="study.InsertForm">



   <result>/insertForm.jsp</result>



  </action>



  <action name="insert" class="study.InsertSuccess">



   <result>/insertSuccess.jsp</result>



   <result name="input">/insertForm.jsp</result>



  </action>



  <action name="delete" class="study.DeleteSuccess">



   <result>/deleteSuccess.jsp</result>



  </action>



  <action name="showDetail" class="study.UpdateForm">



   <result>/showDetail.jsp</result>



  </action>



  <action name="StudentDetailAction" class="study.UpdateForm">



   <result>/studentDetail.jsp</result>



  </action>



 </package>



 



 <package name="Chart" namespace="/chart" extends="struts-default">



  <result-types>



   <result-type name="chart" class="org.apache.struts2.dispatcher.ChartResult"></result-type>



  </result-types>



  <action name="viewModerationChart" class="study.ViewModerationChart">



   <result name="success" type="chart">



    <param name="width">400</param>



    <param name="height">300</param>



   </result>



  </action>



  <action name="viewModerationChartDispatcher">



   <result name="success" type="dispatcher">/ViewModerationChartDispatcher.jsp</result>



  </action>



 </package> 



</struts>





===========================================








4.測試結果：









當表格中之學號被點下後，JavaScript就會通知Div Tag從URL中動態Load學生基本資料返回內容。



此為執行StudentDetailAction取得學生基本資料後，將studentDetail產生之結果傳送到show.jsp，並呈現在Div位置中。

張貼者： 於
標籤：

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)