j2ee之AJAX二级联动效果
作者:情似雨餘黏地絮 发布时间:2021-09-13 10:06:58
标签:j2ee,ajax,二级联动
本文实例为大家分享了AJAX二级联动效果的具体代码,供大家参考,具体内容如下
Ajax.js
var createAjax = function(){
var ajax = null;
try{
ajax = new ActiveXObject("microsoft.xmlhttp");
}catch(e1){
try{
ajax = new XMLHttpRequest();
}catch(e2){
alert("请换掉你的浏览器");
}
}
return ajax;
}
test3.xml
<%@ page language="Java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript" src="js/ajax.js"></script>
<base href="<%=basePath%>" rel="external nofollow" >
<title>??</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
</head>
<body>
<select id="province">
<option>请选择省份</option>
<option>江苏</option>
<option>江西</option>
</select>
<select id="city">
<option>请选择城市</option>
</select>
<script type="text/javascript">
document.getElementById("province").onchange = function(){
var cityElement = document.getElementById("city");
cityElement.options.length = 1;
/* 拿到第一个下拉框中选中的值 */
var index = this.selectedIndex;
var optionElement = this[index];
var optionValue = optionElement.innerHTML;
/* 把这个值发送给服务器 */
var ajax = createAjax();
var url = "${pageContext.request.contextPath }/SelectServlet?time="+new Date().getTime();
var method = "POST";
ajax.open(method , url);
ajax.setRequestHeader("content-type" , "application/x-www-form-urlencoded");
var content = "province=" + optionValue;
ajax.send(content);
/* -----接收相应的数据----- */
ajax.onreadystatechange = function(){
if(ajax.readyState == 4 && ajax.status == 200){
/* 拿到xml */
var xmlDocument = ajax.responseXML;
/* 用xml的解析方式拿到城市根据标签名称 */
var cityArray = xmlDocument.getElementsByTagName("cityOption");
for (var i = 0; i < cityArray.length; i++){
/* 用xml的解析方式拿到城市的值 */
var city = cityArray[i].firstChild.nodeValue;
var option = document.createElement("option");
option.innerHTML = city;
cityElement.appendChild(option);
}
}
}
}
</script>
</body>
</html>
SelectServlet.java
package com.newtouch.servlet;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
* Servlet implementation class SelectServlet
*/
@WebServlet("/SelectServlet")
public class SelectServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public SelectServlet() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse
* response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// TODO Auto-generated method stub
response.getWriter().append("Served at: ").append(request.getContextPath());
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse
* response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
// 这里是text/xml是把数据放到了xml中
response.setContentType("text/xml;charset=utf-8");
String province = request.getParameter("province");
response.getWriter().write("<?xml version='1.0' encoding='utf-8' ?>");
response.getWriter().write("<root>");
if ("江苏".equals(province)) {
response.getWriter().write("<cityOption>1</cityOption>");
response.getWriter().write("<cityOption>2</cityOption>");
response.getWriter().write("<cityOption>3</cityOption>");
response.getWriter().write("<cityOption>4</cityOption>");
} else if ("江西".equals(province)) {
response.getWriter().write("<cityOption>一</cityOption>");
response.getWriter().write("<cityOption>二</cityOption>");
response.getWriter().write("<cityOption>三</cityOption>");
response.getWriter().write("<cityOption>四</cityOption>");
}
response.getWriter().write("</root>");
}
}
来源:http://www.cnblogs.com/ShaoXin/p/7412467.html
0
投稿
猜你喜欢
- 首先,这两者是完全不同的概念,绝对不能混为一谈。1.什么是Java内存模型?Java内存模型是Java语言在多线程并 * 况下对于共享变量读写
- autoMapping和autoMappingBehavior的区别autoMappingBehaviormybatis核心配置文件中set
- Linux Hadoop 2.7.3 安装搭建Hadoop实现了一个分布式文件系统(Hadoop Distributed File Syst
- 简介使用配置类和注解代替web.xml和SpringMVC配置文件的功能在Servlet3.0环境中,容器会在类路径中查找实现javax.s
- instanceof 严格来说是Java中的一个双目运算符,用来测试一个对象是否为一个类的实例,用法为:boolean result = o
- 本文实例为大家分享了java微信公众号支付示例代码,供大家参考,具体内容如下开始之前,先准备好:appid、商家号、商户密匙。工具类:MD5
- 前言今天看代码看到有牵扯到弱引用的东西,就先稍微补一补Java的四种引用类型吧。Java为引用类型专门定义了一个类Reference,它是引
- Java语言中反射 * 接口的解释与演示Java在JDK1.3的时候引入了 * 机制、可以运用在框架编程与平台编程时候捕获事件、审核数据
- ObjectMapper 忽略字段大小写核心代码:ObjectMapper mapper = new ObjectMapper();mapp
- 现象说明maven的java项目,测试用例和main所在的源码文件均符合缺省写法和格式,但是在使用mvn clean sonar:sonar
- 背景Swagger 可以提供 API 操作的测试文档,本文记录 Swagger 使用过程中遇到的两个小问题:全局响应结果进行包装后导致 Sw
- @RequestBody出现400 Bad Request的问题今天与同事调试一个接口,发现后台使用@RequestBody老是获取不到数据
- 线程安全当多个线程访问某个类时,不管运行时环境采用何种调度方式或者这些进程将如何交替执行,并且在主调代码中不需要任何额外的同步或协调,这个类
- 引语:工作中有时候需要在普通的对象中去调用spring管理的对象,但是在普通的java对象直接使用@Autowired或者@Resource
- 本文实例为大家分享了Android仿新浪微博分页管理界面的具体代码,供大家参考,具体内容如下多个activity分页管理,为了方便获取上下文
- 引言:编写高效简洁的C语言代码,是许多软件工程师追求的目标。本文就工作中的一些体会和经验做相关的阐述,不对的地方请各位指教。第1招:以空间换
- 0 实验环境在Android Studio中进行有关代码的编写和界面效果展示。SQLite数据库的图形化工具SQLiteStudio下载网址
- 以前用序列化都是一些方法需要才实现的,后来业务需求要深拷贝才去研究。参阅了别人博客得出一些总结。序列化是为了把Java对象转化为字节序列(字
- 这篇文章主要介绍了SpringBoot跨域Access-Control-Allow-Origin实现解析,文中通过示例代码介绍的非常详细,对
- 问题描述在应用MyBatis时,使用对象关系映射,将对象和Aliase映射起来。在Mybatis的文档明确写出,如果你没有明确定义实体类的A