struts1+ajax实现省市联动菜单

最新推荐文章于 2021-08-05 13:59:04 发布

wanglihuhappy

最新推荐文章于 2021-08-05 13:59:04 发布

阅读量145

点赞数

分类专栏： Ajax技术文章标签： Ajax Struts Servlet Apache JSP

本文链接：https://blog.csdn.net/wanglihuhappy/article/details/83297027

版权

Ajax技术专栏收录该内容

4 篇文章 0 订阅

订阅专栏

想实现一个省市联动菜单,断断续续研究了好长时间,现在终于通过自己的努力实现了.
过程详解:
准备工作:
一个XML文件:

xml 代码

xml version="1.0" encoding="GBK"?>
<china>
<province name="直辖市">
<city>北京city>
<city>上海city>
<city>天津city>
<city>重庆city>
province>
<province name="广东">
<city>广州city>
<city>珠海city>
<city>深圳city>
<city>东莞city>
province>
<province name="广西">
<city>桂林city>
<city>柳州city>
<city>北海city>
<city>南宁city>
province>
<province name="海南">
<city>海口city>
<city>三亚city>
province>
<province name="湖北">
<city>武汉city>
<city>鄂州city>
<city>荆州city>
<city>十堰city>
province>
<province name="湖南">
<city>长沙city>
<city>岳阳city>
<city>常德city>
<city>张家界city>
province>
<province name="浙江">
<city>杭州city>
<city>绍兴city>
<city>宁波city>
<city>台州city>
province>
<province name="辽宁">
<city>沈阳city>
<city>大连city>
<city>抚顺city>
<city>铁岭city>
province>
china>

用一个Java类来解析这个XML文件,我用的是JDOM,实现的功能为能够获取所有省份,和传入省份的集合(用于Jsp页面显示),可以获取相应的城市集合.

java 代码

import java.io.FileNotFoundException;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;
import org.jdom.Document;
import org.jdom.Element;
import org.jdom.JDOMException;
import org.jdom.input.SAXBuilder;
public class ReadXml {
private Element root = null;
public ReadXml() throws FileNotFoundException, JDOMException, IOException {
super();
SAXBuilder sb = new SAXBuilder();//解析器对象
Document doc = sb.build(this.getClass().getResourceAsStream("/city.xml"));//绑定文件
root = doc.getRootElement();//获取根元素
}
public List getProvince(){ //获取省份
ArrayList provinceList = new ArrayList();
List tempList = root.getChildren();//获取所有省份节点
for(int i=0; i
Element province=(Element)tempList.get(i);//子节点转型
provinceList.add(province.getAttributeValue("name"));//获取省份节点属性内容
}
return provinceList;
}
public List getCity(String province){
ArrayList cityList = new ArrayList();
List provincetemplist = root.getChildren();//省份集合
for(int i=0; i
Element provinceElement = (Element)provincetemplist.get(i);
if((provinceElement.getAttributeValue("name")).equals(province)){//如果属性为传进来的名称
List cityTempList = provinceElement.getChildren();//获取子节点集合
for(int j=0; j//循环
Element cityElement = (Element)cityTempList.get(j);//当前城市节点
cityList.add(cityElement.getTextTrim());//增加城市到集合
}
}
}
return cityList;
}
}

准备工作完毕,建一个Struts工程
写一个Action,用来获取省份集合

java 代码

public class GetProvinceAction extends Action {
public ActionForward execute(ActionMapping mapping, ActionForm form,
HttpServletRequest request, HttpServletResponse response) throws FileNotFoundException, JDOMException, IOException {
ReadXml rx = new ReadXml();
List provinces = rx.getProvince();//获取省份
request.setAttribute("provinces", provinces);//放入request中
return mapping.findForward("success");
}
}

先通过此Action,然后再显示首页,这样省的下拉框里就有值了.
我先把Struts-Config.XML文件贴出来

xml 代码

<form-beans>
<form-bean name="selectForm" type="com.selectdemo.struts.form.SelectForm" />
form-beans>
<action-mappings>
<action path="/getProvince" type="com.selectdemo.struts.action.GetProvinceAction">
<forward name="success" path="/select.jsp"/>
action>
<action path="/select" scope="request" input="/select.jsp" name="selectForm"
type="com.selectdemo.struts.action.SelectAction">
<forward name="success" path="/getProvince.do" />
action>

然后是显示的JSP页面

xml 代码

