這是一個用ajax技術實現的一個二級關聯菜單，是與資料庫相聯絡的。
代碼如下：
１，發表文章jsp
<%@ page contentType="text/html; charset=gb2312" language="java" import="java.sql.*,xztj.bean.*,xztj.form.*" errorPage="" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>文章發表</title>
<SCRIPT language="javascript" src="/xztj/js/showSubject.js"></SCRIPT>
<script language="javascript">
_editor_url = "/js/";
var win_ie_ver = parseFloat(navigator.appVersion.split("MSIE")[1]);
if (navigator.userAgent.indexOf('Mac') >= 0) { win_ie_ver = 0; }
if (navigator.userAgent.indexOf('Windows CE') >= 0) { win_ie_ver = 0; }
if (navigator.userAgent.indexOf('Opera') >= 0) { win_ie_ver = 0; }
if (win_ie_ver >= 5.5) {
document.write('<scr' + 'ipt src="' +_editor_url+ 'editor.js"');
document.write(' language="Javascript1.2"></scr' + 'ipt>');
} else { document.write('<scr'+'ipt>function editor_generate() { return false; }</scr'+'ipt>'); }
function check(){
var copyFrom = document.getElementById ("ArticleSource");
if(document.form1.self[0].checked){;
copyFrom.style.display = "none";
}else
if(document.form1.self[1].checked){;
copyFrom.style.display = "";
}
}
</script>
<style type="text/css">
<!--
.style1 {font-size: 18px}
.style4 {font-size: 14px}
-->
</style>
</head> <body>
<form name="form1" method="post" action="">
<div align="center" class="style1">
<p>發表文章
</p>
<table width="636" height="418" border="1" bordercolor="#66CC99">
<tr>
<td><div align="left"><span class="style4">所屬欄目：</span></div></td>
<td width="475"><div align="left">
<select id="specialClassId" onchange="refreshList()">
<OPTION value="">請選擇所屬欄目</OPTION>
<%
java.util.Vector vector=ArticleClassBean.getInstance().articleClassShow();
ArticleClassForm af;
for(int i=0;i<vector.size();i++){
af=(ArticleClassForm)vector.get(i);
int classId=af.getClassId();
String className=af.getClassName();
%>
<OPTION value="<%=classId%>"><%=className%></OPTION>
<%}%>
</select>
</div></td>
</tr>
<tr class="tdbg">
<td><div align="left"><span class="style4">所屬專題：</span></div></td>
<td><div align="left">
<select id="specialId" >
<OPTION value="">請選擇所屬的專題</OPTION>
</select>
</div></td>
</tr>
<tr>
<td><div align="left"><span class="style4">文章標題：</span></div></td>
<td><div align="left">
<input type="text" name="title">
</div></td>
</tr>
<tr>
<td><p align="left" class="style4">文章作者：</p> </td>
<td><div align="left">
<input type="text" name="author">
</div></td>
</tr>
<tr>
<td><div align="left"><span class="style4">作者email:</span></div></td>
<td><div align="left">
<input type="text" name="email">
</div></td>
</tr>
<tr>
<td><div align="left"><span class="style4">文章屬性：</span></div></td>
<td><div align="left">
<input type="radio" name="self" value="1" onClick="check()">
<span class="style4">原創</span>
<input type="radio" name="self" value="2" onClick="check()">
<span class="style4">轉載</span></div></td>
</tr>
<tr class="tdbg" id="ArticleSource" style="display:none">
<td><div align="left"><span class="style4">轉自:</span></div></td>
<td><div align="left">
<input name="copyFrom" type="text"id="copyFrom" value="" size="50" maxlength="255">
</div></td>
</tr>
<tr>
<td><div align="left"><span class="style4">關鍵字：</span></div></td>
<td><div align="left">
<input type="text" name="keyWord">
</div></td>
</tr>
<tr>
<td><div align="left"><span class="style4">文章內容：</span></div></td>
<td><div align="left">
<textarea name="content" cols="25" rows="10"></textarea>
</div></td>
</tr>
<tr>
<td><div align="left"><span class="style4">文章類型：</span></div></td>
<td><div align="left">
<label>
<input type="checkbox" name="onTop" value="checkbox">
<span class="style4">固頂 </span></label>
<span class="style4">
<label> </label>
</span>
<label>
<input type="checkbox" name="eLite" value="checkbox">
<span class="style4">精華文章</span></label>
</div></td>
</tr>
<tr>
<td><div align="left"><span class="style4">是否有圖片：</span></div></td>
<td><div align="left">
<input type="radio" name="isPic" value="1">
<span class="style4">是</span>
<input type="radio" name="isPic" value="2">
<span class="style4">否</span></div></td>
</tr>
<tr>
<td><div align="left"><span class="style4">文章錄入員：</span></div></td>
<td><div align="left">
<input type="text" name="inputer">
</div></td>
</tr>
<tr>
<td><div align="left"><span class="style4">是否要經過審核</span>：</div></td>
<td><div align="left">
<input name="passed" type="checkbox" value="checkbox" checked>
</div></td>
</tr>
<tr>
<td> </td>
<td><div align="left">
<input type="submit" name="Submit" value="立即發布">
<input type="reset" name="Submit" value="重設">
</div></td>
</tr>
</table>
<p> </p>
</div>
</form>
</body>
</html> ２，js檔案
// JavaScript Document
var XMLHttpReq;
function createXMLHttpRequest() {
if(window.XMLHttpRequest) {
XMLHttpReq = new XMLHttpRequest();
}
else if (window.ActiveXObject) {
try {
XMLHttpReq = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
XMLHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
} function sendRequest(url) {
createXMLHttpRequest();
XMLHttpReq.open("POST", url, true);
XMLHttpReq.onreadystatechange = processResponse;
XMLHttpReq.send(null);
}
function processResponse() {
if (XMLHttpReq.readyState == 4) {
if (XMLHttpReq.status == 200) {
updateList();
} else {
window.alert('出錯啦');
}
}
}
//
function refreshList() {
var section = document.getElementById("specialClassId").value;
if(section == "" ) {
clearList();
return;
}
var url = "/xztj/special.do?method=ShowSpecialById&id=" + section;
sendRequest(url)
} function updateList() {
clearList();
var product = document.getElementById("specialId");
var results = XMLHttpReq.responseXML.getElementsByTagName("specialName");
var option = null;
for(var i = 0; i < results.length; i++) {
option = document.createElement("option");
option.appendChild(document.createTextNode(results.firstChild.nodeValue));
product.appendChild(option);
}
} function clearList() {
var product = document.getElementById("specialId");
while(product.childNodes.length > 0) {
product.removeChild(product.childNodes[0]);
}
}
願有意者與我共同分享。
|
