ajax+二級關聯菜單

來源:互聯網
上載者:User

這是一個用ajax技術實現的一個二級關聯菜單,是與資料庫相聯絡的。
代碼如下:
1,發表文章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>

2,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]);
        }
     }
願有意者與我共同分享。

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.