溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關使用Ajax怎么實現一個動態加載組合框，文章內容質量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關知識有一定的了解。
一 province.jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<html>
<head>
<script type="text/javascript" language="javaScript">
var xmlHttp = false; //全局變量，用于記錄XMLHttpRequest對象
function createXMLHttpRequest() {
if(window.ActiveXObject) { //Internet Explorer時，創建XMLHttpRequest對象的方法
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch(e) {
try { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
//舊版本的Internet Explorer，創建XMLHttpRequest對象
} catch(e) {
window.alert("創建XMLHttpRequest對象錯誤"+e);
}
}
} else if(window.XMLHttpRequest) { //mozilla時，創建XMLHttpRequest對象的方法
xmlHttp = new XMLHttpRequest();
}
if(!(xmlHttp)) { //未成功創建XMLHttpRequest對象
window.alert("創建XMLHttpRequest對象異常！");
}
}
//下拉列表項改變時的操作
function proChange(objVal) {
createXMLHttpRequest(); //創建XMLHttpRequest對象
document.getElementById("city").length = 1; //根據ID獲取指定元素，并賦值
xmlHttp.onreadystatechange = cityList; //指定onreadystatechange處理函數
var url="CityByXMLServlet?province="+objVal; //請求的URL地址
xmlHttp.open("POST",url,true);
xmlHttp.send(null);
}
function cityList() { //onreadystatechange的處理函數
if(xmlHttp.readyState==4) {
if(xmlHttp.status==200) {
parseXML(xmlHttp.responseXML); //解析服務器返回的XML數據
}
}
}
//解析xml信息，以添加地市
function parseXML(xmlDoc) {
var len = xmlDoc.getElementsByTagName("city");
//獲取XML數據中所有的“city”元素對象集合
var _citySel = document.getElementById("city"); //根據ID獲取頁面中的select元素
for(var i=0;i<len.length;i++) { //遍歷XML數據并給select元素添加選項
var opt = document.createElement("OPTION"); //創建option對象
opt.text = xmlDoc.getElementsByTagName("city")[i].firstChild.data;
//指定新創建元素的text屬性值
opt.value = xmlDoc.getElementsByTagName("city")[i].firstChild.data;
//指定新創建元素的value屬性值
_citySel.add(opt); //為select元素添加option
}
}
</script>
<title>動態加載組合框</title>
</head>
<body>
<table align="center" border=1 width="320">
<tr>
<td>省份：</td>
<td>
<select id="province" onChange="proChange(this.value);" >
<option value="gd">廣東</option>
<option value="gx">廣西</option>
<option value="hn">湖南</option>
<option value="hb">湖北</option>
<option value="ah">安徽</option>
</select>
</td>
</tr>
<tr>
<td>城市：</td>
<td>
<select id="city" >
<option value="">--請選擇--</option>
</select>
</td>
</tr>
</table>
</body>
</html>二、CityByXMLServlet.java
package servlet;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.*;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
* Servlet implementation class CityByXMLServlet
*/
@WebServlet("/CityByXMLServlet")
public class CityByXMLServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
private static final String CONTENT_TYPE = "text/xml; charset=UTF-8";
/**
* @see HttpServlet#HttpServlet()
*/
public CityByXMLServlet() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType(CONTENT_TYPE); //設置服務器響應類型
String province =request.getParameter("province");
StringBuffer city = new StringBuffer("<citys>"); //記錄返回XML串的對象
if("gx".equals(province)){
List list=cityInit(); //獲取城市列表
for(int i=0;i<list.size();i++){
city.append("<city>"+list.get(i)+"</city>");
}
}else if("hn".equals(province)){
List list = cityInit1(); //獲取城市列表
for(int j=0;j<list.size();j++){
city.append("<city>"+list.get(j)+"</city>");
}
}else if("hb".equals(province)){
List list = cityInit2(); //獲取城市列表
for(int j=0;j<list.size();j++){
city.append("<city>"+list.get(j)+"</city>");
}
}
city.append("</citys>");
PrintWriter out = response.getWriter();
out.println(city.toString());
out.flush(); //輸出流刷新
out.close(); //關閉輸出流
}
/*
* 初始化城市
*/
public List<String> cityInit2() {
List<String> cityList = new ArrayList<String>();
//添加城市列表
cityList.add("武漢");
cityList.add("襄陽");
cityList.add("黃岡");
cityList.add("荊門");
cityList.add("十堰");
cityList.add("黃石");
return cityList;
}
public List<String> cityInit(){
List<String> cityList = new ArrayList<String>();
//添加城市列表
cityList.add("南寧");
cityList.add("桂林");
cityList.add("北海");
cityList.add("河池");
cityList.add("梧州");
cityList.add("玉林");
return cityList;
}
public List<String> cityInit1() {
List<String> cityList = new ArrayList<String>();
//添加城市列表
cityList.add("長沙");
cityList.add("湘潭");
cityList.add("岳陽");
cityList.add("常德");
cityList.add("衡陽");
cityList.add("邵陽");
return cityList;
}
/**
*當前Servelt的初始化方法. <br>
*
* @throws ServletException發生ServletExceptio時拋出
*/
public void init() throws ServletException {
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
}三 web.xml
<?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:web="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd http://xmlns.jcp.org/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" version="2.4"> <servlet> <servlet-name>CityByXMLServlet</servlet-name> <servlet-class>servlet.CityByXMLServlet</servlet-class><!--類的位置 --> </servlet> <servlet-mapping> <servlet-name>CityByXMLServlet</servlet-name><!--你創建的類名 --> <url-pattern>/CityByXMLServlet</url-pattern> </servlet-mapping>
關于使用Ajax怎么實現一個動態加載組合框就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
