Javascript+ASP打造無重新整理新聞列表

來源:互聯網
上載者:User
javascript|重新整理|無重新整理

  如上圖所示的新聞列表在各大網站中並不少見,有了新聞列表就少不了分頁,今天我們要談的就是各分頁間的切換方式。傳統的方法是將頁碼以URL參數的形式傳到列表頁,列表頁內程式根據傳入的參數來顯示不同的內容,這之間就有了一次重新整理。然而很多時候頁面中的新聞列表只佔該頁布局的一小部分,分了更新這小部分的內容卻得重新整理整個頁面的內容,有人抗議了,于是之後就有人採用XMLHTTP、AJAX等技術來實現無重新整理更新列表。今天我們也要實現無重新整理更新列表,但不使用XMLHTTP、AJAX等新技術,只使用傳統的Javascript和ASP語言來實現。

圖1 最終效果圖

  一、問題的提出

  公司網站要更新,前台昨天做完了,今天由我套程式,圖1為公司新聞頁中的新聞列表,看到它就突發奇想:做為網路公司的網站應該有點技術含量才行,那今天這列表也來玩玩無重新整理。要達到只在局部進行更新,其實用浮動架構(iframe)也能做到,但是這個頁面有背景圖片且圖案不是規則的,用浮動架構很難達到背景統一;那用XMLHTTP、AJAX?可惜這兩個也只是接觸一點皮毛,要用它們來實現無重新整理還得翻閱一些資料,我也不想用它,因為我想到了用 JavaScript+ASP也可以實現的,雖然思路暫時不是很清晰,但相信一定能行!

  二、分析問題

  有玩過動網的人應該知道它在註冊和登入頁中都有驗證碼這一項,這驗證碼還有個功能:當數字不是很清晰時你可以用左鍵點擊一下驗證碼,就能重新整理成新的驗證碼了。注意,只重新整理驗證碼,頁面其他部分沒重新整理哦!以前我專門針對這個研究了好久,查閱了資料,後來總結成一篇文章叫"script調用asp實現過程",有興趣的朋友務必先看看,要不下邊的您可能就看得不太明白了。

  看了"script調用asp實現過程"再回頭想想動網的驗證碼,您也大概知道我要怎麼做了吧,呵呵。我們繼續說,下邊我們先來分析下圖1中列表處的代碼,代碼如下:

  <div ID="titleLiNews">
  <ul>
    <li><a href="#">於召開寬頻異常掉線研究試驗工作討論會的通知</a> (2005-01-12)</li>
    <li><a href="#">做好2005年中秋節網路監控和話務疏通工作的要</a>... (2005-01-12)</li>
    <li><a href="#">於要求做好中秋務高峰期間智能網業務通訊保障相關</a>...(2005-01-12)</li>
    <li><a href="#">加強防禦第15號颱風“卡努”的緊急通知</a>(2005-01-12)</li>
    <li><a href="#">地下載9月第2周話單方式的ADSL掉線統計及清</a>...(2005-01-12)</li>
    <li><a href="#">於要求做好中秋務高峰期間智能網業務通訊保障相關</a>...(2003-01-12)</li>
    <li><a href="#">於加強防禦第15號颱風“卡努”的緊急通知</a>(2007-10-12)</li>
    <li><a href="#">於召開寬頻異常掉線研究試驗工作討論會的通知</a> (2005-01-12)</li>
    <li><a href="#">做好2005年中秋節網路監控和話務疏通工作的要</a>... (2005-01-12)</li>
    <li><a href="#">於要求做好中秋務高峰期間智能網業務通訊保障相關</a>...(2005-01-12)</li>   
  </ul>
</div>

  在tianxia.css檔案中我還找到了控制它的樣式:

  #titleLiNews {
}
#titleLiNews ul {
list-style-type: none;
margin: 0px;
padding: 0px;
width: 550px;
}
#titleLiNews ul li {
font-size: 9px;
line-height: 21px;
color: #0099FF;
text-decoration: none;
background-image: url(images/line02.jpg);
background-repeat: no-repeat;
margin: 0px 10px 0px 20px;
padding: 0px;
font-family: "Verdana", "Arial", "Helvetica", "sans-serif";
list-style-position: inside;
list-style-type: disc;
border-bottom-width: 1px;
border-bottom-style: dotted;
border-bottom-color: #0051A2;
}
#titleLiNews ul li a {
color: #FFFFFF;
text-decoration: none;
font-size: 12px;
}
#titleLiNews ul li a:hover {
color: #FFFF00;
text-decoration: underline;
font-size: 12px;
}

  ID類、偽類,看這些樣式,我不得不想到Web標準,我想美工在Web標準上也是下過功夫的,不由得對他又多了些敬佩。OK,結合上邊全部聽到的看到的,我們不難想出這麼一條思路:設計一個ASP頁面,這個頁面可接受參數即顯示頁數,該頁程式查詢資料庫後根據參數進行分頁並將結果以JS文法輸出,公司新聞頁中只須加一條語句調用即可。

  三、解決問題

  假設公司新聞頁檔案名稱:news.asp、查詢頁檔案名稱:newslit.asp。

  news.asp主要代碼如下:

  <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>公司新聞</title>
<script language="JavaScript" type="text/javascript">
function showpage(n){
document.scripts[1].src = "newslist.asp?page_no=" + n;
}
</script>
<script language="JavaScript" type="text/javascript" src=""></script>
</head>
<body>
<div ID="titleLiNews">
</div>
<a href="javascript:showpage(1);">1</a>& nbsp;<a href="javascript:showpage(2);">2</a>& nbsp;<a href="javascript:showpage(3);">3</a>
<script language="JavaScript" type="text/javascript">showpage(1);</script>
</body>
</html>

  newslist.asp代碼

  <%
Dim conn
Set conn=server.createobject("ADODB.connection")
conn.connectionstring="provider=microsoft.jet.oledb.4.0; data source=" & server.mappath("db1.mdb")
conn.open
Dim page_no,sqlstr,rs,i,str
page_no = request.querystring("page_no")
Sqlstr = "select * from news"
Set rs = Server.CreateObject("ADODB.RecordSet")
Rs.open sqlstr,conn,1,2
Rs.pagesize = 3
Rs.absolutepage = page_no
Str = "document.getElementById('titleLiNews').innerHTML = ""<Ul>"
If rs.eof then str = str & "<li>暫無新聞</li>" & "</Ul>';"
i = 3
Do while not rs.eof and i > 0
i = i-1
str = str & "<li><a href='newsview.asp?id=" & rs("id") & "'>" & rs("title") & "</a></li>"
rs.movenext
Loop
str = str & "</Ul>"";"
set rs=nothing
set conn = nothing
Response.write str
%>

  四、後記

  從"動網驗證碼"到"script調用asp實現過程"再到"Javascript+ASP打造無重新整理新聞列表",我們可以舉一反三,例如註冊使用者時無重新整理判斷使用者名稱是否被註冊、無重新整理表單驗證等都可以用Javascript+ASP來實現了。



相關文章

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 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。