jQuery+Ajax留言系統(tǒng)代碼

 在整理以前資料時(shí)偶爾發(fā)現(xiàn)有一個(gè)效果不錯(cuò)的Ajax留言板程序，是以前一個(gè)系統(tǒng)的一個(gè)部分。今天抽了點(diǎn)時(shí)間，將其獨(dú)立成一個(gè)項(xiàng)目，與大家分享下，先來(lái)看下具體的效果圖：


思路很簡(jiǎn)單，就是一般的Ajax系統(tǒng)，主要是里面的一些jQuery的特效確實(shí)不錯(cuò)。下面是實(shí)現(xiàn)步驟：

環(huán)境：Visual Studio 2010 + SQL Server 2008 + jQuery1.4.1

1. 首先設(shè)計(jì)數(shù)據(jù)庫(kù)，很簡(jiǎn)單，留言人、留言時(shí)間、留言內(nèi)容、頭像等字段，具體的數(shù)據(jù)庫(kù)表創(chuàng)建語(yǔ)句如下

代碼
CREATE TABLE [dbo].[tb_message_board](
[MSG_ID] [int] IDENTITY(1,1) NOT NULL,
[MSG_USER] [nchar](20) NULL,
[MSG_FACE] [nchar](50) NULL,
[MSG_CONTENT] [nchar](100) NULL,
[MSG_TIME] [datetime] NULL
) ON [PRIMARY]
大家可以在自己機(jī)器上執(zhí)行該SQL ，你項(xiàng)目的數(shù)據(jù)庫(kù)，同時(shí)要修改Web.config中的數(shù)據(jù)庫(kù)名；


2. 創(chuàng)建ASP.NET 應(yīng)用程序，默認(rèn)已經(jīng)有母版頁(yè)了，我們只要添加一個(gè)使用了默認(rèn)母版頁(yè)的Web頁(yè)面，取名為MessageBoard；


3. 創(chuàng)建一些常用的文件夾，如images文件夾，用來(lái)存放項(xiàng)目中使用的圖片，我這邊最后創(chuàng)建后的解決方案管理器如下圖：



4. 使用div 及css 布局你的留言板頁(yè)面，我之前參考了http://www.css88.com/demo/ajax-deleet 中的布局；


5. 當(dāng)初為了方便起見，使用了最基礎(chǔ)的SQL Helper作為數(shù)據(jù)操作類，下面是該 SQL Helper類的代碼：


代碼
/*
* 文件名：SQLHelper
* 說(shuō)明：SQL Server幫助類
* 作者：Alexis
* 網(wǎng)站：http://www.cnblogs.com/alexis
* 創(chuàng)建時(shí)間：20100428
* */
using System;
using System.Data;
using System.Configuration;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
using System.Data.SqlClient;


/// <summary>
///SQLHelper 的摘要說(shuō)明
/// </summary>
public class SQLHelper
{
SqlConnection conn;

public SQLHelper()
{
string connectionString = System.Web.Configuration.WebConfigurationManager.ConnectionStrings["MessageBoard"].ToString();
conn = new SqlConnection(connectionString);
}

/// <summary>
/// 執(zhí)行SQL命令,將數(shù)據(jù)賦給數(shù)據(jù)集的引用
/// </summary>
public bool RunSQL(string cmdText, ref DataTable dt)
{
try
{
conn.Open();
SqlCommand cmd = new SqlCommand(cmdText, conn);
SqlDataAdapter sda = new SqlDataAdapter(cmd);
DataSet ds1 = new DataSet();
sda.Fill(ds1);
dt = ds1.Tables[0];
}
catch (SqlException se)
{
return false;
throw new Exception(se.Message, se);
}
return true;
}

/// <summary>
/// 執(zhí)行帶參數(shù)的SQL語(yǔ)句
/// </summary>
/// <param name="cmdText"></param>
/// <param name="sp"></param>
public bool RunSQL(string cmdText, SqlParameter[] sp)
{
try
{
if(conn.State== ConnectionState.Closed)
conn.Open();
SqlCommand cmd = new SqlCommand(cmdText, conn);
if (sp != null)
{
for (int i = 0; i < sp.Length; i++)
{
cmd.Parameters.Add(sp[i]);//將參數(shù)加到Command中
}
}
cmd.ExecuteNonQuery();
}
catch (SqlException se)
{
return false;
throw new Exception(se.Message, se);

}
finally
{
conn.Close();
}
return true;

}

public DataTable getDataTable(string cmdText)
{
DataTable dt = null;
try
{
if (conn.State == ConnectionState.Closed)
conn.Open();
SqlCommand cmd = new SqlCommand(cmdText, conn);
DataSet ds = new DataSet();
SqlDataAdapter da = new SqlDataAdapter(cmd);
da.Fill(ds);
dt = ds.Tables[0];
}
catch (SqlException se)
{
throw new Exception(se.Message, se);
}
finally
{
conn.Close();
}
return dt;
}
}

6. 創(chuàng)建數(shù)據(jù)庫(kù)對(duì)象的實(shí)體類，也是十分簡(jiǎn)單的，就是對(duì)應(yīng)數(shù)據(jù)庫(kù)的字段；


