AJAX实现的省市级联操作

yinxiangbing

浏览: 171422 次
性别:
来自: 北京

最近访客更多访客>>

wangchh8134

langchenglc

fireinjava

丢柏图

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

ajax

Ajax XML Webwork Web JSP

表现层：JSP

    <%@ page language="java" pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<html>
<title></title>
<head>
<script type="text/javascript">
//定义一个变量用于存放XMLHttpRequest对象
var xmlHttp;
//该函数用于创建一个XMLHttpRequest对象
function createXMLHttpRequest(){
         if(window.ActiveXObject){
             xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
         }else if(window.XMLHttpRequest){
             xmlHttp = new XMLHttpRequest();
         }
}
//这是响应省份列表onChange事件的处理方法
    function updateSelect(){
        //得到省份列表的当前选值
  var selected = document.all.slt1.value;

  //创建一个XMLHttpRequest对象
  createXMLHttpRequest();
  //将状态触发器绑定到一个processor函数
  xmlHttp.onreadystatechange = processor;
  //通过GET方法向指定的URL建立服务器的调用
  xmlHttp.open("GET","/createXML.action?selected="+selected,true);
  //发送请求
  xmlHttp.send(null);
}
//这是一个用来处理状态改变的函数
function processor(){
  //定义一个变量用于存放从服务器返回的响应结果
  var result;
  if(xmlHttp.readyState == 4){//如果响应完成
    if(xmlHttp.status == 200){//如果返回成功
     //取出服务器返回的XML文档的所有City标签的子节点响应内容
    var docXML = xmlHttp.responseXML;

     result = docXML.getElementsByTagName("city");
   // alert(result.getAttribute("city"));
   // alert(result.getElementsByTagName("city").childNodes[0].childNodes[0].nodeValue);
   // alert(result[0].childNodes[0].childNodes[0].nodeValue);
    //先清除地市列表的现有内容
    while(document.all.slt2.options.length > 0){
     document.all.slt2.removeChild(document.all.slt2.childNodes[0]);
    }
    //解析result中的数据并更新地市列表
    for(var i = 0 ; i < result.length ;i++){
      var option = document.createElement("OPTION");
      //这是取出<cityname>标签中的值
      option.text = result[i].childNodes[0].childNodes[0].nodeValue;
      //这是取出<cityvalue>标签中的值
      option.value = result[i].childNodes[1].childNodes[0].nodeValue;
      //为地市列表添加选项
      document.all.slt2.options.add(option);
     }
              }
  }
}
</script>
</head>
<body>
请选择省份：
   <select id = "slt1" onChange="updateSelect()">
  <option value="1">湖南省</option>
        <option value="2">广东省</option>
   </select>
地市：
<select id = "slt2">
  <option value="1">请选择城市</option>
   </select>
<br>-----------<br>

</body>
</html>

<%@ page language="java" pageEncoding="UTF-8" contentType="xml"%>
${content}

控制层：

package com.dicorp.ajax.ajax_web.actions;

import java.io.File;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.Properties;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/*import javax.xml.parsers.DocumentBuilder;
import javax.xml.parsers.DocumentBuilderFactory;
import javax.xml.transform.OutputKeys;
import javax.xml.transform.Transformer;
import javax.xml.transform.TransformerFactory;
import javax.xml.transform.dom.DOMSource;
import javax.xml.transform.stream.StreamResult;
*/
/*import org.jdom.Document;
import org.jdom.Element;
import org.jdom.output.Format;
import org.jdom.output.XMLOutputter;
import org.w3c.dom.CDATASection;
import org.w3c.dom.Comment;
import org.w3c.dom.ProcessingInstruction;
import org.w3c.dom.Text;
*/

import com.dicorp.ajax.ajax_web.createXMLUtils.CreateCityXMLUtil;
import com.opensymphony.webwork.ServletActionContext;
import com.opensymphony.webwork.interceptor.ServletRequestAware;
import com.opensymphony.webwork.interceptor.ServletResponseAware;
import com.opensymphony.xwork.Action;
import com.opensymphony.xwork.ActionContext;

import   javax.xml.transform.*;
import   javax.xml.transform.dom.*;
import   javax.xml.transform.stream.*;
import   org.w3c.dom.*;
import   java.io.*;
import java.net.URI;

import javax.xml.parsers.*;
import java.util.*;

