页面:index.html
<%@ page language="java" contentType="text/html; charset=utf-8"%>
<html>
<head>
<title>My JSP 'index.html' starting page</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<SCRIPT type="text/javascript">
var req;
window.onload=function(){
}
function Change_Select()
{
var zhi=document.getElementById('hero').value;
var url="select?id="+escape(zhi);
if(window.XMLHttpRequest)
{
req=new XMLHttpRequest();
}else if(window.ActiveXObject)
{
req=new ActiveXObject("Microsoft.XMLHTTP");
}
if(req)
{
req.open("GET",url,true);
req.onreadystatechange=callback;
req.send(null);
}
}
function callback()
{
if(req.readyState == 4)
{
if(req.status == 200)
{
parseMessage();
}else{
alert("Not able to retrieve description"+req.statusText);
}
}
}
function parseMessage()
{
var xmlDoc=req.responseXML.documentElement;
var xSel=xmlDoc.getElementsByTagName('select');
var select_root=document.getElementById('skill');
select_root.options.length=0;
for(var i=0;i<xSel.length;i++)
{
var xValue=xSel[i].childNodes[0].firstChild.nodeValue;
var xText=xSel[i].childNodes[1].firstChild.nodeValue;
var option=new Option(xText,xValue);
try{
select_root.add(option);
}catch(e){
}
}
}
</SCRIPT>
</head>
<body>
<div align="center">
<form name="form1" method="post" action="">
<TABLE width="70%" boder="0" cellspacing="0">
<TR>
<TD align="center">Double Select Box</TD>
</TR>
<TR>
<TD>
<SELECT name="hero" id="hero" onChange="Change_Select()">
<OPTION value="0">Unbounded</OPTION>
<OPTION value="1">D.K.</OPTION>
<OPTION value="2">NEC.</OPTION>
<OPTION value="3">BOSS</OPTION>
</SELECT>
<SELECT name="skill" id="skill">
<OPTION value="0">Unbounded</OPTION>
</SELECT>
</TD>
</TR>
<TR><td> </td></TR>
</TABLE>
</form>
</div>
</body>
</html>
SelectServlet.java:
package com;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class SelectServlet extends HttpServlet {
/**
* Constructor of the object.
*/
public SelectServlet() {
super();
}
/**
* Destruction of the servlet. <br>
*/
public void destroy() {
super.destroy(); // Just puts "destroy" string in log
// Put your code here
}
/**
* The doGet method of the servlet. <br>
*
* This method is called when a form has its tag value method equals to get.
*
* @param request the request send by the client to the server
* @param response the response send by the server to the client
* @throws ServletException if an error occurred
* @throws IOException if an error occurred
*/
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/xml");
response.setHeader("Cache-Control","no-cache");
String targetId=request.getParameter("id").toString();
String xml_start="<selects>";
String xml_end="</selects>";
String xml="";
if(targetId.equalsIgnoreCase("0")){
xml="<select><value>0</value><text>Unbounded</text></select>";
}else if(targetId.equalsIgnoreCase("1")){
xml="<select><value>1</value><text>Mana Burn</text></select>";
xml +="<select><value>2</value><text>Death Coil</text></select>";
xml +="<select><value>3</value><text>Unholy Aura</text></select>";
xml +="<select><value>4</value><text>Unholy Fire</text></select>";
}else if(targetId.equalsIgnoreCase("2")){
xml="<select><value>1</value><text>Corprxplode</text></select>";
xml +="<select><value>2</value><text>Raise Dead</text></select>";
xml +="<select><value>3</value><text>Brilliance Aura</text></select>";
xml +="<select><value>4</value><text>Aim Aura</text></select>";
}else{
xml="<select><value>1</value><text>Rain of Chaos</text></select>";
xml +="<select><value>2</value><text>Finger of Death</text></select>";
xml +="<select><value>3</value><text>Bash</text></select>";
xml +="<select><value>4</value><text>Summon Doom</text></select>";
}
String last_xml=xml_start+xml+xml_end;
response.getWriter().write(last_xml);
}
/**
* The doPost method of the servlet. <br>
*
* This method is called when a form has its tag value method equals to post.
*
* @param request the request send by the client to the server
* @param response the response send by the server to the client
* @throws ServletException if an error occurred
* @throws IOException if an error occurred
*/
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doGet(request,response);
}
/**
* Initialization of the servlet. <br>
*
* @throws ServletException if an error occure
*/
public void init() throws ServletException {
// Put your code here
}
}
Java软件工程师推荐书籍:
开发者突击:Struts 2核心技术与Java EE框架整合开发实战
轻量级Java EE企业应用实战——Struts 2+Spring+Hibernate
JAVA核心技术卷II:高级特性
全新正版《Java程序设计应用基础教程》石号仓
Java编程思想(第4版)
网购通
分享到:
相关推荐
二级联动下拉框是指两个下拉框之间存在依赖关系,当用户在第一个下拉框中做出选择时,第二个下拉框的内容会根据选择进行更新。这种功能通常通过JavaScript或AJAX与服务器进行交互来实现。 1. **HTML结构**:首先,...
5. Ajax:ASP.NET MVC支持Ajax操作,使用Ajax.BeginForm或jQuery的$.ajax方法,可以实现无刷新更新页面部分内容,这对于二级联动下拉框的实时更新至关重要。 6. 数据绑定:在ASP.NET MVC中,可以使用MVVM(Model-...
以上就是关于"ajax++jsp二级联动下拉框,无刷新分页"这一主题的相关知识点,涵盖了Ajax、JSP、二级联动下拉框和无刷新查询等多个方面。通过这些技术,开发者可以创建出更高效、更友好的Web应用程序。
当用户在一级下拉框选择某个选项时,二级下拉框会根据所选内容动态加载相关数据,以此类推。这种效果可以通过Ajax实现,每级下拉框的选项改变时,都触发一个Ajax请求,获取并填充下一级别的选项。 三、实现步骤 1. ...
在IT领域,"AJAX版省市区三级联动下拉框"是一种常见的前端交互设计,尤其在网站表单中,用于用户选择地理位置时。这个技术基于AJAX(Asynchronous JavaScript and XML),它允许网页在不刷新整个页面的情况下与...
在“AJAX二级下拉框联动”中,主要涉及以下几个关键知识点: 1. **AJAX基础**:AJAX 是一种创建动态网页的技术,通过在后台与服务器进行少量数据交换,使网页实现异步更新。它利用JavaScript创建XMLHttpRequest对象...
在网页设计和开发中,"二级联动下拉框"是一种常见的交互元素,它通常用于实现多级选择或者关联数据的筛选。例如,在选择省份时,第一个下拉框会选择省份,当选择一个省份后,第二个下拉框会动态加载并显示该省份的...
在Web开发中,二级或三级联动下拉框是一种常见的交互设计,主要用于展示层次关系的数据,如省份-城市-区县的区域选择。本教程将详细讲解如何使用Ajax和Servlet技术来实现这一功能。 首先,我们需要了解Ajax...
在网页开发中,"市区二级联动下拉框"是一个常见的功能需求,特别是在用户需要选择地址时,例如填写收货地址。这种设计允许用户先选择省份(一级),然后根据选择的省份加载对应的市(二级)列表,以此提高用户体验,...
在提供的`fzzx.zip`压缩包中,包含了一个名为`a.html`的文件,这个文件很可能是用来展示如何实现layui下拉框二级联动的示例代码。打开这个HTML文件,我们可以看到一个包含两个下拉框的页面,第一个下拉框(一级)...
在网页设计和开发中,"三级联动下拉框"是一种常见的交互元素,它通常用于实现多级关联选择,比如省份-城市-区县的选择。这种功能可以极大地提高用户体验,尤其是在处理大量分类信息时。下面我们将深入探讨这个话题,...
在这个特定的场景中,我们讨论的是如何使用Ajax实现二级下拉框的联动,以及涉及到的技术如Servlet、Java和XMLHttp。 首先,二级下拉框联动通常用于地理信息的选择,例如省份选择后,城市下拉框自动更新对应省份的...
Smarty + Ajax 下拉菜单二级联动: 1. 建立数据库ajaxtest (使用utf8) 2. 进行conn.php 修改root密码 3. 导入表 product.sql --- 主产品 4. 导入表 producttest.sql -- 二级产品 弄好后运行:...
在我们的案例中,可能会有一个插件专门处理三级联动下拉框的逻辑。 **二、AJAX技术** AJAX(Asynchronous JavaScript and XML)是一种在无需刷新整个页面的情况下,能够更新部分网页的技术。在我们的场景中,当用户...
在本文中,我们将探讨如何使用Ajax和jQuery配合数据库来实现下拉框的二级联动效果,这对于构建交互式、响应式的Web应用非常重要。二级联动通常指的是一个下拉框的选择会影响另一个下拉框的内容,例如在选择省份后,...
四级联动下拉框是一种常见且实用的设计模式,尤其适用于导航大型复杂的数据结构,如组织结构、地区分类或者产品目录。这种设计允许用户逐步细化他们的选择,通过四个级别来过滤结果。在本案例中,我们将探讨如何使用...
在网页开发中,"js2级省市联动下拉框"是一种常见的交互设计,它用于创建一个用户友好的界面,让用户能够方便地选择省份和城市。这个功能通常在填写地址、设置配送区域等场景中出现。下面我们将详细探讨如何实现这样...
在网页设计中,三级联动下拉框是一种常见的交互元素,特别是在数据层级结构比较复杂的场景下,如地区选择、产品分类等。它通过三个下拉菜单的级联关系,让用户能够逐步细化选择,从大类到小类,最终精确地选取目标...
JavaScript(通常是jQuery库)会监听一级下拉框的`change`事件,当用户选择一项时,触发Ajax请求,服务器返回新的下拉框选项,然后动态更新二级下拉框。 **实现步骤:** 1. 创建HTML结构,包括两个下拉框。 2. 使用...