代碼
/*
* 文件名：Message
* 說(shuō)明：Message實(shí)體類
* 作者：Alexis
* 網(wǎng)站：http://www.cnblogs.com/alexis
* 創(chuàng)建時(shí)間：20100428
* */
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace MessageBoard
{
/// <summary>
/// 留言類
/// </summary>
public class Message
{
private int id;//留言的標(biāo)識(shí)

public int Id
{
get { return id; }
set { id = value; }
}

private string msg_content;//留言的內(nèi)容

public string Msg_content
{
get { return msg_content; }
set { msg_content = value; }
}

private string msg_nickname;// 昵稱

public string Msg_nickname
{
get { return msg_nickname; }
set { msg_nickname = value; }
}

private string msg_face;//選擇的頭像

public string Msg_face
{
get { return msg_face; }
set { msg_face = value; }
}

private DateTime msg_time;//留言的時(shí)間

public DateTime Msg_time
{
get { return msg_time; }
set { msg_time = value; }
}

}
}

7.開始著手寫js代碼，在寫ajax事件之前，先來(lái)看下兩個(gè)jQuery插件，首先是jQuery文本框水印效果，效果圖如下：




使用方法：添加watermarkinput 的js引用，為想要實(shí)現(xiàn)水印效果的文本框加上id如，

<input type="text" id="msg_nickname" size="40" /> 之后再js代碼中寫如下的代碼以處理水印//處理水印
jQuery(function ($) {
$("#msg_nickname").Watermark("請(qǐng)輸入您的昵稱，如果不輸入則默認(rèn)為匿名");
});
function UseData() {
$.Watermark.HideAll(); //Do Stuff
$.Watermark.ShowAll();
}8. jQuery圖片縮放插件，jquery.imgzoom.js ，具體的效果：點(diǎn)擊圖標(biāo)的時(shí)候，圖片漸漸變大，直至原來(lái)的大小，如果是Gif圖片的話，效果會(huì)更好。

9. 編寫具體的Ajax代碼，使用jQuery框架將會(huì)節(jié)省很多的時(shí)間，當(dāng)我們點(diǎn)擊留言按鈕的時(shí)候，將一些信息收集起來(lái)，然后通過Ajax寫入數(shù)據(jù)庫(kù)，然后使用布局修改DOM來(lái)實(shí)現(xiàn)無(wú)刷新的效果，主要的代碼如下：

代碼
//使用ajax處理留言
$.ajax({
type: "POST",
url: "Ajax/MessageBoardHandler.ashx?action=add",
data: "msg_nickname=" + escape(msg_nickname) + "&msg_content=" + escape(msg_content) + "&msg_time=" + msg_time + "&msg_face=" + msg_face,
success: function (msg) {
//在table中新增一行
if (msg == "success") {
$('#messagelist').append("<div class='box clearfix' id=''><img src='" + msg_face +
"' alt='' width='50' height='50' class='avatar' /><div class='text'><strong><a href='#'>" + msg_nickname + "</a></strong><p>" + msg_content +"</p><div class='date'>"+msg_time+"</div></div></div>");
}
}
});
上面的一些變量重字面上也能知道是我們收集的信息，即要寫如數(shù)據(jù)庫(kù)的留言信息；


10. 編寫Ajax處理類的代碼，將信息插入數(shù)據(jù)庫(kù)，代碼如下：

代碼
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
string action = context.Request.Params["action"].ToString();//獲取想要做的操作

if (action == "add")//新增留言
{
Message message = new Message();//創(chuàng)建新的留言對(duì)象
message.Msg_nickname = context.Request.Params["msg_nickname"].ToString();//昵稱
message.Msg_content = context.Request.Params["msg_content"].ToString();//留言內(nèi)容
message.Msg_time = DateTime.Parse(context.Request.Params["msg_time"].ToString());//留言時(shí)間
message.Msg_face = context.Request.Params["msg_face"].ToString();//選擇的頭像
MessageAdd(message,context);
}
else if (action=="del")//刪除留言
{

}
}

/// <summary>
/// 新增留言
/// </summary>
/// <param name="message"></param>
private void MessageAdd(Message message, HttpContext context)
{
SQLHelper helper = new SQLHelper();
string cmdText = "INSERT INTO TB_MESSAGE_BOARD(MSG_USER,MSG_CONTENT,MSG_FACE,MSG_TIME) VALUES('" +
message.Msg_nickname + "','" + message.Msg_content + "','" + message.Msg_face + "','" + message.Msg_time + "')";
if(helper.RunSQL(cmdText, null))
{
context.Response.Write("success");
}
}
在這個(gè)類里面就用到了SQL Helper了；


11. 編寫MessageBoard的后臺(tái)代碼，我們?cè)诩虞d留言本頁(yè)面的時(shí)候，需要將已有的留言信息顯示在頁(yè)面中，


代碼
/*
* 文件名：MessageBoard
* 說(shuō)明：使用Ajax的留言板
* 作者：Alexis
* 網(wǎng)站：http://www.cnblogs.com/alexis
* 創(chuàng)建時(shí)間：20101226
* */
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data.SqlClient;
using System.Data;

namespace MessageBoard
{
public partial class MessageBoard : System.Web.UI.Page
{
protected DataTable dt;

protected void Page_Load(object sender, EventArgs e)
{
GetMessage();
}

//從數(shù)據(jù)庫(kù)中讀取留言信息
protected void GetMessage()
{
SQLHelper helper = new SQLHelper();
dt=helper.getDataTable("select * from tb_message_board");

}
}
}
12. 在前臺(tái)顯示這些數(shù)據(jù)，使用的內(nèi)部變量，即 <%=dt.Rows[i]["msg_time"]%>這種形式的代碼，詳細(xì)的代碼可以參考源文件