<%@ page language="java" pageEncoding="UTF-8"%>
<%@ taglib uri="http://jakarta.apache.org/struts/tags-bean" prefix="bean"%>
<%@ taglib uri="http://jakarta.apache.org/struts/tags-html" prefix="html"%>
<%@ taglib uri="http://jakarta.apache.org/struts/tags-logic" prefix="logic"%>
<html:html>
<head>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<title>Insert title heretitle>
head>
<script type="text/javascript">
var xmlHttp;
// 创建xmlHttp;
function createXMLHttpRequest(){
if(window.ActiveXObject){
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}else if(window.XMLHttpRequest){
xmlHttp = new XMLHttpRequest();
}
}
// 删除城市选项
function clearCityList(){
var citys = document.getElementById("city");
while(citys.childNodes.length > 0){
citys.removeChild(citys.childNodes[0]);
}
}
//选项省份时
function selectProvince(){
var province = document.getElementById("province").value;//获取省份值
if(province == ""){ //如果为空,则清空城市选项
clearCityList();
var citySelect = document.getElementById("city"); //获取城市select组件
var option = document.createElement("option");
option.appendChild(document.createTextNode("请选择城市"));
citySelect.appendChild(option);
return ; //返回
}
//服务器处理地址,是一个Servlet
var url = "http://localhost:8080/SelelctDemo/servlet/Linkage?province=" + encodeURIComponent(province) + "&ts=" + new Date().getTime();
createXMLHttpRequest();//创建xmlHttp对象;
xmlHttp.onreadystatechange = handleStateChange; //回调函数
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
}
//回调函数
function handleStateChange(){
if(xmlHttp.readyState == 4){
if(xmlHttp.status == 200){
updateCitysList();
}
}
}
//页面更新城市集合函数
function updateCitysList(){
clearCityList();//首先删除先前的城市选项
var citySelect = document.getElementById("city"); //获取城市select组件
var results = xmlHttp.responseXML.getElementsByTagName("city");//获取Ajax返回的结果,city为返回的XML里的节点
var option = null;
for(var i=0; i<results.length; i++){
option = document.createElement("option");
option.appendChild(document.createTextNode(results[i].firstChild.nodeValue));
citySelect.appendChild(option);
}
}
script>
<body>
<html:form action="/select" method="post">
<logic:present name="provinces" scope="request">
<html:select property="province" styleId="province" onchange="selectProvince();">
<html:option value="">请选择省份html:option>
<html:options name="provinces" labelName="provinces" />
html:select>
<html:select property="city" styleId="city" style="width:90px">
<html:option value="">请选择城市html:option>
html:select>
logic:present>
<html:submit>html:submit>
html:form>
<br/>省份:
<logic:present name="province" scope="request">
<bean:write name="province" scope="request"/>
logic:present>
<br/>城市:
<logic:present name="city" scope="request">
<bean:write name="city" scope="request"/>
logic:present>
body>
html:html>

下面是按处理Ajax的Servlet

java 代码

import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.jdom.JDOMException;
import com.selectdemo.tool.ReadXml;
public class Linkage extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=UTF-8");
String province = request.getParameter("province"); //获取参数中的值
System.out.println(province);
ReadXml rx;
List citys = null;
try {
rx = new ReadXml();
citys = rx.getCity(province);
} catch (JDOMException e) {
e.printStackTrace();
}
System.out.println(citys.size());
//组装城市选项
StringBuffer results = new StringBuffer("<citys>");
for(int i=0; i<citys.size(); i++){
results.append("<city>");
results.append(citys.get(i));
results.append("</city>");
}
results.append("</citys>");
response.setContentType("text/xml;");
PrintWriter pw = response.getWriter();
System.out.println(results.toString());
pw.print(results.toString());
pw.flush();
pw.close();
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doGet(request, response);
}
}

Servlet处理完后,返回到JSP页面,会传给JSP页面一个XML文档,以字符串的形式传过去的,JSP页面解析这个String,从而增加城市选项的下拉列表

点击submit后,用一个Action接收,看值传进来没有

java 代码

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.selectdemo.struts.form.SelectForm;
public class SelectAction extends Action {
public ActionForward execute(ActionMapping mapping, ActionForm form,
HttpServletRequest request, HttpServletResponse response) {
response.setContentType("text/html;charset=UTF-8");
SelectForm sf = (SelectForm)form;
String province = sf.getProvince();
System.out.println(province);
String city = sf.getCity();
System.out.println(city);
request.setAttribute("province", province);
request.setAttribute("city", city);
return mapping.findForward("success");
}
}

这里,你会发现,传进来的值会是乱码,解决乱码我写了一个MyActionServlet

java 代码

import org.apache.struts.action.ActionServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class MyActionServlet extends org.apache.struts.action.ActionServlet
{
protected void process(HttpServletRequest request, HttpServletResponse response)
throws java.io.IOException, javax.servlet.ServletException
{
request.setCharacterEncoding("UTF-8");
super.process(request, response);
}
}

wanglihuhappy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
struts1+ajax实现省市联动菜单

想实现一个省市联动菜单,断断续续研究了好长时间,现在终于通过自己的努力实现了.过程详解:准备工作:一个XML文件:xml 代码xml version="1.0" encoding="GBK"?&gt; &lt;china&gt; &lt;province name="直辖市"&gt; &lt;city&gt;北京city&gt;
复制链接

扫一扫

专栏目录