Heim >Backend-Entwicklung >PHP-Tutorial >Detaillierte Erläuterung der Ajax-Implementierung des dynamischen Ladens von Kombinationsfeldbeispielen
Detaillierte Erläuterung der Ajax-Implementierung des dynamischen Ladens von Kombinationsfeldbeispielen
- 小云云Original
- 2017-12-25 10:30:091338Durchsuche
Ich glaube, dass viele Freunde ein gewisses Verständnis für das dynamische Laden von Kombinationsfeldern haben. Dieser Artikel stellt das dynamische Laden von Kombinationsfeldern durch Ajax vor. Freunde, die daran interessiert sind, sollten einen Blick darauf werfen alle.
1 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);" style="width:85">
<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" style="width:85">
<option value="">--请选择--</option>
</select>
</td>
</tr>
</table>
</body>
</html>2. 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);
}
}drei 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>
Verwandte Empfehlungen:
Ausführliche Erläuterung der Verbesserung der JS-Methode zum dynamischen Laden von jquery getScript
Javascript-Simulation zur Implementierung von Ajax-Ladebox-Beispiel_Javascript-Kenntnissen
Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Ajax-Implementierung des dynamischen Ladens von Kombinationsfeldbeispielen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Beispiel einer von PHP WeChat Payment entwickelten WeChat-RückerstattungsfunktionNächster Artikel：Beispiel einer von PHP WeChat Payment entwickelten WeChat-Rückerstattungsfunktion
In Verbindung stehende Artikel
Mehr sehen- So verwenden Sie cURL zum Implementieren von Get- und Post-Anfragen in PHP
- So verwenden Sie cURL zum Implementieren von Get- und Post-Anfragen in PHP
- So verwenden Sie cURL zum Implementieren von Get- und Post-Anfragen in PHP
- So verwenden Sie cURL zum Implementieren von Get- und Post-Anfragen in PHP
- Alle Ausdruckssymbole in regulären Ausdrücken (Zusammenfassung)