通过AJAX实现三级下拉框查询省市等

最新推荐文章于 2018-11-12 21:47:00 发布

weixin_33872566

最新推荐文章于 2018-11-12 21:47:00 发布

阅读量112

点赞数

文章标签： java python javascript ViewUI

原文链接：https://my.oschina.net/u/219582/blog/59461

版权

2019独角兽企业重金招聘Python工程师标准>>>

1. 一个单独的测试界面:

[java] view plain copy

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'new.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css" mce_href="styles.css">
-->
<mce:script type="text/javascript" src="resources/jquery.js" mce_src="resources/jquery.js"></mce:script>
</head>
<body>
<select id="Select1" name="Select1" οnchange="selectProvince();"></select>
<select id="Select2" name="Select2" οnchange="selectArea();"></select>
<select id="Select3" name="Select3"></select>
</body>
</html>
<mce:script type="text/javascript"><!--
window.onload = function() {
initArea();
}
function initArea() {
/*获取，引用三个下拉框 */
var dropElement1=document.getElementById("Select1");
var dropElement2=document.getElementById("Select2");
var dropElement3=document.getElementById("Select3");
/*自定义一个方法把传进来的对象清除这里清除了三个下拉所有框的选项*/
removeDropDownList(dropElement1);
removeDropDownList(dropElement2);
removeDropDownList(dropElement3);
var pOption = document.createElement("option");
pOption.value = "0";
pOption.text = "全国";
dropElement1.add(pOption);
var cOption = document.createElement("option");
cOption.value = "0";
cOption.text = "全部市";
dropElement2.add(cOption);
var aOption = document.createElement("option");
aOption.value = "0";
aOption.text = "全区县";
dropElement3.add(aOption);
var url = "servlet/XmlForAJAX";
url = encodeURI(encodeURI(url));
doAjax(url,null,null,dropElement1,dropElement2,dropElement3);
}
/**
* 当选择一个省的时候自动的添加该省下的市
*/
function selectProvince() {
var dropElement1=document.getElementById("Select1");
//获取选中项的内容
var provinceName=dropElement1.options[dropElement1.selectedIndex].text;
var dropElement2=document.getElementById("Select2");
var dropElement3=document.getElementById("Select3");
removeDropDownList(dropElement2);
removeDropDownList(dropElement3);
var cOption = document.createElement("option");
cOption.value = "0";
cOption.text = "全部市";
dropElement2.add(cOption);
var aOption = document.createElement("option");
aOption.value = "0";
aOption.text = "全区县";
dropElement3.add(aOption);
var url = "servlet/XmlForAJAX";
url = encodeURI(encodeURI(url));
doAjax(url,provinceName,null,dropElement1,dropElement2,dropElement3);
}
/**
* 当选择一个省的时候自动的添加该省下的市
*/
function selectArea() {
var dropElement1=document.getElementById("Select1");
var provinceName=dropElement1.options[dropElement1.selectedIndex].text;
var dropElement2=document.getElementById("Select2");
var cityName=dropElement2.options[dropElement2.selectedIndex].text;
var dropElement3=document.getElementById("Select3");
removeDropDownList(dropElement3);
var aOption = document.createElement("option");
aOption.value = "0";
aOption.text = "全区县";
dropElement3.add(aOption);
var url = "servlet/XmlForAJAX";
url = encodeURI(encodeURI(url));
doAjax(url,provinceName,cityName,dropElement1,dropElement2,dropElement3);
}
//AJAX操作类
function doAjax(url,provinceName,cityName,dropElement1,dropElement2,dropElement3) {
$.ajax({
type:"POST",
secureuri:false,
dataType:"xml",
url: url,
timeout:1000,
success:function(xml) {
$(xml).find("province").each(function(i){
var province = $(this).attr("name");
//alert(province);
if(provinceName == null || provinceName == "") {
var pOption = document.createElement("option");
pOption.value = province;
pOption.text = province;
dropElement1.add(pOption);
}
if(provinceName != null && provinceName != "") {
if(provinceName == province) {
$(this).find("city").each(function(j){
var city = $(this).attr("name");
//alert("city is " + city);
if(cityName == null || cityName == "") {
var pOption = document.createElement("option");
pOption.value = city;
pOption.text = city;
dropElement2.add(pOption);
}
if(cityName != null && cityName != null) {
if(cityName == city) {
$(this).find("area").each(function(k){
var area = $(this).attr("name");
//alert("area is " + area);
var pOption = document.createElement("option");
pOption.value = area;
pOption.text = area;
dropElement3.add(pOption);
});
}
}
});
}
}
});
},
error:function(xml) {
alert("error.");
}
});
}
/* 清除下拉框的选项 */
function removeDropDownList(obj) {
//如果obj不为空的时候
if(obj) {
var length = obj.options.length;
if(length > 0) {
for(var i=length;i >= 0;i--) {
obj.remove(i);
}
}
}
}
// --></mce:script>

2. servlet

[java] view plain copy

package service;
import java.io.ByteArrayOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import upload.FileOperation;
public class XmlForAJAX extends HttpServlet {
/**
* Constructor of the object.
*/
public XmlForAJAX() {
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 {
response.setContentType("text/html");
PrintWriter out = response.getWriter();
out
.println("<!DOCTYPE HTML PUBLIC /"-//W3C//DTD HTML 4.01 Transitional//EN/">");
out.println("<HTML>");
out.println(" <HEAD><TITLE>A Servlet</TITLE></HEAD>");
out.println(" <BODY>");
out.print(" This is ");
out.print(this.getClass());
out.println(", using the GET method");
out.println(" </BODY>");
out.println("</HTML>");
out.flush();
out.close();
}
/**
* 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.setHeader("Content-Type","text/xml; charset=UTF-8");
PrintWriter out = response.getWriter();
FileOperation f = new FileOperation();
String str = "";
try {
InputStream in = f.getResourceAsStream("service/area.xml");
/* if(in != null) {
System.out.println("不是空的");
} else {
System.out.println("是空的。");
}*/
int i = -1;
ByteArrayOutputStream bis = new ByteArrayOutputStream();
while((i = in.read()) != -1) {
bis.write(i);
}
//System.out.println(bis.toString("UTF-8"));
out.print(bis.toString("UTF-8"));
} catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
/* StringBuffer bf = new StringBuffer();
bf.append("<?xml version=/"1.0/" encoding=/"UTF-8/"?>")
.append("<stulist>").append("<student email=/"1@1.com/">").append("<name>zhangsan</name>").append("<id>1</id>")
.append("</student>").append("<student email=/"2@2.com/">").append("<name>lisi</name>").append("<id>2</id>")
.append("</student>").append("</stulist>");
System.out.println(bf.toString());
out.print(bf.toString());*/
out.flush();
out.close();
}
/**
* Initialization of the servlet. <br>
*
* @throws ServletException if an error occurs
*/
public void init() throws ServletException {
// Put your code here
}
}