?

          簡介

          Ajax有人形容為“新瓶里的老酒”,這一點也不為過,這里就不多介紹了。在這技術(shù)日新月異的世界里,真是不g不知道,一g嚇一跳。給大家推薦一個實惠的:http://www.aygfsteel.com/eamoi

          AjaxTags是一個開源的項目,目前進(jìn)展你自己看吧:http://ajaxtags.sourceforge.net/,里面有源碼、demo和doc。

          ?

          背景

          歷史解決方法

          1、? 在父select元素的onChange事件中增加方法,調(diào)用action去填充子select元素。

          2、? 方法1 的改進(jìn),將兩個或多個連動select元素放到一個iframe中。

          3、? 將父select元素和子select元素的內(nèi)容,在頁面初始化時裝載到j(luò)s的變量中,由父select元素的onChange事件直接調(diào)用js實現(xiàn)。

          4、? 方法3 的變形,將父select元素和子select元素的內(nèi)容,寫成獨(dú)立的js。

          歷史方法缺點

          方法

          缺點

          方法1

          頁面得全部刷新,須記住其他已填的內(nèi)容

          方法2

          頁面復(fù)雜,iframe得全部刷新

          方法3

          對于用戶的每一次界面操作都得全部加載數(shù)據(jù),資源浪費(fèi),代碼繁多

          方法4

          數(shù)據(jù)庫的字典表和js同步有很大問題,更新麻煩

          我們的目的

          1、? 頁面無需全部刷新;

          2、? 與字典表更新同步;

          3、? 減少網(wǎng)絡(luò)傳輸資源損耗;

          使用方法

          準(zhǔn)備工作

          1、? http://ajaxtags.sourceforge.net/上下載AjaxTags的最新版本,有源碼、demo和doc。

          2、? 按照demo所示,拷貝資源文件:css、js和lib,還要注意WEB-INF 目錄下的ajaxtags.tld。

          開始使用

          1、? web.xml文件中加入

          ? <taglib>

          ???? <taglib-uri>/WEB-INF/ajaxtags.tld</taglib-uri>

          ???? <taglib-location>/WEB-INF/ajaxtags.tld</taglib-location>

          ? </taglib>

          2、? 如果你的連動會多處使用,就寫成一個.inc文件,使用時就引進(jìn)來:<%@ include file="/inc/fathertoson.inc"%>

          <%@ page contentType="text/html;charset=GBK"%>

          ?

          <!--ajax的標(biāo)簽庫-->

          <%@ taglib uri="/WEB-INF/ajaxtags.tld" prefix="ajax"%>

          <!--ajax的css-->

          <link href="css/ajaxtags.css" rel="stylesheet" type="text/css" />

          <link href="css/displaytag.css" rel="stylesheet" type="text/css" />

          <!--ajax的js-->

          <script src="js/prototype-1.3.1.js"></script>

          <script src="js/ajaxtags-1.1.5.js"></script>

          ?

          <tr>

          ??? <td>父select</td>

          ??? <td>

          ??????? <!—struts的標(biāo)簽-->

          ??????? <html:select property="father" value="">

          ??????????? <html:option value="">&nbsp;</html:option>

          ??????????? <html:options collection="fatherCollection" property="id" labelProperty="name" />

          ??????? </html:select>

          ??? </td>

          ???

          ??? <td>子select</td>

          ??? <td>

          ??????? <select name="son">

          ??????????? <option selected>&nbsp;</option>

          ??????? </select>

          ??? </td>

          </tr>

          ?

          <!--父子連動-->

          <ajax:select

          ? baseUrl="fatherToSon.do"

          ? source="father"

          ? target="son"

          ? parameters="fathername={father}" />?

          ?

          解釋一下:

          baseUrl 調(diào)用action的url;

          source 父select

          target 子select

          parameters="fathername={father}" fathername為action中獲得父select值的參數(shù)

          ?

          3、? Action的寫法

          public class FatherToSonAction extends BaseAjaxAction {

          ?

          ??? public String getXmlContent(ActionMapping mapping, ActionForm form, HttpServletRequest request, HttpServletResponse response) throws Exception {

          ??????? // 從界面獲得父select的值,注意該處使用的是"fathername"而不是"father"

          ??????? String selectValue = request.getParameter("fathername");

          ???????

          ??????? // 從數(shù)據(jù)庫中得到子select的列表

          ??????? ArrayList list = (ArrayList) ...;

          ???????

          ??????? // 子select的列表中的對象為子字典對象,具有"name", "id"屬性

          ??????? return new AjaxXmlBuilder().addItems(list, "name", "id").toString();

          ??? }

          ?

          }

          其中BaseAjaxAction和AjaxXmlBuilder可以參照ajax源碼進(jìn)行修改,修改后代碼如下:

          //================================ AjaxXmlBuilder======================

          import java.lang.reflect.InvocationTargetException;

          import java.util.ArrayList;

          import java.util.Collection;

          import java.util.Iterator;

          import java.util.List;

          ?

          import org.apache.commons.beanutils.BeanUtils;

          import org.apache.commons.lang.builder.ToStringBuilder;

          ?

          /**

          ?* Helper class to build valid XML typically returned in a response to the client.

          ?*

          ?* 生成xml類型文件的幫助類,我們可以將xml文件放到response中返回給客戶端

          ?*

          ?* @author Darren Spurgeon

          ?* @version $Revision$ $Date$

          ?*/

          public class AjaxXmlBuilder {

          ?

          ??? private String encoding = "UTF-8";

          ?

          ??? private List items = new ArrayList();

          ?

          ??? public String getEncoding() {

          ??????? return encoding;

          ??? }

          ?

          ??? public void setEncoding(String encoding) {

          ??????? this.encoding = encoding;

          ??? }

          ?

          ??? /**

          ??? ?* Add item to XML.

          ??? ?*

          ??? ?* @param name

          ??? ?*??????????? The name of the item

          ??? ?* @param value

          ??? ?*??????????? The value of the item

          ??? ?* @return

          ??? ?*/

          ??? public AjaxXmlBuilder addItem(String name, String value) {

          ??????? items.add(new Item(name, value, false));

          ??????? return this;

          ??? }

          ?

          ??? /**

          ??? ?* Add item wrapped with inside a CDATA element.

          ??? ?*

          ??? ?* @param name

          ??? ?*??????????? The name of the item

          ??? ?* @param value

          ??? ?*??????????? The value of the item

          ??? ?* @return

          ??? ?*/

          ??? public AjaxXmlBuilder addItemAsCData(String name, String value) {

          ??????? items.add(new Item(name, value, true));

          ??????? return this;

          ??? }

          ?

          ??? /**

          ??? ?* Add items from a collection.

          ??? ?*

          ??? ?* @param collection

          ??? ?* @param nameProperty

          ??? ?* @param valueProperty

          ??? ?* @return

          ??? ?* @throws IllegalAccessException

          ??? ?* @throws InvocationTargetException

          ??? ?* @throws NoSuchMethodException

          ??? ?*/

          ??? public AjaxXmlBuilder addItems(Collection collection, String nameProperty,

          ??????????? String valueProperty) throws IllegalAccessException,

          ??????????? InvocationTargetException, NoSuchMethodException {

          ??????? return addItems(collection, nameProperty, valueProperty, false);

          ??? }

          ?

          ??? /**

          ??? ?* Add items from a collection.

          ??? ?*

          ??? ?* @param collection

          ??? ?* @param nameProperty

          ??? ?* @param valueProperty

          ??? ?* @return

          ??? ?* @throws IllegalAccessException

          ??? ?* @throws InvocationTargetException

          ??? ?* @throws NoSuchMethodException

          ??? ?*/

          ??? public AjaxXmlBuilder addItems(Collection collection, String nameProperty,

          ??????????? String valueProperty, boolean asCData)

          ??????????? throws IllegalAccessException, InvocationTargetException,

          ??????????? NoSuchMethodException {

          ??????? for (Iterator iter = collection.iterator(); iter.hasNext();) {

          ??????????? Object element = (Object) iter.next();

          ??????????? String name = BeanUtils.getProperty(element, nameProperty);

          ??????????? String value = BeanUtils.getProperty(element, valueProperty);

          ??????????? if (asCData) {

          ??????????????? items.add(new Item(name, value, false));

          ??????????? } else {

          ??????????????? items.add(new Item(name, value, true));

          ?

          ??????????? }

          ??????? }

          ??????? return this;

          ??? }

          ?

          ??? /**

          ??? ?* Add items from a collection as CDATA element.

          ??? ?*

          ??? ?* @param collection

          ??? ?* @param nameProperty

          ??? ?* @param valueProperty

          ??? ?* @return

          ??? ?* @throws IllegalAccessException

          ??? ?* @throws InvocationTargetException

          ??? ?* @throws NoSuchMethodException

          ??? ?*/

          ??? public AjaxXmlBuilder addItemsAsCData(Collection collection,

          ??????????? String nameProperty, String valueProperty)

          ??????????? throws IllegalAccessException, InvocationTargetException,

          ??????????? NoSuchMethodException {

          ??????? return addItems(collection, nameProperty, valueProperty, true);

          ??? }

          ?

          ??? /**

          ??? ?* @see java.lang.Object#toString()

          ??? ?*/

          ??? public String toString() {

          ??????? StringBuffer xml = new StringBuffer().append("<?xml version=\"1.0\"");

          ??????? if (encoding != null) {

          ??????????? xml.append(" encoding=\"");

          ??????????? xml.append(encoding);

          ??????????? xml.append("\"");

          ??????? }

          ??????? xml.append(" ?>");

          ?

          ??????? xml.append("<ajax-response>");

          ??????? xml.append("<response>");

          ??????? for (Iterator iter = items.iterator(); iter.hasNext();) {

          ??????????? Item item = (Item) iter.next();

          ??????????? xml.append("<item>");

          ??????????? xml.append("<name>");

          ??????????? if (item.isAsCData()) {

          ??????????????? xml.append("<![CDATA[");

          ??????????? }

          ??????????? xml.append(item.getName());

          ??????????? if (item.isAsCData()) {

          ??????????????? xml.append("]]>");

          ??????????? }

          ??????????? xml.append("</name>");

          ??????????? xml.append("<value>");

          ??????????? if (item.isAsCData()) {

          ??????????????? xml.append("<![CDATA[");

          ??????????? }

          ??????????? xml.append(item.getValue());

          ??????????? if (item.isAsCData()) {

          ??????????????? xml.append("]]>");

          ??????????? }

          ??????????? xml.append("</value>");

          ??????????? xml.append("</item>");

          ??????? }

          ??????? xml.append("</response>");

          ??????? xml.append("</ajax-response>");

          ?

          ??????? return xml.toString();

          ?

          ??? }

          ?

          }

          ?

          /**

          ?* A generic item class, basically representing a name-value pair.

          ?*

          ?* 一個通用的item類,代表了一個name-value對

          ?*

          ?* @author Darren Spurgoen

          ?* @version $Revision$ $Date$

          ?*/

          class Item {

          ?

          ??? private String name;

          ?

          ??? private String value;

          ?

          ??? private boolean asData;

          ?

          ??? /**

          ??? ?* Constructor for Item.

          ??? ?*/

          ??? public Item() {

          ??????? super();

          ??? }

          ?

          ??? /**

          ??? ?* Constructor for Item.

          ??? ?*

          ??? ?* @param name

          ??? ?* @param value

          ??? ?*/

          ??? public Item(String name, String value, boolean asData) {

          ??????? super();

          ??????? this.name = name;

          ??????? this.value = value;

          ??????? this.asData = asData;

          ??? }

          ?

          ??? /**

          ??? ?* @return Returns the name.

          ??? ?*/

          ??? public String getName() {

          ??????? return this.name;

          ??? }

          ?

          ??? /**

          ??? ?* @param name

          ??? ?*??????????? The name to set.

          ??? ?*/

          ??? public void setName(String name) {

          ??????? this.name = name;

          ??? }

          ?

          ??? /**

          ??? ?* @return Returns the value.

          ??? ?*/

          ??? public String getValue() {

          ??????? return this.value;

          ??? }

          ?

          ??? /**

          ??? ?* @param value

          ??? ?*??????????? The value to set.

          ??? ?*/

          ??? public void setValue(String value) {

          ??????? this.value = value;

          ??? }

          ?

          ??? /**

          ??? ?* @return Returns the asCData.

          ??? ?*/

          ??? public boolean isAsCData() {

          ??????? return this.asData;

          ??? }

          ?

          ??? /**

          ??? ?* @param asData

          ??? ?*?????????? ?The asData to set.

          ??? ?*/

          ??? public void setAsData(boolean asData) {

          ??????? this.asData = asData;

          ??? }

          ?

          ??? /**

          ??? ?* @see java.lang.Object#toString()

          ??? ?*/

          ??? public String toString() {

          ??????? return new ToStringBuilder(this).append("name", name).append("value",

          ??????????????? value).append("asData", asData).toString();

          ??? }

          }

          //========================== BaseAjaxAction==============================

          ?

          import java.io.PrintWriter;

          ?

          import javax.servlet.http.HttpServletRequest;

          import javax.servlet.http.HttpServletResponse;

          ?

          import org.apache.struts.action.Action;

          import org.apache.struts.action.ActionForm;

          import org.apache.struts.action.ActionForward;

          import org.apache.struts.action.ActionMapping;

          ?

          /**

          ?* Ajax應(yīng)用的祖先抽象類,將xml文件類型數(shù)據(jù)放到響應(yīng)流中

          ?*

          ?* @author luzhilin

          ?*

          ?*/

          public abstract class BaseAjaxAction extends Action {

          ?

          ??? /**

          ??? ?* @see Action#execute(ActionMapping, ActionForm, HttpServletRequest,

          ??? ?*????? HttpServletResponse)

          ??? ?*/

          ??? public final ActionForward execute(ActionMapping mapping, ActionForm form,

          ??????????? HttpServletRequest request, HttpServletResponse response)

          ??????????? throws Exception {

          ?

          ??????? String xml = null;

          ??????? try {

          ??????????? xml = getXmlContent(mapping, form, request, response);

          ??????? } catch (Exception ex) {

          ??????????? // Send back a 500 error code.

          ??????????? response.sendError(HttpServletResponse.SC_INTERNAL_SERVER_ERROR,

          ??????????????????? "Can not create response");

          ??????????? return null;

          ??????? }

          ?

          ??????? // Set content to xml

          ??????? response.setContentType("text/xml; charset=UTF-8");

          ??????? response.setHeader("Cache-Control", "no-cache");

          ??????? PrintWriter pw = response.getWriter();

          ??????? pw.write(xml);

          ??????? pw.close();

          ?

          ??????? return null;

          ??? }

          ?

          ??? /**

          ??? ?* Each child class should override this method to generate the specific XML

          ??? ?* content necessary for each AJAX action.

          ??? ?*

          ??? ?* 每一個子類都必須重寫此方法,用于生成特定的xml文件數(shù)據(jù)流

          ??? ?*

          ??? ?* @param mapping

          ??? ?* @param form

          ??? ?* @param request

          ??? ?*??????????? the {@javax.servlet.http.HttpServletRequest} object

          ??? ?* @param response

          ??? ?*??????????? the {@javax.servlet.http.HttpServletResponse} object

          ??? ?* @return a {@java.lang.String} representation of the XML response/content

          ??? ?* @throws Exception

          ??? ?*/

          ??? public abstract String getXmlContent(ActionMapping mapping,

          ??????????? ActionForm form, HttpServletRequest request,

          ??????????? HttpServletResponse response) throws Exception;

          ?

          }

          進(jìn)一步思考的問題

          1、?? 多層連動怎么實現(xiàn);

          2、? 多組連動,我們的 action 怎么實現(xiàn);

          posted on 2006-03-08 21:12 野草 閱讀(2636) 評論(7)  編輯  收藏 所屬分類: ajax

          評論:
          # re: 在Struts中使用AjaxTags解決連動問題 2006-10-24 18:30 | cdy
          為什么我按你說的做了一點反應(yīng)都沒有阿?
          今天搞了一天,請指點一點,就是在選中一個select后第二個沒有反應(yīng)
          我把我的代碼發(fā)給你看一下  回復(fù)  更多評論
            
          # re: 在Struts中使用AjaxTags解決連動問題 2006-10-24 18:31 | cdy
          這個是頁面代碼

          <%@ include file="taglibs.jsp"%>

          <html>
          <head>
          <script type="text/javascript" src="<%=request.getContextPath()%>/js/prototype-1.4.0.js"></script>
          <script type="text/javascript" src="js/scriptaculous.js"></script>
          <script type="text/javascript" src="js/overlibmws.js"></script>
          <script type="text/javascript" src="<%=request.getContextPath()%>/js/ajaxtags-1.2-beta2.js"></script>
          <link rel="stylesheet" type="text/css" href="css/ajaxtags.css" />
          <link rel="stylesheet" type="text/css" href="css/displaytag.css" />


          </head>
          <body>
          <c:set var="contextPath" scope="request">${pageContext.request.contextPath}</c:set>



          <html:form action="/drop" >



          question : <html:text property="question" />
          <html:errors property="question" />
          <br />





          firstCatalog : <html:select property="firstCatalogId">
          <html:option value="">select firstCatalog</html:option>
          <html:options collection="firstCatalogList"
          property="firstcatalogid" labelProperty="catalogname" />
          </html:select>
          <html:errors property="firstCatalog" />





          secondCatalog : <select name="secondCatalogId"
          disabled="disabled">
          <option value="">select secondCatalog</option>
          </select>


          <html:submit />
          <html:cancel />
          </html:form>




          <ajax:select baseUrl="/drop.do"
          source="firstCatalogId"
          target="secondCatalogId"
          parameters="fId={firstCatalogId}"
          />
          </body>
          </html>

            回復(fù)  更多評論
            
          # re: 在Struts中使用AjaxTags解決連動問題 2006-10-24 18:33 | cdy
          package com.compass;
          import java.util.List;
          import javax.servlet.http.HttpServletRequest;
          import javax.servlet.http.HttpServletResponse;
          import org.ajaxtags.helpers.AjaxXmlBuilder;
          import org.ajaxtags.servlets.BaseAjaxAction;
          import org.apache.struts.action.ActionForm;
          import org.apache.struts.action.ActionMapping;

          import com.Dao.CatalogDao;



          public class DropAction extends BaseAjaxAction {


          public String getXmlContent(
          ActionMapping mapping, ActionForm form, HttpServletRequest request,
          HttpServletResponse response)
          throws Exception {
          String firstCatalogId = request.getParameter("fId");


          CatalogDao catalogDao = new CatalogDao();
          List list = catalogDao.getSecondCatalogList(firstCatalogId);
          //獲得子select

          return new AjaxXmlBuilder().addItems(list, "secondcatalogid", "catalogname").toString();
          }

          }
            回復(fù)  更多評論
            
          # re: 在Struts中使用AjaxTags解決連動問題 2008-12-26 20:42 | zzl
          不行啊  回復(fù)  更多評論
            
          # re: 在Struts中使用AjaxTags解決連動問題 2008-12-26 20:52 | zzl
          這個不行啊,當(dāng)三級聯(lián)動時怎辦,第一個是通過ACTION ,數(shù)據(jù)從數(shù)據(jù)庫讀入SELECT,第二級是,第一個SELECT 選一個后,跟據(jù)取得ID,作為參數(shù),通過AJAX ACTION,從后臺查出數(shù)據(jù)充入第二個SELECT,第二個SELECT 選一個后,跟據(jù)取得ID,作為參數(shù),通過AJAX ACTION,從后臺查出數(shù)據(jù)充入第三個SELECT,怎辦  回復(fù)  更多評論
            
          # re: 在Struts中使用AjaxTags解決連動問題 2008-12-26 20:52 | zzl
          這個不行啊,當(dāng)三級聯(lián)動時怎辦,第一個是通過ACTION ,數(shù)據(jù)從數(shù)據(jù)庫讀入SELECT,第二級是,第一個SELECT 選一個后,跟據(jù)取得ID,作為參數(shù),通過AJAX ACTION,從后臺查出數(shù)據(jù)充入第二個SELECT,第二個SELECT 選一個后,跟據(jù)取得ID,作為參數(shù),通過AJAX ACTION,從后臺查出數(shù)據(jù)充入第三個SELECT,怎辦  回復(fù)  更多評論
            
          # re: 在Struts中使用AjaxTags解決連動問題 2008-12-26 20:52 | zzl
          這個不行啊,當(dāng)三級聯(lián)動時怎辦,第一個是通過ACTION ,數(shù)據(jù)從數(shù)據(jù)庫讀入SELECT,第二級是,第一個SELECT 選一個后,跟據(jù)取得ID,作為參數(shù),通過AJAX ACTION,從后臺查出數(shù)據(jù)充入第二個SELECT,第二個SELECT 選一個后,跟據(jù)取得ID,作為參數(shù),通過AJAX ACTION,從后臺查出數(shù)據(jù)充入第三個SELECT,怎辦  回復(fù)  更多評論
            
          主站蜘蛛池模板: 渝中区| 新和县| 惠东县| 高雄县| 德保县| 清水县| 临邑县| 四平市| 柳河县| 宽甸| 马尔康县| 江西省| 伊金霍洛旗| 渭南市| 洞口县| 抚宁县| 湘潭市| 枣强县| 德安县| 弥渡县| 丹东市| 寿宁县| 黔江区| 积石山| 全椒县| 海南省| 同仁县| 依兰县| 乐陵市| 札达县| 甘肃省| 祁阳县| 岑巩县| 遂宁市| 宁明县| 荣成市| 深州市| 福泉市| 滁州市| 高平市| 马尔康县|