Ajax案例-基于XML，以POST方式，完成省份-城市二级下拉联动

<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><title>基于XML，以POST方式，完成省份-城市二级下拉联动</title><script type="text/javascript" src="js/ajax.js"></script></head><body><select id="provinceID" style="width:111px"><option>选择省份</option><option>湖南</option><option>广东</option></select>    &nbsp;&nbsp;&nbsp;<select id="cityID" style="width:111px"><option>选择城市</option></select>    <script type="text/javascript">//定位省份下拉框，同时添加内容改变事件
        document.getElementById("provinceID").onchange = function(){//清空城市下拉框中的内容，除第一项外var cityElement = document.getElementById("cityID");cityElement.options.length = 1;//获取选中option标签的索引号，从0开始            var index = this.selectedIndex;     //定位选中的option标签var optionElement = this[index];//获取选中的option标签中的内容，即省份var province = optionElement.innerHTML;//如果选中的内容不是"选择省份"if("选择省份" != province){//NO1)var ajax = createAJAX();//NO2)var method = "POST";var url = "${pageContext.request.contextPath}/ProvinceCityServlet?time="+new Date().getTime();ajax.open(method,url);//设置AJAX请求头
                ajax.setRequestHeader("content-type","application/x-www-form-urlencoded");//NO3)var content = "province=" + province;ajax.send(content);//---------------------------------等待//NO4)
                ajax.onreadystatechange = function(){if(ajax.readyState == 4){if(ajax.status == 200){//NO5)从AJAX异步对象中获取服务器响应的xml文档var xmlDocument = ajax.responseXML;//NO6)按照DOM规则，解析XML文档var cityElementArray = xmlDocument.getElementsByTagName("city");    var size = cityElementArray.length;for(var i=0;i<size;i++){//innerHTML只能用在html/jsp中，不能用在xml中var city = cityElementArray[i].firstChild.nodeValue;//<option></option>var optionElement = document.createElement("option");    //<option>广州</option>
                                optionElement.innerHTML = city;//<select><option>广州</option></select>
                                cityElement.appendChild(optionElement);}}}}}}</script></body>
</html>

package loaderman.provincecity;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;/*** 基于XML，以POST方式，完成省份-城市二级下拉联动* @author AdminTC*/
public class ProvinceCityServlet extends HttpServlet {public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {request.setCharacterEncoding("UTF-8");String province = request.getParameter("province");//通知AJAX异步对象，服务器响应的数据为xml格式的response.setContentType("text/xml;charset=UTF-8");//获取字符输出流PrintWriter pw = response.getWriter();pw.write("<?xml version='1.0' encoding='UTF-8'?>");pw.write("<root>");if("广东".equals(province)){pw.write("<city>广州</city>");pw.write("<city>深圳</city>");pw.write("<city>中山</city>");}else if("湖南".equals(province)){pw.write("<city>长沙</city>");pw.write("<city>株洲</city>");pw.write("<city>湘潭</city>");pw.write("<city>岳阳</city>");}pw.write("</root>");pw.flush();pw.close();}
}

转载于:https://www.cnblogs.com/loaderman/p/10044107.html

Ajax案例-基于XML，以POST方式，完成省份-城市二级下拉联动相关推荐

菜鸟学Java（七）——Ajax+Servlet实现无刷新下拉联动
下拉联动的功能可以说非常的常用,例如在选择省.市等信息的时候:或者在选择大类.小类的时候.总之,下拉联动很常用.今天就跟大家分享一个简单的二级下拉联动的功能. 大类下拉框:页面加载的时候就初始化大类的 ...
基于WPS实现Excel表的二级下拉选择框
基于WPS实现Excel表的二级下拉选择框第一步:先在sheet2上创建源数据第二步:创建一级下拉框第三步:创建二级下拉框报错记录: "列表源"XXXXXX 第一步:先在s ...
事件+综合案例（卧龙首页+省份城市二级关联）
一. 事件 1.鼠标事件 1.1表单onsubmit事件作用:当表单的内容不符合要求的时候,阻止表单提交,在实际应用中,会给用户提示代码演示: <!DOCTYPE html> < ...
事件、卧龙首页案例及省份城市二级关联
一.事件 1.鼠标事件 1.1表单onsubmit事件作用:当表单的内容不符合要求的时候,阻止表单提交,在实际应用中,会给用户提示代码演示: <!DOCTYPE html> <h ...
layui结合ajax实现下拉联动效果
大家好好,我是雄雄,欢迎关注公众号:雄雄的小课堂. 昨天分享的是使用layui集合springboot实现图片上传,文章地址在这里,需要的小伙伴们可以去看看: 今天给大家分享的内容也是那天在造项目的时 ...
基于 vue +better scroll滑动切换页面并支持下拉刷新案例
也是公司项目 ,内部app的资讯模块整改,改是不可能改的,之前还是用jquery.感觉越改越混乱,还是重做.就仿着今日头条.等资讯页面做了一个dome,话不多说,先看效果! 微信扫码预览效果看完,感 ...
jquery ajax下拉联动,基于jQuery Ajax实现下拉框无刷新联动
本文实例为大家分享了jQuery Ajax实现下拉框无刷新联动的具体代码,供大家参考,具体内容如下 HTML代码: @{ Layout = null; } @using DAL; @using Sys ...
xml解析新浪新闻_客户端_下拉刷新
关于选择哪种xml库解析http://www.raywenderlich.com/553/how-to-chose-the-best-xml-parser-for-your-iphone-projec ...
jquery ajax下拉联动,jQuery Ajax MVC 下拉框联动
无刷新下拉框联动方法: Controllers代码 public JsonResult DH_Change(string DH_ID) { List TeamLeaderList = FinanceD ...

Ajax案例-基于XML，以POST方式，完成省份-城市二级下拉联动

Ajax案例-基于XML，以POST方式，完成省份-城市二级下拉联动相关推荐

最新文章

热门文章