Ajax Jquery Struts的完美組合!

來源:互聯網
上載者:User

1》首先是頁面的addpath.jsp

<%@page contentType="text/html" pageEncoding="UTF-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <%@ taglib prefix="html" uri="http://struts.apache.org/tags-html" %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>添加路線</title> <mce:script language="javascript" src="<%=request.getContextPath()%><!-- /scripts/jquery-1.4.3.min.js"> // --></mce:script> <link rel="stylesheet" href="<%=request.getContextPath()%>/styles/table.css" type="text/css" /> <mce:script type="text/javascript"><!-- $(function(){ $("select[name='startstationid']").change(function(){ if($(this).val()!="/u9009擇起點站"){//選擇起點站,如果選擇項不是“選擇起點站”,使用jquery的ajax,url為selectstationforpath.do $.ajax({ type:"post", url:"selectstationforpath.do", data:{ startstationid : $(this).val() }, success:function(data, textStatus){ $("select[name='endstationid']").html(data); }, error: function(){ alert("/u6ca1有網站可以選擇。"); } }); }else{ $("select[name='endstationid']").html("<option>/u9009擇終點站</option>"); } }); $("select[name='endstationid']").change(function(){ if($("select[name='startstationid']").val()=="/u9009擇起點站"){//如果選擇項是“選擇起點站”,提示選擇 alert("/u8bf7選擇起點站。"); }else if($(this).val() == "/u9009擇終點站"){//如果選擇項是“選擇終點站”,提示選擇 alert("/u8bf7選擇終點站。"); }else{ $.ajax({ type:"post", url:"judgeexistenceofpath.do", data:{ startstationid : $("select[name='startstationid']").val(), endstationid : $(this).val() }, success:function(data, textStatus){ if(data == 1){ alert("/u8def線已經存在,請重新選擇。"); } }, error: function(){ alert("/u6ca1有路勁可以選擇。"); } }); }; }); }) // --></mce:script> </head> <body> <form id="pathsform" method="post" action="addPath.do" name="path"> <table> <thead> <tr> <th colspan="2">添加路線</th> </tr> </thead> <tbody> <!-- private int id; private Station startstation; private Station endstation; private int distance; private String remark; private String description; --> <tr> <td class="label">起始網站:</td> <td class="content2"><select name="startstationid"> <option>選擇起點站</option> <c:forEach var="station" items="${paths_stations}"> <option value="${station.id}" label="${station.stationName}"> </c:forEach> </select></td> </tr> <tr> <td class="label">直達網站:</td> <td class="content2"><select name="endstationid"> <option>選擇終點站</option> <!-- <c:forEach var="station" items="${paths_stations}"> <option value="${station.id}" label="${station.stationName}"> </c:forEach> --> </select></td> </tr> <tr> <td class="label">是否直達:</td> <td class="content2"> <input type="radio" name="through" value="是">是 <input type="radio" name="through" value="否">否 </td> </tr> <tr> <td class="label">站間距離:</td> <td class="content2"><input type="text" class="required" name="distance"/> km</td> </tr> <tr> <td class="label">備忘:</td> <td class="content2"><input type="text" name="remark" class="required"/></td> </tr> </tbody> <tfoot> <tr> <td colspan="2" class="buttons"><input value="提交" type="submit"> <input value="取消" type="reset"></td> </tr> </tfoot> </table> </form> </body> </html>  

2》然後是struts的設定檔struts-config.xml

<!--選擇起網站的action--> <action path="/selectstationforpath" type="cn.osunda.logistics.action.stationmanage.StationAction" scope="request" parameter="selectStationForPathAction"> </action> <!--判斷路線是否存在的action--> <action path="/judgeexistenceofpath" type="cn.osunda.logistics.action.stationmanage.StationAction" scope="request" parameter="judgeExistenceOfPathAction"> </action> 

3》最後是action的編寫

public ActionForward selectStationForPathAction(ActionMapping mapping, ActionForm form, HttpServletRequest request, HttpServletResponse response) throws Exception { try { String startstationid = request.getParameter("startstationid"); List station = sdi.getObjectsByProperty(Station.class, "id", "<>", Integer.parseInt(startstationid));//這是我後台寫的公用介面 response.setContentType("text/html;charset=utf-8");//設定字元集 PrintWriter out = response.getWriter();//out.println輸出的內容就是前台jquerysuccess:function(data, textStatus)中對應的data if (station != null && station.size() != 0) { for (int i = 0; i < station.size(); i++) { out.println("<option value='" + ((Station) station.get(i)).getId() + "' label='" + ((Station) station.get(i)).getStationName() + "'>"); } } else { out.println("<option value='未選擇' label='沒有可選路線'>"); } out.close(); return null; } catch (Exception ex) { ex.printStackTrace(); return mapping.getInputForward(); } } public ActionForward judgeExistenceOfPathAction(ActionMapping mapping, ActionForm form, HttpServletRequest request, HttpServletResponse response) throws Exception { try { String startstationid = request.getParameter("startstationid"); String endstationid = request.getParameter("endstationid"); Map<String, Object> map = new HashMap<String, Object>(); map.put("startstation", Integer.parseInt(startstationid)); map.put("endstation", Integer.parseInt(endstationid)); Path path = (Path) pdi.getSingleByPropertys(Path.class, map);//這是我後台寫的公用介面 response.setContentType("text/html;charset=utf-8");//設定字元集 PrintWriter out = response.getWriter();//out.println輸出的內容就是前台jquerysuccess:function(data, textStatus)中對應的data if (path != null) { out.println(1); } else { out.println(0); } out.close(); return null; } catch (Exception ex) { ex.printStackTrace(); return mapping.getInputForward(); } } 

4》頁面預覽圖例

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.