修改后的JSP代码如下：
<%@ page language="java" contentType="text/html charset=UTF-8"pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html charset=UTF-8">
<link rel="stylesheet" type="text/css" href="CSS/css_style.css" />
<title>恒丰银行昆明分行外部评级机构管理系统</title>
</head>
<script>
var arr = new Array()
arr[0] = "昆明市,五华区,盘龙区,官渡区,西山区,东川区,呈贡县,晋宁县,富民县,宜良县,石林彝族自治县,嵩明县,禄劝彝族苗族自治县,寻甸回族彝族自治县,安宁市"
arr[1] = "曲靖市,麒麟区,马龙县,陆良县,师宗县,罗平县,富源县,会泽县,沾益县,宣威市"
arr[2] = "玉溪市,红塔区,江川县,澄江县,通海县,华宁县,易门县,峨山彝族自治县,新平彝族傣族自治县,元江哈尼族彝族傣族自治县"
arr[3] = "昭通市,昭阳区,鲁甸县,巧家县,盐津县,大关县,永善县,绥江县,镇雄县,彝良县,威信县,水富县"
arr[4] = "丽江市,隆阳区,施甸县,腾冲县,龙陵县,昌宁县"
arr[5] = "普洱市,古城区,玉龙纳西族自治县,永胜县,华坪县,宁蒗彝族自治县"
arr[6] = "临沧市,翠云区,普洱哈尼族彝族自治县,墨江哈尼族自治县,景东彝族自治县,景谷傣族彝族自治县,镇沅彝族哈尼族拉祜族自治县,江城哈尼族彝族自治县,孟连傣族拉祜族佤族自治县,澜沧拉祜族自治县,西盟佤族自治县"
arr[7] = "德宏市,临翔区,凤庆县,云县,永德县,镇康县,双江拉祜族佤族布朗族傣族自治县,耿马傣族佤族自治县,沧源佤族自治县"
arr[8] = "瑞丽市,潞西市,梁河县,盈江县,陇川县"
arr[9] = "泸水县,福贡县,贡山独龙族怒族自治县,兰坪白族普米族自治县"
arr[10] = "香格里拉县,德钦县,维西傈僳族自治县"
arr[11] = "大理市,漾濞彝族自治县,祥云县,宾川县,弥渡县,南涧彝族自治县,巍山彝族回族自治县,永平县,云龙县,洱源县,剑川县,鹤庆县"
arr[12] = "楚雄市,双柏县,牟定县,南华县,姚安县,大姚县,永仁县,元谋县,武定县,禄丰县"
arr[13] = "个旧市,开远市,蒙自县,屏边苗族自治县,建水县,石屏县,弥勒县,泸西县,元阳县,红河县,金平苗族瑶族傣族自治县,绿春县,河口瑶族自治县"
arr[14] = "文山县,砚山县,西畴县,麻栗坡县,马关县,丘北县,广南县,富宁县"
arr[15] = "景洪市,勐海县,勐腊县"
function init(index) {
var city = document.getElementById("city_" + index)
var cityArr = arr[0].split(",")
for (var i = 0 i < cityArr.length i++) {
city[i] = new Option(cityArr[i], cityArr[i])
}
}
function getCity(comp) {
//获得控件序号（1..*）
var index = comp.id.charAt(comp.id.length - 1)
var province = document.getElementById("province_" + index)
var city = document.getElementById("city_" + index)
var cityArr = arr[province.selectedIndex].split(",")
city.length = 0
//将城市数组中的值填充到城市下拉框中
for (var i = 0 i < cityArr.length i++) {
city[i] = new Option(cityArr[i], cityArr[i])
}
}
</script>
<script>
function displayResult(){
var table=document.getElementById("table-7")
var rows = table.rows.length
var currRow = rows - 1
var row = table.insertRow(currRow)
var cell1=row.insertCell(0)
var cell2=row.insertCell(1)
var index = currRow - 2
cell1.innerHTML="+抵押物"
cell2.innerHTML="抵押物证号：<input name='clot_no_" + index + "'><input type='button' value='+' onClick='displayResult()'><br/>"
+"抵押物归属地:"
+"<select id='province_" + index + "' size=1 onchange='getCity(this)'>"
+"<option value=0>昆明</option>"
+"<option value=1>曲靖</option>"
+"<option value=2>玉溪</option>"
+"<option value=3>昭通</option>"
+"<option value=4>保山</option>"
+"<option value=5>丽江</option>"
+"<option value=6>普洱</option>"
+"<option value=7>临沧</option>"
+"<option value=8>德宏</option>"
+"<option value=9>怒江</option>"
+"<option value=10>迪庆</option>"
+"<option value=11>大理</option>"
+"<option value=12>楚雄</option>"
+"<option value=13>红河</option>"
+"<option value=14>文山</option>"
+"<option value=15>版纳</option>"
+"</select>"
+"<select id='city_" + index + "' style='width: auto'></select><br/>"
+"抵押物地址：<input name='clotaddr" + index + "'>"
init(index)
}
</script>
<body onload="init(1)">
<div id="wrapper">
<header class="SiteHeader"> <img src="PIC/HF_LOGO.png"
alt="HFKM-KJB" style="width: 89px height: 34px"> </header>
<aside class="NavSidebar"> <nav>
<h2>当前用户</h2>
<ul>
<li>用户名：</li>
<li>角色：</li>
</ul>
</nav> <nav>
<h2>功能导航</h2>
<ul>
<%
String mana_type=session.getAttribute("mana_type").toString()
String menu=""
if (mana_type.equals("系统管理员")) {
menu="<li><a href=\"showOrg.do\">查看评估机构</a></li><li><a href=\"CreateOrg.jsp\">新增评估机构</a></li><li><a href=\"showPle_done.do\">查看已抽签抵押物</a></li><li><a href=\"showPle.do\">查看未抽签抵押物</a></li><li><a href=\"showPle.do\">抽签结果查看</a></li>"
} else
{
menu="<li><a href=\"showOrg.do\">查看评估机构</a></li><li><a href=\"showPle_done.do\">查看已抽签抵押物</a></li><li><a href=\"showPle.do\">查看未抽签抵押物</a></li><li><a href=\"CreatePle.jsp\">新增抵押物</a></li><li><a href=\"showPle.do\">抵押物抽签</a></li>"
}
%>
<%=menu%>
</ul>
</nav> <section>
<h2>系统设置</h2>
<ul>
<li><a href="">修改密码</a></li>
<li><a href="logout.do">退出登录</a></li>
</ul>
</section> <br />
<br />
<br />
<br />
</aside>
<main> <article class="Content"> <header
class="ArticleHeader"> </header>
<h3 align=center>新增业务信息</h3>
<br />
<form name="frmCrePle" action="CrePle.do">
<table border="1" id="table-7">
<tr>
<td>借款人名称</td>
<td><input name="loan_na"></td>
</tr>
<tr>
<td>借款人身份证号/统一社会信用代码</td>
<td><input name="loan_no"></td>
</tr>
<tr>
<td>抵押人名称</td>
<td><input name="plg_na"></td>
</tr>
<tr>
<td id="td_na_1">抵押物</td>
<td id="clot_no">
抵押物证号：<input name="clot_no_1"><input type="button" value="+" onClick="displayResult(this)"><br/>
抵押物归属地:
<select id="province_1" size=1 onchange="getCity(this)">
<option value=0>昆明</option>
<option value=1>曲靖</option>
<option value=2>玉溪</option>
<option value=3>昭通</option>
<option value=4>保山</option>
<option value=5>丽江</option>
<option value=6>普洱</option>
<option value=7>临沧</option>
<option value=8>德宏</option>
<option value=9>怒江</option>
<option value=10>迪庆</option>
<option value=11>大理</option>
<option value=12>楚雄</option>
<option value=13>红河</option>
<option value=14>文山</option>
<option value=15>版纳</option>
</select>
<select id="city_1" style="width: auto"></select><br/>
抵押物地址：<input name="clotaddr_1">
</td>
</tr>
<tr align="center">
<td colspan="2"><input type="submit" value="提交"></td>
</tr>
</table>
</form>
</article> </main>
<footer>
<p class="Disclaimer">
© 2017 恒丰银行昆明分行<br> Disign by KJB-TianSIR
</p>
</footer>
</div>
</body>
</html>
用AJAX基于Servlet的AJAX
这是一个很常见的UI，当用户在第一个选择框里选择ZHEJIANG时，第二个选择框要出现ZHEJIANG的城市；当用户在第一个选择框里选择JIANGSU时，第二个选择框里要出现JIANGSU的城市。
首先，我们来看配置文件web.xml，在里面配置一个servlet，跟往常一样：
<web-app version="2.4"
xmlns="http://java.sun.com/xml/ns/j2ee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee
http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
<servlet>
<servlet-name>SelectCityServlet</servlet-name>
<servlet-class>com.stephen.servlet.SelectCityServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>SelectCityServlet</servlet-name>
<url-pattern>/servlet/SelectCityServlet</url-pattern>
</servlet-mapping>
</web-app>
然后，来看我们的JSP文件：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>MyHtml.html</title>
<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">-->
</head>
<script type="text/javascript">
function getResult(stateVal) {
var url = "servlet/SelectCityServlet?state="+stateVal
if (window.XMLHttpRequest) {
req = new XMLHttpRequest()
}else if (window.ActiveXObject) {
req = new ActiveXObject("Microsoft.XMLHTTP")
}
if(req){
req.open("GET",url, true)
req.onreadystatechange = complete
req.send(null)
}
}
function complete(){
if (req.readyState == 4) {
if (req.status == 200) {
var city = req.responseXML.getElementsByTagName("city")
file://alert(city.length)
var str=new Array()
for(var i=0i<city.lengthi++){
str[i]=city[i].firstChild.data
}
file://alert(document.getElementById("city"))
buildSelect(str,document.getElementById("city"))
}
}
}
function buildSelect(str,sel) {
sel.options.length=0
for(var i=0i<str.lengthi++) {
sel.options[sel.options.length]=new Option(str[i],str[i])
}
}
</script>
<body>
<select name="state" onChange="getResult(this.value)">
<option value="">Select</option>>
<option value="zj">ZEHJIANG</option>>
<option value="zs">JIANGSU</option>>
</select>
<select id="city">
<option value="">CITY</option>
</select>
</body>
</html>
第一眼看来，跟我们平常的JSP没有两样。仔细一看，不同在JS里头。
我们首先来看第一个方法：getResult(stateVal)，在这个方法里，首先是取得XmlHttpRequest；然后设置该请求的url：req.open("GET",url, true)接着设置请求返回值的接收方法：req.onreadystatechange = complete该返回值的接收方法为——complete()最后是发送请求：req.send(null)
然后我们来看我们的返回值接收方法：complete()，这这个方法里，首先判断是否正确返回，如果正确返回，用DOM对返回的XML文件进行解析。关于DOM的使用，这里不再讲述，请大家参阅相关文档。得到city的值以后，再通过buildSelect(str,sel)方法赋值到相应的选择框里头去。
最后我们来看看Servlet文件：
import java.io.IOException
import java.io.PrintWriter
import javax.servlet.ServletException
import javax.servlet.http.HttpServlet
import javax.servlet.http.HttpServletRequest
import javax.servlet.http.HttpServletResponse
/**
* @author Administrator
*
* TODO To change the template for this generated type comment go to
* Window - Preferences - Java - Code Style - Code Templates
*/
public class SelectCityServlet extends HttpServlet {
public SelectCityServlet() {
super()
}
public void destroy() {
super.destroy()
}
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/xml")
response.setHeader("Cache-Control", "no-cache")
String state = request.getParameter("state")
StringBuffer sb=new StringBuffer("<state>")
if ("zj".equals(state)){
sb.append("<city>hangzhou</city><city>huzhou</city>")
} else if("zs".equals(state)){
sb.append("<city>nanjing</city><city>yangzhou</city><city>suzhou</city>")
}
sb.append("</state>")
PrintWriter out=response.getWriter()
out.write(sb.toString())
out.close()
}
}
这个类也十分简单，首先是从request里取得state参数，然后根据state参数生成相应的XML文件，最后将XML文件输出到PrintWriter对象里。
http://download.csdn.net/detail/liujian_01/4974474你看看这个吧，就是第一个变动触发onchange事件，获取对应的二级地区，上面是用ajax从数据库获取二级地区，然后把二级下拉option清空，往Select对象中加入获取到的二级地区
