浏览 3969 次
|
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2009-05-17
代码比较简单，相信大家能看明白。 另外，我对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">
栏目名称:
<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">
文章标题:
<select name="htmlFileID" onchange="getFileContent(this.options[this.options.selectedIndex].value)">
<OPTION value="0" >请选择文章标题</OPTION>
</select> </td>
</tr>
<tr>
<td bgcolor="#FFFFCC">
<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 ) ;
}
声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
|
发表时间：2010-01-28
版主 ， 效果图 贴出来看下。。
|
| 返回顶楼 | |