public class CreateXMLAction implements Action ,ServletResponseAware,ServletRequestAware{
    private String selected;
    private HttpServletResponse response;
    private HttpServletRequest request;

public String getSelected() {
  return selected;
}
public void setSelected(String selected) {
  this.selected = selected;
}
public String execute() throws Exception {
   ActionContext serviceContext = ActionContext.getContext();
    // xmlPath = request.getRequestURI();
     // xmlPath = request.getServletPath();
   StringBuffer xmlPath = request.getRequestURL();
   String rPath = xmlPath.toString();
   if(rPath.lastIndexOf("/") != -1){
    int index = rPath.lastIndexOf("/");
    rPath = rPath.substring(0,index);
   }
   rPath = request.getContextPath();
   System.out.println("?????????????????"+rPath);

  //String resPath = rPath +"/ajax_web/web/xml/city.xml";
   String resPath = request.getServletPath();
      System.out.println("%%%%%%%%%%%%%%%%%%%%%%%%%%%xmlPath=     "+resPath);

   String selected = this.selected;
   System.out.print("&&&&&&&&&&&&&&&&&&&"+selected);
  if(selected.equals("1")){//如果选择的是湖南省
   String address = "长沙,1,娄底,2,常德,3";
   CreateCityXMLUtil.createXML(resPath,address.trim());
  }else{//如果选择的是广东省
   String address = "广州,1,深圳,2,佛山,3";
   CreateCityXMLUtil.createXML(resPath,address.trim());
  }
     return SUCCESS;
}
public void setServletResponse(HttpServletResponse response) {
   this.response = response;
}

/*
public void saveToXML(HttpServletResponse response, String sb) throws IOException {
  Document doc = new Document();
  Element root = new Element("response");
  doc.addContent(root);
  System.out.println("&&***&*&**&**&*&*&&&*&&*&**&*"+doc);
  Element item = null;
  item = new Element("city");

  item.setAttribute("cityname","广州");
  item.setAttribute("cityvalue","1");


  root.addContent(item.detach());

  try {
   XMLOutputter printer = new XMLOutputter(Format.getPrettyFormat().setEncoding("UTF-8"));
   response.setContentType("text/xml");
   printer.output(doc, response.getOutputStream());
  } catch (IOException e) {
              e.printStackTrace();
  }
}*/
public void setServletRequest(HttpServletRequest request) {

  this.request = request;
   }
}

package com.dicorp.ajax.ajax_web.createXMLUtils;

import java.io.File;
import java.net.URI;
import java.util.Properties;

import javax.xml.parsers.DocumentBuilder;
import javax.xml.parsers.DocumentBuilderFactory;
import javax.xml.transform.OutputKeys;
import javax.xml.transform.Transformer;
import javax.xml.transform.TransformerFactory;
import javax.xml.transform.dom.DOMSource;
import javax.xml.transform.stream.StreamResult;

import org.w3c.dom.Document;
import org.w3c.dom.Element;

public class CreateCityXMLUtil {
public static void createXML(String resPath ,String address){
  try
    {
   String[] cityAddress = address.split(",");

    DocumentBuilderFactory   domFactory=DocumentBuilderFactory.newInstance();
    DocumentBuilder   builder=domFactory.newDocumentBuilder();

    Document   doc=builder.newDocument();
    Element   response=doc.createElement("response");
    doc.appendChild(response);

  for(int i = 0 ; i < cityAddress.length;i++){
    Element   city = doc.createElement("city");
    response.appendChild(city);
    Element cityname = doc.createElement("cityname");
    cityname.appendChild(doc.createTextNode(cityAddress[i]));
    ++i;
    Element cityvalue = doc.createElement("cityvalue");
    cityvalue.appendChild(doc.createTextNode(cityAddress[i]));
    city.appendChild(cityname);
    city.appendChild(cityvalue);
  }
    File   file=null;
    StreamResult   res=null;
    URI uri = new URI(resPath);
     file=new   File("D:\\MyLucy\\studyworkspace\\ajax_web\\web\\xml\\city.xml");
   // file = new File(uri);
    res = new StreamResult(file);
    DOMSource   ds = new DOMSource(doc);
    TransformerFactory tff = TransformerFactory.newInstance();
    Transformer   tf = tff.newTransformer();
    Properties   props = new Properties();
    props.put(OutputKeys.INDENT,"yes");
    props.put(OutputKeys.ENCODING,"utf-8");//****************
    tf.setOutputProperties(props);//*********************
    tf.transform(ds,res);
    }catch(Exception   e)
    {
     e.printStackTrace();
    }
}
}

分享到：