ajax.js:
var prjName="/projectName/";
var ajaxObj;
function createAjaxObject(){
try{return new ActiveXObject("Msxml2.XMLHTTP");}catch(e){};
try{return new ActiveXObject("Microsoft.XMLHTTP");}catch(e){};
try{return new XMLHttpRequest();}catch(e){};
alert("XmlHttpRequest not supported!");
return null;
}
function $(id){
return document.getElementById(id);
}
city.jsp核心代碼:
<fieldset><legend>添加城市</legend>
<table>
<tr>
<td>
<select name="countries" style="width:95px" onchange="changeCountry(this)">
<%
List<Country> counties = (List<Country>)request.getAttribute("countryLs");
out.print("<option value='0'>----請選擇----</option>");
if(counties!=null || counties.size()>0){
for (int i = 0; i < counties.size(); i++){
Country country = (Country)counties.get(i);
String cid = country.getId();
out.print("<option value="+ cid +">"+ country.getCountry() +"</option>");
}
}
%>
</select>
</td>
<td id="provincesTd">
<select name="provinces" style="width:95px" onchange="changeCountry(this)">
<%
List<Province> provinces = (List<Province>)request.getAttribute("provinceLs");
out.print("<option value='0'>----請選擇----</option>");
if(provinces!=null || provinces.size()>0){
for (int i = 0; i < provinces.size(); i++){
Province province = (Province)provinces.get(i);
String pid = province.getId();
out.print("<option value="+ pid +">"+ province.getProvince() +"</option>");
}
}
%>
</select>
</td>
<td>
<label>城市</label>
<input type="text" id="city" name="city" style="width: 200px; height: 25px" onfocus="changeProvince(this)" />
<input type="button" value="添加城市" style="width:80px; height: 25px" onclick="addCity()" />
</td>
</tr>
</table>
</fieldset>
changeCountry:
function changeCountry(obj){
//取得所選的國家
var countryId = $("countries").value;
if(countryId == 0){
alert("請選擇國家,如國家列表為空,請先添加國家,以便能準(zhǔn)確添加市級地區(qū)");
$("countries").focus();
return;
}
// 取得所選擇的省
else{
url="ChangeCountry?countryId=";
var countryId = $("countries").value;
url=url+countryId;
xmlHtpRq=ajaxObj=createAjaxObject();
xmlHtpRq.open("GET",url,true);
xmlHtpRq.setRequestHeader("Content-Type","text/html;charset=UTF-8");
xmlHtpRq.onreadystatechange =function(){OnStatusChange();}// 注冊回調(diào)函數(shù),接收服務(wù)器的響應(yīng)
xmlHtpRq.send();
}
}
OnStatusChange：
function OnStatusChange(){ //回調(diào)函數(shù),接收服務(wù)器的響應(yīng)()
if(ajaxObj.readyState==4){
if (xmlHtpRq.status==200){
var status = xmlHtpRq.responseXML.getElementsByTagName("status")[0].firstChild.data;
if( status == "ok"){
var subInnerHTML = xmlHtpRq.responseXML.getElementsByTagName("content")[0].xml;
//alert(subInnerHTML);
var classNameDiv = document.getElementById("provincesTd");
var provinces = document.getElementById("provinces");
document.getElementById("provincesTd").removeChild(provinces);
classNameDiv.innerHTML=subInnerHTML;
}
}
else//頁面不正常
alert(xmlHtpRq.status); // 輸出狀態(tài)碼
}
changeProvinces：
function changeProvinces(obj,myarray){
//取得省份數(shù)組
var arr = myarray;
var vform=obj.form;
// 取得省份下拉框并清除原有選項
var provinces=vform["provinces"];
provinces.length=0;
// 重新填充到省份下拉框
for(var i=0;i<arr.length;i++){
provinces[i+1]=new Option(arr[i],i);
}
}
ChangeCountryServlet：
package com.runsky.action;
import java.io.PrintWriter;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.runsky.domain.City;
import com.runsky.domain.Country;
import com.runsky.domain.Province;
import com.runsky.service.BaseService;
import com.runsky.util.StringFormatUtil;
/**
* 添加省份
*
* @author Ying-er
* @since 2010-1-14 下午03:34:36
* @version 1.00 Ying-er 創(chuàng)建 2010-1-14 下午03:34:36
*/
public class ChangeCountryServlet extends HttpServlet {
/**
*
*/
private static final long serialVersionUID = 1343432526456565L;
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, java.io.IOException {
// Setup Response
response.setContentType("text/xml;charset=UTF-8");
response.setHeader("Cache-Control", "no-cache");
response.setCharacterEncoding("UTF-8");
// 取得輸入?yún)?shù)
String countryId = StringFormatUtil
.getDecodeParamFromReq("countryId", request);
// System.out.println("------------------------------------------>"+str);
BaseService<Province> pService = new BaseService<Province>();
List<Province> provinceList = pService.getByField(Province.class, "countryId", countryId);
PrintWriter out = response.getWriter();
if(provinceList.size()<1 || provinceList == null){
out.println("<response>");
out.println("<status>ok</status>");
out.print("<content>");
out.print("<select name='provinces' id='provinces'>");
out.print("<option value='0'> -- 無數(shù)據(jù) -- </option>");
out.print("</select>");
out.print("</content>");
out.println("</response>");
}
else{
out.println("<response>");
out.println("<status>ok</status>");
out.print("<content>");
out.print("<select name='provinces' id='provinces'>");
out.print("<option value='0'> -- 請選擇 -- </option>");
for(Province province : provinceList){
out.print("<option value='" + province.getId() + "'>"
+ province.getProvince() + "</option>");
}
out.print("</select>");
out.print("</content>");
out.println("</response>");
}
}
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, java.io.IOException {
doPost(request, response);
}
}
posted on 2010-05-29 19:01
Ying-er 閱讀(508)
評論(1) 編輯 收藏