ajax的列表联动示例

1、输入域：

请选择省：

</select>

请选择市：

</select>

2、 JavaScript脚本：

var xmlHttp;

//创建XMLHttpRequest对象

function createXMLHttpRequest() {

if(window.ActiveXObject) {

xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

} else if (window.XMLHttpRequest) {

xmlHttp = new XMLHttpReuqest();

}

//选择下列列表中的值

function choose(obj) {

var province = obj.value;

createXMLHttpRequest();

xmlHttp.onreadystatechange = process;

xmlHttp.open("GET", "SelProvince?province=" + province);

xmlHttp.send(null);

}

//用来处理状态改变的函数

function process() {

//定义一个变量用于存放从服务器返回的响应结果

var result;

if(xmlHttp.readyState == 4) { //如果响应完成

if(xmlHttp.status == 200) { //如果返回成功

//取出服务器返回的XML中city标签的子结点

result = xmlHttp.responseXML.getElementsByTagName("city");

//先清除地市列表的现有内容

while(document.all.sel2.options.length > 0) {

document.all.sel2.removeChild(document.all.sel2.childNodes[0]);

}

//解析xml文件的数据，并更新到本地列表

for(var i=0; i<result.length; i++) {

var option = document.createElement("OPTION");

option.text = result[i].childNodes[0].childNodes[0].nodeValue;

option.value = result[i].childNodes[1].childNodes[0].nodeValue;

document.all.sel2.options.add(option);

}

3、 Servlet文件：（SelProvince.java文件中的doGet方法）

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

String province = request.getParameter("province");

response.setContentType("text/xml");

response.setCharacterEncoding("UTF-8");

PrintWriter out = response.getWriter();

out.println("<response>");

if("1".equals(province)) {//如果选择的是“湖南省”

out.println("<city>");

out.println("<cityname>长沙</cityname>");

out.println("<cityvalue>1</cityvalue>");

out.println("</city>");

out.println("<city>");

out.println("<cityname>常德</cityname>");

out.println("<cityvalue>2</cityvalue>");

out.println("</city>");

} else {

out.println("<city>");

out.println("<cityname>武汉</cityname>");

out.println("<cityvalue>1</cityvalue>");

out.println("</city>");

out.println("<city>");

out.println("<cityname>仙桃</cityname>");

out.println("<cityvalue>2</cityvalue>");

out.println("</city>");

}

out.println("</response>");

out.flush();

out.close();

}

4、 web.xml文件配置：

<servlet-name>SelProvince</servlet-name>

<servlet-class>com.solid.util.SelProvince</servlet-class>

</servlet>

<servlet-mapping>

<servlet-name>SelProvince</servlet-name>

<url-pattern>/SelProvince</url-pattern>

</servlet-mapping>

ajax的列表联动示例相关推荐

ajax怎样获得表头信息,layui.table动态获取表头和列表数据示例
layui.table动态获取表头和列表数据示例 2020年07月14日 | 萬仟网IT编程 | 我要评论 ```javascript//表格layui.use('table', function() ...
php js 二级联动_PHP+ajax实现二级联动菜单功能示例
本文实例讲述了PHP+ajax实现二级联动菜单功能.分享给大家供大家参考,具体如下: 如何实现二级联动工作原理二级联动在开发中是比较常见的一个技术点,它主要运用了JS的局部刷新技术ajax,不同于 ...
利用ajax实现二级联动下拉框6,Ajax实现二级联动菜单
本文实例为大家分享了Ajax二级联动菜单的具体代码,供大家参考,具体内容如下 index.jsp 二级菜单联动演示 var req; window.οnlοad=function() {//页面加载时 ...
jQuery Ajax： $.post请求示例
jQuery Ajax: $.post请求示例 leyangjun.html页面 <html> <head> <meta http-equiv="Content ...
ajax eval html,Ajax eval的应用示例
Ajax eval的使用示例 (1)eval基本语法: eval函数接收一个参数s,如果s不是字符串,则直接返回s.否则执行s语句.如果s语句执行结果是一个值,则返回此值,否则返回undefined. ...
php下拉列表二级联动,PHP+Ajax实现二级联动下拉菜单！
正文字体大小: 中 PHP+Ajax实现二级联动下拉菜单! (2009-12-05 01:11:39) 标签: 杂谈数据库 .................................... ...
ajax无刷新评论示例
下面就为大家带来一篇 ajax无刷新评论示例.学习还是有点帮助的,给大家做个参考吧. 这是留言板的界面,当用户点击提交留言的时候,自动提交到我的留言下面留言内容中为空,或者为灰色的"没有填 ...
html用ajax做三级联动,怎样使用JS+AJAX做出三级联动
这次给大家带来怎样使用JS+AJAX做出三级联动,使用JS+AJAX做出三级联动的注意事项有哪些,下面就是实战案例,一起来看一下. js 三级联动的实现代码如下所示: js原生ajax -请选择省/ ...
wxpython制作表格界面_Python wxPython库使用wx.ListBox创建列表框示例
本文实例讲述了Python wxPython库使用wx.ListBox创建列表框.分享给大家供大家参考,具体如下: 如何创建一个列表框? 列表框是提供给用户选择的另一机制.选项被放置在一个矩形的窗口中 ...

ajax的列表联动示例

ajax的列表联动示例相关推荐

最新文章

热门文章