用戶端CGI——結合javascript、dhtml實現bbs的backoffice(一)。

來源:互聯網
上載者:User
cgi|dhtml|用戶端          用戶端CGI——結合javascript、dhtml實現bbs的backoffice(只與伺服器互動一次)。
    最近見到很多朋友問有關對form元素的操作問題,下面把我寫的一個bbs的backoffice部分帖出來給大家。這個程式實現了對bbs中欄目及其下屬論壇的增、刪、改名、排序、移動、修改屬性等等操作,而只與伺服器互動一次,其中用到的表單元素有text , button, submit,select , textarea等,如果你能夠全部理解這些代碼,那麼不敢說你精通javascript和dhtml(我就不敢),最起碼可以說你會了。
    因為是草稿,所以未進行程式最佳化及介面處理,實際上你如果結合css可以把它做得象一個windows程式而不象html頁面。另外一條因為我是用ie5來測試的,所以其中一些寫法不是很規範,如引用form名時前面沒加document , 函數沒有傳回值等,這些在nescape裡都是不允許的,如果你要在nescape裡用,請自己把文法規範了。
    由於原始碼很長(30000多位元組),我將分為幾個部分來講,你把幾部分中的代碼合在一起存為一個html檔案就可以直接運行了。首先需要從資料庫中取出記錄放到前台javascript數組中,因為著重點是放在前台,所以這裡的asp我就不列出來了,只把它產生的html列出來,它的目的是產生數組及初始頁面。這部分代碼中牽涉到一個產生javascript二維數組的技巧,請大家仔細看一下,這是整個程式的關鍵所在。下面這段程式產生兩個數組,一個是aCategory,代表bbs大的欄目,共有四個;另一個是aForum,代表同欄目相關聯的論壇。整個程式的操作實際上就是圍繞著兩個數組來實現的,同這兩個數組相關聯的是表單frmManager的兩個select :selCategory和selForum。


<script language=javascript>

   //版塊數組的建構函式
   function MakeCategory(CategoryID , CategoryName , OrderNum)
     {
       this.CategoryID   = CategoryID ;
       this.CategoryName = CategoryName ;
       this.OrderNum     = OrderNum ;
       return this ;
     }

   //論壇數組的建構函式
   function MakeForum(CategoryID , CategoryName , OrderNum , RootCategoryID , Description , MasterID)
     {
       this.CategoryID     = CategoryID ;
       this.CategoryName   = CategoryName ;
       this.OrderNum       = OrderNum ;
       this.RootCategoryID = RootCategoryID ;
       this.Description    = Description ;
       this.MasterID       = MasterID ;
       return this ;
     }

   //建立版塊數組並賦值
  var aCategory = new Array() ;
  aCategory[0] = new MakeCategory(1 , '技術交流' ,1) ;
  aCategory[1] = new MakeCategory(2 , '專案管理' ,2) ;
  aCategory[2] = new MakeCategory(3 , '內部公告' ,3) ;
  aCategory[3] = new MakeCategory(4 , '海闊天空' ,4) ;

   //建立論壇數組並賦值
  var aForum = new Array() ;
  aForum[0] = new MakeForum(5 , 'Asp&Database' ,1 ,1 ,'asp, access,PB, sql.oralce,etc. ',1);
  aForum[1] = new MakeForum(6 , 'Design World' ,2 ,1 ,'photoshop,dreamweaver,flash, 3dmax,etc.',2);
  aForum[2] = new MakeForum(7 , 'Design World' ,3 ,1 ,'photoshop,dreamweaver,flash, 3dmax,etc.',2);
  aForum[3] = new MakeForum(8 , 'Program Language' ,4 ,1 ,'Java, html/dhtml/xml, C/C++, Php/Jsp, vbscript/javascript, etc.',1);
  aForum[4] = new MakeForum(9 , 'System Administration' ,5 ,1 ,'Windows9x/NT/2000, Unix, Linux , etc.',2);
  aForum[5] = new MakeForum(10 , 'Network Security' ,6 ,1 ,'TCP/IP, Socket, hacker, FireWall, Proxy, etc.',1);
  aForum[6] = new MakeForum(11 , 'New Idea' ,7 ,1 ,'Welcome all Creative, innovative and anything different .',1);
  aForum[7] = new MakeForum(12 , '4biz電子商務搜尋引擎門戶項目' ,1 ,2 ,'E-Commerce Search Engine Portal.',2);
  aForum[8] = new MakeForum(13 , 'Poker Town ' ,2 ,2 ,'Our first Online Game.',1);
  aForum[9] = new MakeForum(14 , 'Vertigine' ,3 ,2 ,'Powerful Vertical Search Engine.',2);
  aForum[10] = new MakeForum(15 , 'EasyCase' ,4 ,2 ,'EasyCase-New modeling tool.',1);
  aForum[11] = new MakeForum(16 , '日常管理' ,1 ,3 ,'Daily Grind.',2);
  aForum[12] = new MakeForum(17 , '臨時通知' ,2 ,3 ,'Temporary Notice.',1);
  aForum[13] = new MakeForum(18 , '會議安排' ,3 ,3 ,'Meeting Schedule.',2);
  aForum[14] = new MakeForum(19 , '有感而發' ,4 ,4 ,'Just say it.',1);
  aForum[15] = new MakeForum(20 , '似水流年' ,5 ,4 ,'all that gone with wind.',1);
  aForum[16] = new MakeForum(21 , '談情說愛' ,6 ,4 ,'Let"s talk about love.',2);
  aForum[17] = new MakeForum(22 , '笑話站' ,7 ,4 ,'Just joke , whatever it is.',1);

</script>

<html>
<



相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

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

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