`

联动下拉菜单：采用XMLHttpRequest实现数据获取

XMLHttpRequest 
阅读更多

代码比较简单，相信大家能看明白。

另外，我对XMLHttpRequest的使用不是特别熟悉，如果有使用不当之处，还请大家批评指正。

 

JSP:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ page language="java" contentType="text/html; charset=GBK" pageEncoding="GBK"%>

<%@ taglib uri="/WEB-INF/struts-bean.tld" prefix="bean" %>
<%@ taglib uri="/WEB-INF/struts-html.tld" prefix="html" %>
<%@taglib uri="/WEB-INF/FCKeditor.tld" prefix="fck"%>

<%@ page import="java.util.*" %>
<%@ page import="org.zcinfomanage.column.dao.SiteColumnDAOImpl" %>
<%@ page import="org.zcinfomanage.pagemanage.po.SiteColumn" %>

<%String appContext = request.getContextPath(); %>

<html>
	<head>
		<title>Test</title>
		<script language="JavaScript" type="text/javascript" src="js/linkageCtl.js"></script>
	</head>
	
	<link href="css.css" rel="stylesheet" type="text/css" />
 <body>

<FORM name="webPageForm" action="<%=appContext %>/webPageManage.do?method=modifyWebPage" method="post">
 	
 
 <table width="97%" border="0" cellspacing="1" cellpadding="2" class="borde2">
    <tr>
      <td height="40" background="UserFiles/Image/bg_table.jpg" bgcolor="#CBE9F9" class="jianju5 jianju4 fontBlueno">
	  	<html:messages id="message" message="true">
				<font color="#ff0000">
					<LI>
						<bean:write name="message"/>
					</LI>
				</font>
	  	</html:messages>
	  </td>
    </tr>
  </table>
 <table width="97%" cellpadding="1" cellspacing="1">
 	<tr>
 		<td class="w" height="40" bgcolor="#FFFFCC">&nbsp;&nbsp;&nbsp;&nbsp;
 			栏目名称:&nbsp;
 			<select name="siteColumnID" onchange="getFileTitleList(this.options[this.options.selectedIndex].value)">
 				<OPTION value="0" >请选择栏目</OPTION>
		    	<%
    			List columnList = new SiteColumnDAOImpl().getSiteColumnList();
    			for(Iterator it = columnList.iterator(); it.hasNext();){
    				SiteColumn column = (SiteColumn)it.next();
    		%>
    		<OPTION value="<%=column.getId()%>" >
    			<%=column.getColumnName()%>
    		</OPTION>
    		<%
    			}
    		%>
	  </select>	  </td>
 	</tr>
 	 	
 	<tr>
 		<td class="w" height="40" bgcolor="#FFFFCC">&nbsp;&nbsp;&nbsp;&nbsp;
 			文章标题:&nbsp;
 			<select name="htmlFileID" onchange="getFileContent(this.options[this.options.selectedIndex].value)">
 				<OPTION value="0" >请选择文章标题</OPTION>
	  </select>	  </td>
 	</tr>
 	
 	<tr>
	 	<td bgcolor="#FFFFCC">&nbsp;&nbsp;&nbsp;&nbsp;
			 <fck:editor id="fileContent" basePath="" height="400px" width="800px"
			 		skinPath="/zcifmg/editor/skins/default/" toolbarSet="Default" 
			 		imageBrowserURL="/zcifmg/editor/filemanager/browser/default/browser.html?Type=Image&Connector=connectors/jsp/connector" 
			 		linkBrowserURL="/zcifmg/editor/filemanager/browser/default/browser.html?Connector=connectors/jsp/connector" 
			 		flashBrowserURL="/zcifmg/editor/filemanager/browser/default/browser.html?Type=Flash&Connector=connectors/jsp/connector" 
			 		imageUploadURL="/zcifmg/editor/filemanager/upload/simpleuploader?Type=Image" 
			 		linkUploadURL="/zcifmg/editor/filemanager/upload/simpleuploader?Type=File" 
			 		flashUploadURL="/zcifmg/editor/filemanager/upload/simpleuploader?Type=Flash">
			 </fck:editor>
		</td>
	</tr>

 	
<tr>
	<td>
  	<input type="submit" value="提交"/>  
  	<input type="reset" value="重置"/>
  </td>
<tr>
  </table>
  
  
 </FORM>
  
  
  </body>
</html>

 

 

JS:

var req; //定义变量，用来创建xmlhttprequest对象

function getFileTitleList(siteColumnID){
	var reqURL = "modifyRequest.jsp?siteColumnID="+ siteColumnID +"&temp="+ Math.random();
  //alert("** 栏目 = " + siteColumnID);
  //alert("** 请求URL = " + reqURL);
            
  if(window.XMLHttpRequest) //非IE浏览器，用xmlhttprequest对象创建
	{
		req=new XMLHttpRequest();
  }else if(window.ActiveXObject) //IE浏览器用activexobject对象创建
  {
  	req=new ActiveXObject("Microsoft.XMLHttp");
  }

	
  //成功创建xmlhttprequest
  if(req){
  	req.open("GET",reqURL,false); //与服务端建立连接(请求方式post或get，地址,true表示异步)
    req.onreadystatechange = callbackFileTitle; //指定回调函数
    req.send(null); //发送请求
  }
}


// 创建xmlhttprequest,ajax开始
function getFileContent(fileTitleID){
	var url = "modifyRequest.jsp?fileTitleID="+ fileTitleID +"&temp="+ Math.random();
  //alert("fileTitleID = " + fileTitleID);
  //alert("url = " + url);
            
  if(window.XMLHttpRequest) //非IE浏览器，用xmlhttprequest对象创建
	{
		req=new XMLHttpRequest();
  }else if(window.ActiveXObject) //IE浏览器用activexobject对象创建
  {
  	req=new ActiveXObject("Microsoft.XMLHttp");
  }

	
  //成功创建xmlhttprequest
  if(req){
  	req.open("GET",url,false); //与服务端建立连接(请求方式post或get，地址,true表示异步)
    req.onreadystatechange = callback; //指定回调函数
    req.send(null); //发送请求
  }
}

//回调函数，对服务端的响应处理，监视response状态
function callbackFileTitle(){
	//请求状态为4表示成功
  if(req.readyState == 4){
  	//http状态200表示OK
    if(req.status==200){
	  	Dispaly2();
   	}else{
  		alert("服务端返回状态" + req.statusText);
		}
	}else{
  	waiting2();
  }
}

function callback(){
	//请求状态为4表示成功
  if(req.readyState == 4){
  	//http状态200表示OK
    if(req.status==200){
	  	Dispaly();
   	}else{
  		alert("服务端返回状态" + req.statusText);
		}
	}else{
  	waiting();  
  }
}
        
//接受服务端返回的数据，对其进行显示
function Dispaly2(){
	//alert("** Dispaly2()....");
	var rtnStr = "";
	var fileIDObj = document.getElementById("htmlFileID");
	fileIDObj.innerHTML = '';
	
	fileIDObj.options.add(new Option("请选择文章标题","0"));
	
	var fileTitleList = eval(req.responseText);
	for(i = 0; i < fileTitleList.length; i++){
		//alert("** 文章标题: " + fileTitleList[i].fileTitle +"  文章ID: " + fileTitleList[i].id);
		fileIDObj.options.add(new Option(fileTitleList[i].fileTitle,fileTitleList[i].id));
	}
	
}

function Dispaly(){
	var oEditor = FCKeditorAPI.GetInstance("fileContent");
	oEditor.SetHTML(req.responseText);
}
        
//接受服务端返回的数据，对其进行显示
function waiting2(){
	//alert("** waiting2 ....");
	//var oEditor = FCKeditorAPI.GetInstance("fileContent");
	//oEditor.SetHTML("数据加载中....");
}

function waiting(){
	var oEditor = FCKeditorAPI.GetInstance("fileContent");
	oEditor.SetHTML("数据加载中....");
}
		
function GetInnerHTML(){
	// Get the editor instance that we want to interact with.
	var oEditor = FCKeditorAPI.GetInstance('testfck');
	alert( oEditor.EditorDocument.body.innerHTML ) ;
}

 

分享到：
| FCKEditor的使用
评论
1 楼 bcsj123 2010-01-28  
版主 ，  效果图 贴出来看下。。
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jsp+ajax 三级联动菜单

    【jsp+ajax 三级联动菜单】是一个典型的Web开发技术应用场景，它主要利用JavaServer Pages（JSP）和Asynchronous JavaScript and XML（AJAX）来实现动态网页中的数据交互和页面更新。在这个例子中，我们看到的是一个...

    商业编程-源码-AjaxPro无刷新三级联动下拉菜单.zip

    通过这种方式，AjaxPro无刷新三级联动下拉菜单不仅提供了流畅的用户体验，还降低了服务器的压力，因为只需要处理必要的数据请求，而不是整个页面的刷新。同时，对于开发者来说，AjaxPro提供的.NET友好接口降低了实现...

    全国各省市联动下拉列表

    全国各省市联动下拉列表是一种常见的前端交互设计，主要用于网页上的地址选择，用户可以在两个或多个下拉列表中逐级选择国家、省份、城市等信息，实现数据的联动筛选。这种设计常见于注册表单、地址填写、物流配送等...

    ajax四级联动菜单

    【Ajax四级联动菜单】是一种基于Ajax技术实现的动态下拉菜单功能，通常用于网页上的地区选择，例如国家、省份、城市、区县等。在这个示例中，它使用了Oracle数据库存储四级菜单的数据，并结合JSP（JavaServer Pages...

    AJAX省市区三级联动下拉菜单(java版)

    在本文中，我们将深入探讨如何实现一个基于AJAX的省市区三级联动下拉菜单，以Java后端技术作为支持。这种功能通常用于网页表单中，允许用户在选择省份后，城市和区县的下拉菜单会根据所选的省份自动更新。下面将详细...

    ajax 异步实现两级联动下拉列表和输入提示

    在“两级联动下拉列表”中，通常有两个或更多下拉菜单，它们之间有依赖关系。例如，第一个下拉框选择了国家，第二个下拉框则根据所选国家动态加载对应的省份。当用户在第一个下拉框中做出选择时，AJAX会异步发送请求...

    一个和数据库关联的，二级联动菜单示例ajax实现

    这个"一个和数据库关联的，二级联动菜单示例ajax实现"是一个实用的代码示例，它展示了如何利用AJAX（异步JavaScript和XML）技术动态加载并更新二级菜单的内容，根据用户在一级菜单中的选择。 首先，我们来理解一下...

    Ajax四级联动源代码

    四级联动通常指的是省-市-区-街道的逐级下拉菜单，用户选择一个层级后，下一级别的选项会根据前一级的选择动态加载。 首先，让我们详细了解一下四级联动的基本原理。在HTML中，通常会创建四个下拉列表（select元素...

    Ajax二级联动下拉列表框

    ### Ajax 实现二级联动下拉列表框 #### 一、简介 在Web开发中，有时我们需要根据用户在第一个下拉列表中的选择动态地更新第二个下拉列表的内容。这种功能被称为“二级联动”，常用于地址选择（如省份和城市的选择）...

    动态从后台获取数据实现搜索下拉框

    在IT行业中，动态从后台获取数据并实现搜索下拉框是一项常见的前端开发任务，它涉及到网页交互、数据传输以及用户界面的设计。这个功能通常应用于表单填写、筛选或导航等场景，极大地提升了用户体验。下面我们将深入...

    Ajax联动菜单(asp.net)

    4. **编写后台代码**：在选定事件处理程序中，获取第一个下拉菜单的选中值，并根据该值查询数据库或其他数据源以填充第二个下拉菜单。然后，使用DropDownList的DataBind方法更新数据。 5. **前端交互**：在...

    前端 省市级三级联动 最新xml文档数据及js脚本及使用说明

    通过解析XML文件，我们可以获取这些数据并用于填充前端的下拉菜单。 JavaScript是实现这种联动效果的关键技术。文件中提供的JavaScript脚本很可能是用来处理XML数据、动态更新下拉菜单以及处理用户选择事件的。...

    js模拟下拉无级联动

    无级联动指的是在一个下拉菜单的选择会影响到另一个或多个下拉菜单的内容，而这些联动的下拉菜单可以无限级地延伸，即不限于两级或者三级，而是根据数据结构可以无限扩展。 在JavaScript中，我们可以使用事件监听...

    js实现三级联动展现

    实现这个功能，开发者可能使用了AJAX（Asynchronous JavaScript and XML），这是一种异步数据获取技术，允许JavaScript在不刷新整个页面的情况下从服务器获取数据。在本例中，可能是使用`XMLHttpRequest`对象或者...

    省市区无刷新联动菜单

    在“省市区无刷新联动菜单”中，当用户在“省份”下拉菜单中选择一个省份时，Ajax会发送请求，获取该省份下的市列表，并填充到“城市”下拉菜单中，用户继续选择城市时，同理获取区县列表。 2. **HTML和CSS**：`...

    纯JS写的省市县三级联动菜单

    不使用AJAX（异步JavaScript和XML）意味着所有的数据获取和处理都在页面加载时完成，而不是在用户操作时动态请求。 连接数据库的部分意味着开发者可能使用了JavaScript的`XMLHttpRequest`对象或者现代浏览器提供的`...

    ajax+json实现多级联动菜单

    ### 使用Ajax+JSON实现多级联动菜单的知识点详解 #### 一、背景介绍与概念解析 随着互联网技术的发展，用户对交互式应用的需求日益增长。RIA（Rich Internet Applications）概念的提出更是加速了这一趋势。其中，...

    ASP 实用的ajax二级联动菜单

    当用户选择一级菜单项时，触发对应的函数，这个函数会发送Ajax请求以获取相应的二级菜单数据。 4. **VBScript处理**：在ASP页面中，VBScript接收Ajax请求，根据请求参数查询数据库（可能是SQL Server或Access等），...

    Ajax四级联动下拉

    在网页开发中，"Ajax四级联动下拉"是一种常见的交互设计技术，主要用于地理信息选择或者层级结构的数据筛选。这个技术通常涉及到四个级别：省、市、县和乡，用户在选择一个级别的选项后，下一级别的下拉框会自动更新...

Magicbox
Global site tag (gtag.js) - Google Analytics