struts下实现ajax的实例

 

http://www.it-eye.nl/weblog/2005/12/13/ajax-in-struts-implementing-dependend-select-boxes/

script

 

script:
<script language="javascript">
 var req;
 /*
  * Get the second options by calling a Struts action
  */
 function retrieveProjectOptions(){
   
    firstBox = document.getElementById('firstBox');
   
    //Nothing selected
    if(firstBox.selectedIndex==0){
      return;
    }
    selectedOption = firstBox.options[firstBox.selectedIndex].value;
    //get the (form based) params to push up as part of the get request
    url="retrieveProjectOptionsAjaxAction.do?selectedOption="+selectedOption;
 
    //Do the Ajax call
    if (window.XMLHttpRequest){ // Non-IE browsers
      req = new XMLHttpRequest();
      //A call-back function is define so the browser knows which function to call after the server gives a reponse back
      req.onreadystatechange = populateSecondBox;
      try {
          req.open("GET", url, true); //was get
      } catch (e) {
         alert("can not connect to server");
      }
      req.send(null);
    } else if (window.ActiveXObject) { // IE     
      req = new ActiveXObject("Microsoft.XMLHTTP");
      if (req) {
        req.onreadystatechange = populateSecondBox;
        req.open("GET", url, true);
        req.send();
      }
    }
  }
 
  //Callback function
  function populateSecondBox(){
      document.getElementById('secondBox').options.length = 0;

    if (req.readyState == 4) { // Complete
      if (req.status == 200) { // OK response
         textToSplit = req.responseText;
        
         if(textToSplit == '803'){
            alert("No select option available on the server");
        }
          //Split the document
          returnElements=textToSplit.split("||");
          //Process each of the elements    
          for(var i=0;i<returnElements.length;i++){
             valueLabelPair = returnElements[i].split("|");
             document.getElementById('secondBox').options[i] = new Option(valueLabelPair[1], valueLabelPair[0]);
          }
        } else { 
            alert("Bad response by the server");
        }   
    }
    }
</script>

 

form

<html:form action="/addModule">
        小组 : <html:select property="group" onchange="retrieveProjectOptions()"
                styleId="firstBox" styleClass="mandatory">
                <html:option value="-1">请选择</html:option>
                <html:options collection="groups" labelProperty="groupName"
                    property="groupId" />
            </html:select>
            <html:errors property="group" />
            <br />
        所属项目 : <html:select property="project" styleId="secondBox"
                styleClass="mandatory">
                <html:option value="nothing">-First choose above-</html:option>
            </html:select>
            <html:errors property="project" />
            <br />
            模块名 : <html:text property="moduleName" />
            <html:errors property="moduleName" />
            <br />
            模块描述 : <html:text property="description" />
            <html:errors property="description" />
            <br />
            <html:hidden property="isSubmit" value="true" />

            <html:submit value="提交" />  
        </html:form>

 

struts config

 

struts config
<action path="/retrieveProjectOptionsAjaxAction"
            type="com.baidu.platform.project.action.RetrieveProjectOptionsAjaxAction">

        </action>

 

Action

 

package com.baidu.platform.project.action;

import java.io.PrintWriter;
import java.util.List;

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;

import com.baidu.platform.entities.ProjectDetail;
import com.baidu.platform.service.ProjectService;

public class RetrieveProjectOptionsAjaxAction extends Action {
    /**
     * This is the main action called from the Struts framework.
     *
     * @param mapping
     *            The ActionMapping used to select this instance.
     * @param form
     *            The optional ActionForm bean for this request.
     * @param request
     *            The HTTP Request we are processing.
     * @param response
     *            The HTTP Response we are processing.
     * @throws javax.servlet.ServletException
     * @throws java.io.IOException
     * @return
     */
    public ActionForward execute(ActionMapping mapping, ActionForm form, HttpServletRequest request,
            HttpServletResponse response) throws Exception {
        String selectedOption = request.getParameter("selectedOption");
        PrintWriter out = response.getWriter();
        // Check of het soortId wel correct is
        if ((selectedOption.trim().length() == 0)) {
            out.print("803");
        } else {
            List<ProjectDetail> options = ProjectService.getProjectsInGroup(Integer.parseInt(selectedOption));
            // Make a String representation where each option is seperated by '||' and a value and a label by '|'
            String outLine = makeOutputString(options);
            out.print(outLine);
            System.out.println(outLine);
        }
        return null;
    }

    private String makeOutputString(List<ProjectDetail> options) {
        String result = "";
        boolean first = true;
        for (ProjectDetail project : options) {
            if (!first) {
                result += "||";
            }
            first = false;
            result = result + project.getProjectId() + "|" + project.getProjectName();
        }
        return result;
    }

}