[c#]asp.net+jQuery+json做Ajax

Ajax常用在網頁單獨某一區塊的內容更新,不需要整頁網頁重新整理就可以得到區塊內容的更新,而常用與Web-Server做資料交換的格式有純文字、Parameter(key=value)、XML或是json等,而json為最常使用的格式之一,它不像XML格式,需要開始Tag與結束Tag,只需要利用Key,Value的方式來進行資料的設定,比XML更為簡單、內容大小更為精簡,詳細內容及方法可以參考http://www.json.org/

asp.net(使用c sharp)使用jQuery實作Ajax與伺服器溝通。

建立Web服務器asmx

利用Web服務器的函數(方法)來處理Ajax的需求及回應

要使用Ajax呼叫Web服務,需要把System.WebScript.Services.SrciptService這行的mark拿掉才可以。

Web服務

再來建立相對應的函數(方法),Ajax呼叫的網頁會是getData.asmx/函數(方法)

如需要共用Session內容,則需在WebMethod加上enableSession:true才可

WebMethod Session:true

Read More

jsp簡單留言板

這個範例有新增留言、查詢留言及留言分頁顯示等功能,後台的管理還沒有建置完成,留言者需要填入標題、顯示名稱、電話、信箱及留言內容,其中電話與電子信箱不顯示在留言列表中,電話及信箱可以為之後後台回覆寄信連絡使用。

當然這還有需多可以增加的功能,像是留言通知、隱私留言、留言刪除等,之後會再慢慢增加。

資料庫使用MySQL資料庫,使用JDBC來連接資料庫(DataSource方式),記錄檔則是使用log4j。

在新增留言部份,submit之前會先檢查是否有未填欄位,如果檢查通過則會自動建立IFrame來給這個form的target使用,新增完成後會自動回到留言列表的頁面。

留言版留言

查詢留言會對資料的標題及留言內容進行比對,有相同資料就會顯示查詢的結果,如果想進階做一個Search-Engine則可以參考建立自己的搜尋引擎

留言板查詢

Read More

[jQuery]圖片(相片)透明度Show幻燈片效果

這一個效果很像是flash做出來的,可以用在形象產品或圖片上,當滑鼠滑入圖片時會慢慢變清楚,而滑鼠移開後,又會自動淡出到原本的透明度,當點擊照片時,又利用ThickBox(Lightbox)來顯示大張的圖片。

用到的jQuery效果有hover(滑入function,滑出function),fadeTo(速度,透明度[0-1])

樣式如下:

圖片一開始會被亂數速度變透明,如果不想要此效果,只要把速度調整一下,或是直接css設定透明度都可以。

jQueryAnimate8.jpg

Read More

[jQuery]照片展示animate左右及上下移動

在前一篇[jQuery]利用animate來製作左右移動圖片展示器有利用jQuery來製作Animate效果,來製作左右移動圖片的照片或產品展示器,不過就只能針對同種分類或同性資的照片來做效果,如果有多種分類照片或產品就需要再做一份一樣的內容,這裡提供一個解決的方案,再做一次Animate,不過這次是上下移動來選擇不同列的圖片(照片)資料。

不同分類的圖片,利用不同的ul來分開,然後在ul的前面再加上一個Div來做上下移動的框架,左右移動則是利用ul這個tag,當移動到那一列的框架,把index記錄起來,如此左移及右移按鈕才可針對目前列來做移動。

ul及img都有title這個屬性,所以利用此屬性來當上方分類名稱。

效果截圖如下:

jQueryAnimate3.png

Read More

[jQuery]利用animate來製作左右移動圖片展示器

這個範例應該有很多人做過了,十分實用,如果把圖片縮小些,然後再加上燈箱的效果,應該可以拿來當展示產品或是照片等資訊,這個範例的發想是由男丁格爾的範例[jQ]用 jQuery 做廣告 – 上下垂直選項式廣告輪播來做修改的。

jQuery-Animate-API用法animate({css內容},[速度(整數)],[easing(linear/easein)],[callback])

想法,外層利用一個Div框住要製作動畫的內容,設定css的position: relative;然後內層的資料都用position: absolute;來設定left及top的pixel,如此可以把元件浮在最外層Div框的相對位置。

需要二個按鈕,浮在左邊及右邊,設定動作向左移及向右移。

畫面如下:範例網址

img元件設定title屬性的話,那文字會顯示在圖片下方一條bar上

jQueryAnimate1.png

Read More