您的位置：首页 > 其它

Ajax 三级联动，处理xml格式数据

2014-08-20 21:03 218 查看
前台
<script type="text/javascript">
var xmlHttp;
function createXMLHttpRequest(){
if(window.XMLHttpRequest){
xmlHttp = new XMLHttpRequest();
}else if(window.ActiveXObject){
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
}
function refreshModelList(){
var modelYear = document.getElementById("modelYear").value;
var make = document.getElementById("make").value;
if(modelYear == "" || make == ""){
clearModelList();
return;
}
//创建XMLHttpRequest对象
createXMLHttpRequest();
var url = "<%=request.getContextPath()%>/servlet/RefreshModelListServlet?"+createQueryString(modelYear,make);
xmlHttp.onreadystatechange = handleStateChange;
xmlHttp.open("get",url,true);
xmlHttp.send();
}
function handleStateChange(){
if(xmlHttp.readyState == 4){
if(xmlHttp.status == 200){
updateModelList();
}
}
}
function updateModelList(){
//首先清除ModelList列表框
clearModelList();
var models = document.getElementById("models");
var results = xmlHttp.responseXML.getElementsByTagName("model");
var option = null;
for(var i = 0; i < results.length; i++){
option = document.createElement("option");
option.appendChild(document.createTextNode(results[i].firstChild.nodeValue));
models.appendChild(option);
}
}
function createQueryString(modelYear,make){
return "modelYear="+modelYear+"&make="+make+"&ts="+(new Date().getTime());
}
function clearModelList(){
var models = document.getElementById("models");
while(models.length > 0){
models.removeChild(models.childNodes[0]);
}
}

</script>
</head>
<body>
<h1>Select Model Year and Make</h1>
<span style="font-weight: bold;">Model Year:</span>
<select id="modelYear" onchange="refreshModelList()">
<option value="">Select One</option>
<option value="2006">2006</option>
<option value="1995">1995</option>
<option value="1985">1985</option>
<option value="1970">1970</option>
</select>
<br /> <br />
<span style="font-weight: bold;">Make:</span>
<select id="make" onchange="refreshModelList()">
<option value="">Select One</option>
<option value="Chevrolet">Chevrolet</option>
<option value="Dodge">Dodge</option>
<option value="Pontiac">Pontiac</option>
</select>
<br /> <br />
<span style="font-weight: bold;">Models:</span>
<br />
<select id="models" size="6" style="width: 300ps">
<option value="">Models are Expty.</option>
</select>
</body>

后台

public class RefreshModelListServlet extends HttpServlet {

private static List<MakeModelYear> availableModels = new ArrayList<MakeModelYear>();

public void init() throws ServletException {
availableModels.add(new MakeModelYear(2006, "Dodge", "Charger"));
availableModels.add(new MakeModelYear(2006, "Dodge", "Magnum"));
availableModels.add(new MakeModelYear(2006, "Dodge", "Ram"));
availableModels.add(new MakeModelYear(2006, "Dodge", "Viper"));
availableModels.add(new MakeModelYear(1995, "Dodge", "Avenger"));
availableModels.add(new MakeModelYear(1995, "Dodge", "Intrepid"));
availableModels.add(new MakeModelYear(1995, "Dodge", "Neon"));
availableModels.add(new MakeModelYear(1995, "Dodge", "Spirit"));
availableModels.add(new MakeModelYear(1985, "Dodge", "Aries"));
availableModels.add(new MakeModelYear(1985, "Dodge", "Dayona"));
availableModels.add(new MakeModelYear(1985, "Dodge", "Diplomat"));
availableModels.add(new MakeModelYear(1985, "Dodge", "Omni"));
availableModels.add(new MakeModelYear(1970, "Dodge", "Challenger"));
availableModels.add(new MakeModelYear(1970, "Dodge", "Charger"));
availableModels.add(new MakeModelYear(1970, "Dodge", "Coronet"));
availableModels.add(new MakeModelYear(1970, "Dodge", "Dart"));

availableModels.add(new MakeModelYear(2006, "Chevrolet", "Colorado"));
availableModels.add(new MakeModelYear(2006, "Chevrolet", "Corvette"));
availableModels.add(new MakeModelYear(2006, "Chevrolet", "Equinox"));
availableModels.add(new MakeModelYear(2006, "Chevrolet", "Monte Carlo"));
availableModels.add(new MakeModelYear(1995, "Chevrolet", "Beretta"));
availableModels.add(new MakeModelYear(1995, "Chevrolet", "Camaro"));
availableModels.add(new MakeModelYear(1995, "Chevrolet", "Cavalier"));
availableModels.add(new MakeModelYear(1995, "Chevrolet", "Lumina"));
availableModels.add(new MakeModelYear(1985, "Chevrolet", "Cavalier"));
availableModels.add(new MakeModelYear(1985, "Chevrolet", "Chevette"));
availableModels.add(new MakeModelYear(1985, "Chevrolet", "Citation II"));
availableModels.add(new MakeModelYear(1985, "Chevrolet", "Bel Air"));
availableModels.add(new MakeModelYear(1970, "Chevrolet", "Caprice"));
availableModels.add(new MakeModelYear(1970, "Chevrolet", "Chevelle"));
availableModels.add(new MakeModelYear(1970, "Chevrolet", "Monte Carlo"));
availableModels.add(new MakeModelYear(1970, "Chevrolet", "Celebrity"));

availableModels.add(new MakeModelYear(2006, "Pontiac", "G6"));
availableModels.add(new MakeModelYear(2006, "Pontiac", "Grand Prix"));
availableModels.add(new MakeModelYear(2006, "Pontiac", "Solstice"));
availableModels.add(new MakeModelYear(2006, "Pontiac", "Vibe"));
availableModels.add(new MakeModelYear(1995, "Pontiac", "Bonneville"));
availableModels.add(new MakeModelYear(1995, "Pontiac", "Grand Am"));
availableModels.add(new MakeModelYear(1995, "Pontiac", "Grand Prix"));
availableModels.add(new MakeModelYear(1995, "Pontiac", "Firebird"));
availableModels.add(new MakeModelYear(1985, "Pontiac", "6000"));
availableModels.add(new MakeModelYear(1985, "Pontiac", "Fiero"));
availableModels.add(new MakeModelYear(1985, "Pontiac", "Grand Prix"));
availableModels.add(new MakeModelYear(1985, "Pontiac", "Parisienne"));
availableModels.add(new MakeModelYear(1970, "Pontiac", "Catalina"));
availableModels.add(new MakeModelYear(1970, "Pontiac", "GTO"));
availableModels.add(new MakeModelYear(1970, "Pontiac", "LeManas"));
availableModels.add(new MakeModelYear(1970, "Pontiac", "Temppest"));
}

public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {

response.setContentType("text/xml;charset=UTF-8");
PrintWriter out = response.getWriter();
int modelYear = Integer.parseInt(request.getParameter("modelYear"));
String make = request.getParameter("make");

StringBuffer results = new StringBuffer("<models>");
MakeModelYear availableModel = null;
Iterator<MakeModelYear> it = availableModels.iterator();
while(it.hasNext()){
availableModel = it.next();
if(availableModel.getModelYear() == modelYear && availableModel.getMake().equals(make)){
results.append("<model>");
results.append(availableModel.getModel());
results.append("</model>");
}
}
results.append("</models>");
out.println(results.toString());
out.close();
}

public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {

this.doGet(request, response);
}

}


内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航