前台：---------------------------------------------------------------------------------------
<%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<html>
<head>
<script type="text/javascript" src="js/prototype-1.6.0.3.js"></script>
<script type="text/javascript">
function getXmlHttpRequest(){
var xhr = null;
if((typeof XMLHttpRequest)!='undefined'){
xhr = new XMLHttpRequest();
}else {
xhr = new ActiveXObject('Microsoft.XMLHttp');
}
return xhr;
}
function change(v1){
var xhr = getXmlHttpRequest();
xhr.open('post','city.do',true);
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.onreadystatechange=function(){
//服务器返回 yy,岳阳;cs,长沙;hh,怀化
if(xhr.readyState == 4){
var txt = xhr.responseText;
var arr = txt.split(';');
$('s2').innerHTML = '';
for(i=0;i<arr.length;i++){
var arr1 = arr[i];
var arr2 = arr1.split(',');
var op = new Option(arr2[1],arr2[0]);
$('s2').options[i] = op;
}
}
};
xhr.send('name=' + v1);
}
</script>
</head>
<body style="font-size:30px;">
<select id="s1" style="width:120px;" onchange="change(this.value);">
<option value="hn">湖南</option>
<option value="bj">北京</option>
</select>
<select id="s2" style="width:120px;"> </select>
</body>
</html>
后端：------------------------------------------------------------------------------------------------------------------
public class ActionServlet extends HttpServlet {
public void service(HttpServletRequest request,HttpServletResponse response)throws ServletException, IOException {
String uri = request.getRequestURI();
String path = uri.substring(uri.lastIndexOf("/"),uri.lastIndexOf("."));
response.setContentType("text/html;charset=utf-8");
PrintWriter out = response.getWriter();
if(path.equals("/city")){
String name = request.getParameter("name");
if(name.equals("hn")){
out.println("yy,岳阳;hh,怀化;cs,长沙"); -----手工组装下拉项数据格式
}else if(name.equals("bj")){
out.println("cy,朝阳;hd,海淀;dc,东城;xc,西城");-----手工组装下拉项数据格式
}
}
out.close();
}
}
相关推荐
通过以上步骤，我们可以实现一个功能完备的JSP页面二级下拉框联动，同时实时从数据库获取数据。这个过程涉及到前后端的交互、数据库操作、事件监听和DOM操作等多个技术环节，是Web开发中一个典型的实例。理解并掌握...
在这个"超简单的ajax+jsp实现2级联动"的例子中，我们将探讨如何利用AJAX（Asynchronous JavaScript and XML）技术和JavaServer Pages (JSP)来实现这种功能。 首先，我们需要了解AJAX的基本原理。AJAX允许网页在不...
总的来说，“下拉框二级联动”是提高用户体验的一种有效方式，通过AJAX和JSON，我们可以实现前后端的高效通信，动态地更新页面内容，从而提供更加流畅的交互体验。在项目实践中，需要根据具体需求选择合适的技术栈和...
在这个特定的场景中，我们讨论的是如何使用Ajax实现二级下拉框的联动，以及涉及到的技术如Servlet、Java和XMLHttp。 首先，二级下拉框联动通常用于地理信息的选择，例如省份选择后，城市下拉框自动更新对应省份的...
本实例将探讨如何使用JSP（JavaServer Pages）和Ajax（Asynchronous JavaScript and XML）技术实现二级联动效果。 首先，我们需要理解JSP和Ajax的基础概念。JSP是Java的一种服务器端脚本语言，它允许开发者在HTML中...
在这个案例中，我们讨论的是如何在JavaScript环境中，利用Ajax技术实现一个基于Word版本的三级联动下拉框。 首先，我们需要在数据库中创建三个表，分别代表省份、城市和区域（区县）。这些表通常包含`id`作为主键，...
本项目“ajax + servlet 两级动态级联下拉框”旨在演示如何使用AJAX（异步JavaScript和XML）技术和Servlet进行交互，以实现在选择第一个下拉框的值后，第二个下拉框自动更新并显示相关数据。以下是对这个项目的详细...
在JSP（JavaServer Pages）中实现二级下拉框联动，是一种常见的前端与后端交互的场景，常用于动态加载相关数据，例如地区选择、分类筛选等。在这个例子中，我们通过JavaScript、VBScript以及JSP来实现这一功能，确保...
### JSP从数据库获取数据填充下拉框实现二级联动菜单的方法 #### 一、引言 在Web开发中，为了提高用户体验和数据处理效率，经常需要实现动态数据填充功能，尤其是对于多级联动的选择菜单。本文将详细介绍如何利用...
在这个项目中，我们利用JSP（JavaServer Pages）作为后端脚本语言，通过Ajax（Asynchronous JavaScript and XML）实现页面的异步更新，构建了一个省、市、县三级联动的下拉选择功能。下面将详细介绍这些技术及其应用...
在创建三级联动下拉框时，Struts2的拦截器和结果类型配置将起到关键作用，它们可以控制页面跳转和数据传递。 接下来是Spring框架，它通过依赖注入（DI）和面向切面编程（AOP）来管理应用程序的组件。在本案例中，...
1. **JSP页面**：首先，你需要在JSP页面上创建两个或多个`<select>`元素，每个元素对应一个级别的下拉框。使用`<s:select>`标签来引用Struts2的标签库，这样可以方便地绑定数据和事件。 2. **Action类**：在Struts...
### Ajax两级联动小实验知识点详解 #### 一、基本概念 **联动**：是指在一个下拉框选项发生变化时，能够不刷新页面的情况下自动更新另一个下拉框中的选项内容。这种实时更新是通过向服务器发送异步请求（通常采用...
在“两级联动下拉列表”中，通常有两个或更多下拉菜单，它们之间有依赖关系。例如，第一个下拉框选择了国家，第二个下拉框则根据所选国家动态加载对应的省份。当用户在第一个下拉框中做出选择时，AJAX会异步发送请求...
在一个jsp(SUN企业级应用的首选)页面实现二级下拉框联动，实时读取数据库数据，这个方法非常使用，只需要修改很小的地方就可以使用。设计的文件，serch.jsp(SUN企业级应用的首选)，main.js，bytetostr.js，
### js+jsp 联动下拉列表框 在网页开发中，经常需要用到联动下拉列表来实现数据的动态关联展示。例如，在一个电子商务网站上，用户选择省份时，对应的市级下拉列表会随之更新。这种功能的实现依赖于前端JavaScript...
本文将详细解析如何使用纯JSP（JavaServer Pages）技术实现一个3级联动菜单，并探讨相关知识点。 首先，我们要理解什么是3级联动菜单。在网页中，联动菜单通常指的是当用户在一个下拉菜单中选择一个选项时，另一个...
### Ajax 实现二级联动下拉列表框 #### 一、简介 在Web开发中，有时我们需要根据用户在第一个下拉列表中的选择动态地更新第二个下拉列表的内容。这种功能被称为“二级联动”，常用于地址选择（如省份和城市的选择）...
**JSP数据库二级联动原理详解** 在Web开发中，二级联动是一种常见的交互设计，常见于下拉菜单选择，如省份和城市的选择。这种设计能够帮助用户在有限的选项中快速定位到他们想要的信息，通常应用于地址填写、地区...