Ajax+struts实现级联菜单~学习笔记
1，数据库表
sheng(省份)：id, uname; shi(市)：id,uname,shengId; xian(县)：id,uname,xianId;
2，新建项目：menuDemo，并添加struts和hibernate引用。
3，创建各个表的dao层方法，返回为List集合，该部分省略。
4，创建MenuAction，继承DispatchAction;
package web.action;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.Iterator;
import java.util.List;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.struts.action.ActionForm;
import org.apache.struts.action.ActionForward;
import org.apache.struts.action.ActionMapping;
import org.apache.struts.actions.DispatchAction;
import dao.ShengDao;
import dao.ShiDao;
import dao.XianDao;
import entity.Shi;
import entity.Xian;
public class MenuAction extends DispatchAction {
public ActionForward searchCity(ActionMapping mapping, ActionForm form,
HttpServletRequest request, HttpServletResponse response)
throws Exception {
int id = Integer.parseInt(request.getParameter("id"));
System.out.println(id);
String searchType = request.getParameter("searchType");
//必须有这句话，负责页面不能解析xml文件
StringBuffer responseXML = new StringBuffer("<?xml version=\"1.0\" encoding=\"UTF-8\"?>");
responseXML.append("<domains>");
if(searchType.equals("shi")){
ShiDao shiDao = new ShiDao();
List list = shiDao.getShi(id);
Iterator it = list.iterator();
while(it.hasNext()){
Shi shi = (Shi)it.next();
responseXML.append("<domain");
responseXML.append(" id='" + shi.getId());
responseXML.append("'>");
responseXML.append(shi.getUname());
responseXML.append("</domain>");
}
}
if(searchType.equals("xian")){
XianDao xianDao = new XianDao();
List list = xianDao.getXian(id);
Iterator it = list.iterator();
while(it.hasNext()){
Xian xian = (Xian)it.next();
responseXML.append("<domain");
responseXML.append(" id='" + xian.getId());
responseXML.append("'>");
responseXML.append(xian.getUname());
responseXML.append("</domain>");
}
}
responseXML.append("</domains>");
response.setContentType("text/xml; charset=UTF-8");
response.setHeader("Cache-Control", "no-cache");
try {
PrintWriter out = (PrintWriter) response.getWriter();
out.write(responseXML.toString());
System.out.println(responseXML.toString());
// out.flush();
} catch (IOException e) {
// do nothing
e.printStackTrace();
}
//返回空值，忽略struts-config.xml配置中的结果页
return null;
}
public ActionForward showSheng(ActionMapping mapping, ActionForm form,
HttpServletRequest request, HttpServletResponse response)
throws Exception {
ShengDao shengDao = new ShengDao();
List list = shengDao.getSheng();
System.out.println(list.size());
request.setAttribute("shengs", list);
return mapping.findForward("showSheng");
}
}
1，struts-config.xml文件配置如下：
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE struts-config PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 1.2//EN" "http://struts.apache.org/dtds/struts-config_1_2.dtd">
<struts-config>
<data-sources />
<form-beans>
<form-bean name="shengForm" type="web.form.ShengForm"></form-bean>
</form-beans>
<global-exceptions />
<global-forwards />
<action-mappings>
<action path="/searchCity" type="web.action.MenuAction" scope="request" parameter="doType"></action>
<action path="/showSheng" type="web.action.MenuAction" scope="request" parameter="doType">
<forward name="showSheng" path="/index.jsp"></forward>
</action>
</action-mappings>
<message-resources parameter="web.ApplicationResources" />
</struts-config>
2，html代码如下：
<body>
<form action="addPersonal.do" method="post">
省:<select id="sheng" name="sheng" onchange="srarchCity('sheng')"> <%
List list = (List)request.getAttribute("shengs");
for(int i=0; i < list.size(); i++){
Sheng sheng =(Sheng)list.get(i);
%>
<option value="<%=sheng.getId() %>"><%=sheng.getUname() %></option>
<%
}
%>
</select><br>
市：<select id="shi" name="shi" onchange="srarchCity('shi')"></select><br>
县：<select id="xian" name="xian"></select>
</form>
</body>
1，html页面的javascript代码如下：
<script type="text/javascript">
var xmlHttpRequest;
var type;
function createXmlHttpRequest(){
if(window.ActiveXObject){
return new ActiveXObject("Microsoft.XMLHTTP");
}else if(window.XMLHttpRequest){
return new XMLHttpRequest();
}
}
function srarchCity(obj){
var id;
type = obj;
var url;
if(obj=="sheng"){
id=document.getElementById("sheng").value;
url = "searchCity.do?doType=searchCity&searchType=shi&id="+id;
}
if(obj=="shi"){
id=document.getElementById("shi").value;
url = "searchCity.do?doType=searchCity&searchType=xian&id="+id;
}
xmlHttpRequest = createXmlHttpRequest();
xmlHttpRequest.onreadystatechange = xianshipass;
xmlHttpRequest.open("GET",url,true);
xmlHttpRequest.send(null);
}
function xianshipass(){
if(xmlHttpRequest.readyState==4 && xmlHttpRequest.status == 200){
updateMenu();
}
}
function updateMenu(){
var select;
if(type=="sheng"){
select = document.getElementById("shi");
}
if(type=="shi"){
select = document.getElementById("xian");
}
select.options.length=0;
var options = xmlHttpRequest.responseXML.getElementsByTagName("domain");
alert(options.length);
var option;
for (var i = 0, n = options.length; i < n; i++) {
select.appendChild(createElementWithValue(options[i]));
}
}
function createElementWithValue(text) {
var element = document.createElement("option");
element.setAttribute("value", text.getAttribute("id"));
var text = document.createTextNode(text.firstChild.nodeValue);
element.appendChild(text);
return element;
}
</script>
关于select添加<option>元素时，出现[Exception... "Not enough arguments [nsIDOMHTMLSelectElement.add]" nsresult: "0x80570001 (NS_ERROR_XPC_NOT_ENOUGH_ARGS)" lo错误
opt=document.createElement("OPTION");
opt.value=subArray[1];
opt.text=subArray[2];
document.getElementByIdx("xxx").add(opt);
这样写不符合w3c标准。
所以
document.getElementByIdx("xxx").options.add(opt);
这样写，就正常了。
sheng(省份)：id, uname; shi(市)：id,uname,shengId; xian(县)：id,uname,xianId;
2，新建项目：menuDemo，并添加struts和hibernate引用。
3，创建各个表的dao层方法，返回为List集合，该部分省略。
4，创建MenuAction，继承DispatchAction;
package web.action;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.Iterator;
import java.util.List;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.struts.action.ActionForm;
import org.apache.struts.action.ActionForward;
import org.apache.struts.action.ActionMapping;
import org.apache.struts.actions.DispatchAction;
import dao.ShengDao;
import dao.ShiDao;
import dao.XianDao;
import entity.Shi;
import entity.Xian;
public class MenuAction extends DispatchAction {
public ActionForward searchCity(ActionMapping mapping, ActionForm form,
HttpServletRequest request, HttpServletResponse response)
throws Exception {
int id = Integer.parseInt(request.getParameter("id"));
System.out.println(id);
String searchType = request.getParameter("searchType");
//必须有这句话，负责页面不能解析xml文件
StringBuffer responseXML = new StringBuffer("<?xml version=\"1.0\" encoding=\"UTF-8\"?>");
responseXML.append("<domains>");
if(searchType.equals("shi")){
ShiDao shiDao = new ShiDao();
List list = shiDao.getShi(id);
Iterator it = list.iterator();
while(it.hasNext()){
Shi shi = (Shi)it.next();
responseXML.append("<domain");
responseXML.append(" id='" + shi.getId());
responseXML.append("'>");
responseXML.append(shi.getUname());
responseXML.append("</domain>");
}
}
if(searchType.equals("xian")){
XianDao xianDao = new XianDao();
List list = xianDao.getXian(id);
Iterator it = list.iterator();
while(it.hasNext()){
Xian xian = (Xian)it.next();
responseXML.append("<domain");
responseXML.append(" id='" + xian.getId());
responseXML.append("'>");
responseXML.append(xian.getUname());
responseXML.append("</domain>");
}
}
responseXML.append("</domains>");
response.setContentType("text/xml; charset=UTF-8");
response.setHeader("Cache-Control", "no-cache");
try {
PrintWriter out = (PrintWriter) response.getWriter();
out.write(responseXML.toString());
System.out.println(responseXML.toString());
// out.flush();
} catch (IOException e) {
// do nothing
e.printStackTrace();
}
//返回空值，忽略struts-config.xml配置中的结果页
return null;
}
public ActionForward showSheng(ActionMapping mapping, ActionForm form,
HttpServletRequest request, HttpServletResponse response)
throws Exception {
ShengDao shengDao = new ShengDao();
List list = shengDao.getSheng();
System.out.println(list.size());
request.setAttribute("shengs", list);
return mapping.findForward("showSheng");
}
}
1，struts-config.xml文件配置如下：
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE struts-config PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 1.2//EN" "http://struts.apache.org/dtds/struts-config_1_2.dtd">
<struts-config>
<data-sources />
<form-beans>
<form-bean name="shengForm" type="web.form.ShengForm"></form-bean>
</form-beans>
<global-exceptions />
<global-forwards />
<action-mappings>
<action path="/searchCity" type="web.action.MenuAction" scope="request" parameter="doType"></action>
<action path="/showSheng" type="web.action.MenuAction" scope="request" parameter="doType">
<forward name="showSheng" path="/index.jsp"></forward>
</action>
</action-mappings>
<message-resources parameter="web.ApplicationResources" />
</struts-config>
2，html代码如下：
<body>
<form action="addPersonal.do" method="post">
省:<select id="sheng" name="sheng" onchange="srarchCity('sheng')"> <%
List list = (List)request.getAttribute("shengs");
for(int i=0; i < list.size(); i++){
Sheng sheng =(Sheng)list.get(i);
%>
<option value="<%=sheng.getId() %>"><%=sheng.getUname() %></option>
<%
}
%>
</select><br>
市：<select id="shi" name="shi" onchange="srarchCity('shi')"></select><br>
县：<select id="xian" name="xian"></select>
</form>
</body>
1，html页面的javascript代码如下：
<script type="text/javascript">
var xmlHttpRequest;
var type;
function createXmlHttpRequest(){
if(window.ActiveXObject){
return new ActiveXObject("Microsoft.XMLHTTP");
}else if(window.XMLHttpRequest){
return new XMLHttpRequest();
}
}
function srarchCity(obj){
var id;
type = obj;
var url;
if(obj=="sheng"){
id=document.getElementById("sheng").value;
url = "searchCity.do?doType=searchCity&searchType=shi&id="+id;
}
if(obj=="shi"){
id=document.getElementById("shi").value;
url = "searchCity.do?doType=searchCity&searchType=xian&id="+id;
}
xmlHttpRequest = createXmlHttpRequest();
xmlHttpRequest.onreadystatechange = xianshipass;
xmlHttpRequest.open("GET",url,true);
xmlHttpRequest.send(null);
}
function xianshipass(){
if(xmlHttpRequest.readyState==4 && xmlHttpRequest.status == 200){
updateMenu();
}
}
function updateMenu(){
var select;
if(type=="sheng"){
select = document.getElementById("shi");
}
if(type=="shi"){
select = document.getElementById("xian");
}
select.options.length=0;
var options = xmlHttpRequest.responseXML.getElementsByTagName("domain");
alert(options.length);
var option;
for (var i = 0, n = options.length; i < n; i++) {
select.appendChild(createElementWithValue(options[i]));
}
}
function createElementWithValue(text) {
var element = document.createElement("option");
element.setAttribute("value", text.getAttribute("id"));
var text = document.createTextNode(text.firstChild.nodeValue);
element.appendChild(text);
return element;
}
</script>
关于select添加<option>元素时，出现[Exception... "Not enough arguments [nsIDOMHTMLSelectElement.add]" nsresult: "0x80570001 (NS_ERROR_XPC_NOT_ENOUGH_ARGS)" lo错误
opt=document.createElement("OPTION");
opt.value=subArray[1];
opt.text=subArray[2];
document.getElementByIdx("xxx").add(opt);
这样写不符合w3c标准。
所以
document.getElementByIdx("xxx").options.add(opt);
这样写，就正常了。