java+AJAX省市级联
<%@ page language="java" import="java.util.*" pageEncoding="gb2312"%>
<jsp:directive.page import="com.demo.bean.ChinaStates"/>
<jsp:directive.page import="com.demo.conn.ConnDB"/>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript">
var xmlHttp;
//定义一个变量用于存放XMLHTTPREQUEST对象
var xmlHttp;
//该函数用于创建一个XMLHttpRequest对象
//该函数用于创建一个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();
//将状态触发器绑定到一个函数
xmlHttp.onreadystatechange = processor1;
//通过GET方法向指定的URL建立服务器的调用
xmlHttp.open("GET", "CityServlet?selected="+selected);
//发送请求
xmlHttp.send(null);
}
//处理从服务器返回的XML文档并更新地市下拉列表
function processor1() {
//定义一个变量用于存放从服务器返回的响应结果
var result;
if(xmlHttp.readyState == 4) { //如果响应完成
if(xmlHttp.status == 200) {//如果返回成功
//取出服务器返回的XML文档的所有city标签的子节点
result = xmlHttp.responseXML.getElementsByTagName("city");
//先清除地市列表的现有内容
while (document.all.slt2.options.length>0){
document.all.slt2.removeChild(document.all.slt2.childNodes[0]);
}
//解析XML中的数据并更新地市列表
for(var i=0;i<result.length;i++){
var option = document.createElement("OPTION");
option.text = result[i].childNodes[0].childNodes[0].nodeValue;//这就是取出<cityname>中的值
option.value = result[i].childNodes[1].childNodes[0].nodeValue;//这就是取出<cityvalue>中的值
document.all.slt2.options.add(option);//为地市列表中添加选项
}
}
}
}
</script>
<%
ArrayList chinastates=new ConnDB().getList("0001");
ChinaStates china=null;
%>
</head>
<body>
<form method="post" name="form1" action="">
<select id="slt1" onChange="updateSelect()">
<option>请选择省份:</option>
<%
for(int i=0;i<chinastates.size();i++)
{
china=(ChinaStates)chinastates.get(i);
%>
<option value="<%=china.getAreaCode()%>"><%=china.getAreaName() %></option>
<%
}
%>
</select> 省
<select id="slt2">
<option value="">请选择地市</option>
</select>
</form>
</body>
</html>
****************CityServlet******************
package com.demo.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.demo.bean.ChinaStates;
import com.demo.conn.ConnDB;
public class CityServlet extends HttpServlet {
/**
* Constructor of the object.
*/
public CityServlet() {
super();
}
/**
* Destruction of the servlet. <br>
*/
public void destroy() {
super.destroy(); // Just puts "destroy" string in log
// Put your code here
}
/**
* The doGet method of the servlet. <br>
*
* This method is called when a form has its tag value method equals to get.
*
* @param request the request send by the client to the server
* @param response the response send by the server to the client
* @throws ServletException if an error occurred
* @throws IOException if an error occurred
*/
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
this.doPost(request, response);
}
/**
* The doPost method of the servlet. <br>
*
* This method is called when a form has its tag value method equals to post.
*
* @param request the request send by the client to the server
* @param response the response send by the server to the client
* @throws ServletException if an error occurred
* @throws IOException if an error occurred
*/
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/xml");
response.setCharacterEncoding("UTF-8");
String selected = request.getParameter("selected");
PrintWriter out = response.getWriter();
ArrayList<ChinaStates> chinas=new ConnDB().getList(selected);
ChinaStates states=null;
//下面分别为两个省份创建地市
out.println("<response>");
for(int i=0;i<chinas.size();i++)
{
states=(ChinaStates)chinas.get(i);
out.print("<city>");
out.print("<cityname>"+states.getAreaName()+"</cityname>");
out.print("<cityvalue>"+states.getAreaCode()+"</cityvalue>");
out.print("</city>");
}
out.print("</response>");
}
/**
* Initialization of the servlet. <br>
*
* @throws ServletException if an error occure
*/
public void init() throws ServletException {
// Put your code here
}
}
<%@ page language="java" import="java.util.*" pageEncoding="gb2312"%>
<jsp:directive.page import="com.demo.bean.ChinaStates"/>
<jsp:directive.page import="com.demo.conn.ConnDB"/>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript">
var xmlHttp;
//定义一个变量用于存放XMLHTTPREQUEST对象
var xmlHttp;
//该函数用于创建一个XMLHttpRequest对象
//该函数用于创建一个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();
//将状态触发器绑定到一个函数
xmlHttp.onreadystatechange = processor1;
//通过GET方法向指定的URL建立服务器的调用
xmlHttp.open("GET", "CityServlet?selected="+selected);
//发送请求
xmlHttp.send(null);
}
//处理从服务器返回的XML文档并更新地市下拉列表
function processor1() {
//定义一个变量用于存放从服务器返回的响应结果
var result;
if(xmlHttp.readyState == 4) { //如果响应完成
if(xmlHttp.status == 200) {//如果返回成功
//取出服务器返回的XML文档的所有city标签的子节点
result = xmlHttp.responseXML.getElementsByTagName("city");
//先清除地市列表的现有内容
while (document.all.slt2.options.length>0){
document.all.slt2.removeChild(document.all.slt2.childNodes[0]);
}
//解析XML中的数据并更新地市列表
for(var i=0;i<result.length;i++){
var option = document.createElement("OPTION");
option.text = result[i].childNodes[0].childNodes[0].nodeValue;//这就是取出<cityname>中的值
option.value = result[i].childNodes[1].childNodes[0].nodeValue;//这就是取出<cityvalue>中的值
document.all.slt2.options.add(option);//为地市列表中添加选项
}
}
}
}
</script>
<%
ArrayList chinastates=new ConnDB().getList("0001");
ChinaStates china=null;
%>
</head>
<body>
<form method="post" name="form1" action="">
<select id="slt1" onChange="updateSelect()">
<option>请选择省份:</option>
<%
for(int i=0;i<chinastates.size();i++)
{
china=(ChinaStates)chinastates.get(i);
%>
<option value="<%=china.getAreaCode()%>"><%=china.getAreaName() %></option>
<%
}
%>
</select> 省
<select id="slt2">
<option value="">请选择地市</option>
</select>
</form>
</body>
</html>
****************CityServlet******************
package com.demo.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.demo.bean.ChinaStates;
import com.demo.conn.ConnDB;
public class CityServlet extends HttpServlet {
/**
* Constructor of the object.
*/
public CityServlet() {
super();
}
/**
* Destruction of the servlet. <br>
*/
public void destroy() {
super.destroy(); // Just puts "destroy" string in log
// Put your code here
}
/**
* The doGet method of the servlet. <br>
*
* This method is called when a form has its tag value method equals to get.
*
* @param request the request send by the client to the server
* @param response the response send by the server to the client
* @throws ServletException if an error occurred
* @throws IOException if an error occurred
*/
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
this.doPost(request, response);
}
/**
* The doPost method of the servlet. <br>
*
* This method is called when a form has its tag value method equals to post.
*
* @param request the request send by the client to the server
* @param response the response send by the server to the client
* @throws ServletException if an error occurred
* @throws IOException if an error occurred
*/
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/xml");
response.setCharacterEncoding("UTF-8");
String selected = request.getParameter("selected");
PrintWriter out = response.getWriter();
ArrayList<ChinaStates> chinas=new ConnDB().getList(selected);
ChinaStates states=null;
//下面分别为两个省份创建地市
out.println("<response>");
for(int i=0;i<chinas.size();i++)
{
states=(ChinaStates)chinas.get(i);
out.print("<city>");
out.print("<cityname>"+states.getAreaName()+"</cityname>");
out.print("<cityvalue>"+states.getAreaCode()+"</cityvalue>");
out.print("</city>");
}
out.print("</response>");
}
/**
* Initialization of the servlet. <br>
*
* @throws ServletException if an error occure
*/
public void init() throws ServletException {
// Put your code here
}
}
192
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
