j2ee之AJAX二级联动效果
时间:2019-03-31
本文章向大家介绍j2ee之AJAX二级联动效果,主要包括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>"); } }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- haproxy 新手上路
- 区块链是如何保护交易隐私的?eprint这篇论文告诉你答案
- gradle项目中资源文件的相对路径打包处理技巧
- Markdown 语法手册 (完整整理版)
- WordPress3.5安装出现的几个问题
- java并发编程学习: 原子变量(CAS)
- gradle项目中如何支持java与scala混合使用?
- 开始使用Linux
- .Net魔法堂:开启IIS的WebGarden、WebFarm和StateServer之旅
- java中的tuple实现
- MYSQL5.7开启慢查询日志
- 微信又是一次大更新,下拉多任务切换 各种有趣小游戏
- 人工智能有可能超越人类大脑?
- 一种简单的数据库性能测试方法
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 使用PyTorch构建的“感知器”网络
- Python 经典面试题 一
- Python 经典面试题 二
- Linux磁盘管理之LVM快速入门配置
- 你熟悉Python的代码规范吗?如何一键实现代码排版
- Deepin安装与基础使用
- Golang 单元测试详尽指引
- Pigeon- Flutter多端接口一致性以及规范化管理实践
- Linux之PAM系统模块详解说明
- 快速上手联邦学习——腾讯自研联邦学习平台PowerFL实战
- Linux发行版的镜像网站及开源软件收集
- 自建图床应用,我只推荐 Serverless
- 手把手教你使用 Nginx Ingress 实现金丝雀发布
- Kettle构建Hadoop ETL实践(六):数据转换与装载
- 从面试角度一文学完 Kafka