ajax联动显示图片,ajax联动

1、编写html代码，引入ajax文件

选择省份

湖南

广东

选择城市

2、编写html处理代码

//定位省份下拉框，同时添加内容改变事件

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

//innerHTML只能用在html/jsp中，不能用在xml中

var city = cityElementArray[i].firstChild.nodeValue;

//

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

//广州

optionElement.innerHTML = city;

//广州

cityElement.appendChild(optionElement);

}

}

}

}

}

}

3、编写java处理代码

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("");

if("广东".equals(province)){

pw.write("广州");

pw.write("深圳");

pw.write("中山");

}else if("湖南".equals(province)){

pw.write("长沙");

pw.write("株洲");

pw.write("湘潭");

pw.write("岳阳");

}

pw.write("");

pw.flush();

pw.close();

}

省市区ajax联动

function setCity1(){ var areaId1 = $('#areaId1').val(); var cityId1 = $('#cityId1'); var cityOpt = $ ...

02-26C&num;三级省市区ajax联动控件&comma;利用UpdatePanel，以及页面取值

第一步:设置界面

Java基础——JSON

一.JSON定义 在百度百科中的解释:JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.它基于JavaScript的一个子集. JSON采用完全独立于语言的 ...

解决IE下select option不支持display none样式

万恶的IE,option竟然不支持display样式,想到的解决思路有二个: 1.ajax联动查询 2.jQuery的remove().after()方法 方法1的不好之处是初始页面,需要显示全部IP ...

Dwz手册的补充说明和常见问题

1.我如何在项目中使用dwz? 手册中有如下说明: 设计思路 第一次打开页面时载入界面到客户端, 之后和服务器的交互只是数据交互, 不占用界面相关的网络流量. 支持HTML扩展方式来调用DWZ组件. ...

DevExpress2011控件教程)编辑控件&lpar;comboBox&comma;AspxCheckBox&rpar; 范例1

DevExpress2011控件教程)编辑控件(comboBox,AspxCheckBox) 范例1 AspxCheckBox 是一个检查编辑控件去展示特殊条件是否关闭或者打开.它一般会展示Yes/N ...

ajax 多级联动 下拉框 Demo

写了ajax实现级联下拉框,考虑常用,并且级联个数随不同业务个数不同,于是就整理了一下,实现了 ajax + N级联动 下拉框的效果 效果图 HTML 代码

省级联动

jQuery Ajax MVC 下拉框联动

无刷新下拉框联动方法: Controllers代码 public JsonResult DH_Change(string DH_ID) { List Tea ...

Ajax省市区无刷新单表联动查询

方法一: 在很多时候都需要用到无刷新级联查询,本文将以省市区的级联查询作为例子.注:此为单表三级联动 环境:Vistual Studio 2015 .MSSQL 1.首先下载AjaxControlTo ...

随机推荐

Ubuntu 14&period;04 软件源服务器列表

http://wiki.ubuntu.com.cn/Template:14.04source 服务器列表 可将 http://cn.archive.ubuntu.com/ubuntu/ 替换为下列任意 ...

framework not found -fno-arc编译错误

由于我是刚接手的代码  然后我拿来运行根本就是运行不了的  然后需要在linker 那边删除点东西就可以了. 把下边的两个删除就可以了 关于other linker flags 的介绍 请参考http ...

Paint House II 解答

Question There are a row of n houses, each house can be painted with one of the k colors. The cost o ...

ActivityManager

android.app.ActivityManager 这个类主要用来管理全部设备上的Activities. 权限:android.permission.GET_TASKS 方法:| 返回类型     ...

jQuery来源学习笔记：扩展的实用功能

// 扩展的实用功能 jQuery.extend({ // http://www.w3school.com.cn/jquery/core_noconflict.asp // 释放$的 jQuery 控 ...

RHEL7对比RHEL6的主要变化

RHEL7和RHEL6的主要变化 RHEL7和RHEL6的主要变化   RHEL7 RHEL6 文件系统 XFS EXT4 内核版本 3.10.x-x系列 2.6.x-x系列 内核名称 Maipo S ...

maven 导包报错

作为初学者本应当是持之以恒的但是很长时间没有冒泡了这次冒个泡写maven项目的时候遇到了很多的bug,今天给大家分享一下解决的办法(常见的错误就是导不进来自己想要的包)要么就是导包报错以下是解决方法 ...

laravel 邮件配置

.env的配置 MAIL_DRIVER=smtpMAIL_HOST=smtp.163.comMAIL_PORT=465MAIL_USERNAME=你的163邮箱地址MAIL_PASSWORD=你的16 ...

关于table的td和ul元素li隔行变色的功能实现

table元素的td和ul元素li隔行变色的功能实现 利用css控制二者的样式轻松实现隔行换色: 例如:table的css样式控制: table tr td{   background-color:颜 ...

ASP&period;NET Core 2 学习笔记(三)中间件

之前ASP.NET中使用的HTTP Modules及HTTP Handlers,在ASP.NET Core中已不复存在,取而代之的是Middleware.Middleware除了简化了HTTP Mod ...