ajax 笔记－－不刷新实现简单的留言版 guestBook
下面是guest Book.aspx.cs代码
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Text;
using GetCommand;
public partial class Ajax_guestBook : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!this.Page.IsPostBack)
{
AjaxPro.Utility.RegisterTypeForAjax(typeof(Ajax_guestBook));
}
}
/// <summary>
/// 添加留言信息
/// </summary>
/// <param name="txtNickName">用户昵称</param>
/// <param name="txtQQ">QQ号</param>
/// <param name="txtMSN">MSN号</param>
/// <param name="txtTel">电话</param>
/// <param name="txtContent">内容</param>
/// <returns>count</returns>
[AjaxPro.AjaxMethod]
public int InsertGuestBook(string txtNickName,string txtQQ,string txtMSN,string txtTel,string txtContent)
{
string NickName = txtNickName.Trim();
string QQ = txtQQ.Trim();
string MSN = txtMSN.Trim();
string Tel = txtTel.Trim();
string Content = GeneralMethod.Encode(txtContent);
string sqlString = "insert into guestBook values('" + NickName + "','" + QQ + "','" + MSN + "','" + Tel + "','" + Content + "','" + DateTime.Now.ToString() +"')";
//这里你得你自己写一个,我这里自己早就写了一个GetCommand把 ExecuteNonQuery( 封装到里面去了
int count = SetConnection.ExecuteNonQuery(sqlString);
return count;
}
/// <summary>
/// 把所有留言信息取出来
/// </summary>
/// <returns>AllGuestBookInformation</returns>
[AjaxPro.AjaxMethod]
public string getGuestBook()
{
//这里你得你自己写一个,我这里自己早就写了一个GetCommand把 DataSet 封装到里面去了.
DataSet ds = SetConnection.getDataSet("SELECT * FROM guestBook order by IssueTime Desc", "guestBook");
StringBuilder NickName = new StringBuilder();
StringBuilder QQ = new StringBuilder();
StringBuilder Tel = new StringBuilder();
StringBuilder MSN = new StringBuilder();
StringBuilder Content = new StringBuilder();
StringBuilder IssueTime = new StringBuilder();
foreach (DataRow dr in ds.Tables["guestBook"].Rows)
{
NickName.Append(dr["NickName"].ToString()).Append("|");
QQ.Append(dr["QQ"].ToString()).Append("|");
Tel.Append(dr["Tel"].ToString()).Append("|");
MSN.Append(dr["MSN"].ToString()).Append("|");
Content.Append(dr["Content"].ToString()).Append("|");
IssueTime.Append(dr["IssueTime"].ToString()).Append("|");
}
return NickName.ToString() + "~" + QQ.ToString() + "~" + Tel.ToString() + "~" + MSN.ToString() + "~" + Content.ToString() + "~" + IssueTime.ToString();
}
}
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="guestBook.aspx.cs" Inherits="Ajax_guestBook" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>留言簿</title>
<script type="text/javascript" language="javascript" src="../JavaScripts/guestBook.js">
</script>
</head>
<body onload="btn_ShowGuestBookContent();">
<form id="form1" runat="server" >
<div>
<table border="1">
<tr>
<td style="width: 100px">
昵称：</td>
<td style="width: 100px">
<input type="text" onmouseover="Clear_txtNickName();" id="txtNickName" value="小土呢" />
</td>
<td style="width: 100px">
QQ</td>
<td style="width: 100px">
<input type="text" onmouseover="Clear_txtQQ();" id="txtQQ" value="281827047" /></td>
</tr>
<tr>
<td style="width: 100px">
电话号码：</td>
<td style="width: 100px">
<input type="text" onmouseover="Clear_txtTel();" id="txtTel" value="13733377325" /></td>
<td style="width: 100px">
MSN</td>
<td style="width: 100px">
<input type="text" onmouseover="Clear_txtMSN();" id="txtMSN" value="xiaotuni@hotmail.com" /></td>
</tr>
<tr>
<td style="width: 100px; height: 42px;">
内容：</td>
<td colspan="3" style="height: 42px">
<textarea cols="6" rows="6" id="txtContent" style ="width:100%"> 这是一简单无刷新实现留言版的例子</textarea>
</td>
</tr>
<tr>
<td style="width: 100px">
</td>
<td colspan="3">
<input type="button" onclick="AddGuestBook();" value="添加留言信息" id="btnAddGuestBook" />
</td>
</tr>
<tr>
<td style="width: 100px">
</td>
<td colspan="3">
Copyright ：<a href ="http://xiaotuni.w1.kingtoo.com">xiaotuni</a></td>
</tr>
</table>
</div>
<div id ="GuestBook">
</div>
</form>
</body>
</html>
－－－－－－－－－－－－－－－－－－－－－－－－－－－－
下面是js代码
// JScript 文件
function AddGuestBook()
{
var Nick = document.getElementById("txtNickName").value;
var QQ = document.getElementById("txtQQ").value;
var Tel = document.getElementById("txtTel").value;
var MSN = document.getElementById("txtMSN").value;
var Content = document.getElementById("txtContent").value;
if( Nick == "")
{
alert("昵称不能为空");
}
else
{
if(Content == "")
{
alert("内容不能为空");
}
else
{
var response = Ajax_guestBook.InsertGuestBook(Nick,QQ,MSN,Tel,Content)
if(response.value == 1)
{
alert("添加成功");
}
else
{
alert("添加失败");
}
}
}
//显示所有留言信息
btn_ShowGuestBookContent();
//清空操作
btn_ClearControlsValue();
}
function btn_ClearControlsValue()
{
document.getElementById("txtNickName").value = "";
document.getElementById("txtQQ").value = "";
document.getElementById("txtTel").value = "";
document.getElementById("txtMSN").value = "";
document.getElementById("txtContent").value = "";
}
function btn_ShowGuestBookContent()
{
var response = Ajax_guestBook.getGuestBook();
if(response.value == null)
{
alert("出错了" + response.value);
}
else
{
BinderGuestBook(response);
}
}
function BinderGuestBook(response)
{
var AllContent = response.value.split("~");
var NickName = AllContent[0].split("|");
var QQ = AllContent[1].split("|");
var Tel = AllContent[2].split("|")
var MSN = AllContent[3].split("|");
var Content = AllContent[4].split("|");
var IssueTime = AllContent[5].split("|");
var aa ="";
for(var i = 0 ; i < NickName.length - 1 ; i++)
{
aa += '<table border="0" cellpadding="1" cellspacing="1"><tr><td>昵称：</td><td>' + NickName[i] +'<td >QQ</td><td >' + QQ[i] + '</td></tr><tr><td >电话号码：</td><td >' + Tel[i] + '</td><td >MSN</td><td >'+MSN[i]+'</td></tr><tr><td >内容</td><td colspan="3" >'+Content[i] + '</td></tr><tr><td >时间：</td><td colspan="3">'+IssueTime[i] +'</td></tr></table>'
}
document.getElementById("GuestBook").innerHTML = aa;
}
var statue = 1;
function Clear_txtNickName()
{
if(statue == 1)
{
document.getElementById("txtNickName").value = "";
}
}
function Clear_txtQQ()
{
document.getElementById("txtQQ").value = "";
}
function Clear_txtTel()
{
document.getElementById("txtTel").value = "";
}
function Clear_txtMSN()
{
document.getElementById("txtMSN").value = "";
}
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
数据guestBook表结构
USE [People]
GO
/****** 对象: Table [dbo].[GuestBook] 脚本日期: 10/21/2006 22:21:21 ******/
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
CREATE TABLE [dbo].[GuestBook](
[guestBookID] [int] IDENTITY(1,1) NOT NULL,
[nickName] [nvarchar](16) COLLATE Chinese_PRC_CI_AS NULL,
[QQ] [nvarchar](11) COLLATE Chinese_PRC_CI_AS NULL,
[MSN] [nvarchar](35) COLLATE Chinese_PRC_CI_AS NULL,
[Tel] [nvarchar](13) COLLATE Chinese_PRC_CI_AS NULL,
[Content] [nvarchar](4000) COLLATE Chinese_PRC_CI_AS NULL,
[IssueTime] [datetime] NULL,
PRIMARY KEY CLUSTERED
(
[guestBookID] ASC
)WITH (IGNORE_DUP_KEY = OFF) ON [PRIMARY]
) ON [PRIMARY]
using System;using System.Data;using System.Configuration;using System.Collections;using System.Web;using System.Web.Security;using System.Web.UI;using System.Web.UI.WebControls;using System.Web.UI.WebControls.WebParts;using System.Web.UI.HtmlControls;using System.Text;using GetCommand; public partial class Ajax_guestBook : System.Web.UI.Page{
protected void Page_Load(object sender, EventArgs e) {
if (!this.Page.IsPostBack) { AjaxPro.Utility.RegisterTypeForAjax(typeof(Ajax_guestBook)); } } /// <summary> /// 添加留言信息 /// </summary> /// <param name="txtNickName">用户昵称</param> /// <param name="txtQQ">QQ号</param> /// <param name="txtMSN">MSN号</param> /// <param name="txtTel">电话</param> /// <param name="txtContent">内容</param> /// <returns>count</returns> [AjaxPro.AjaxMethod] public int InsertGuestBook(string txtNickName,string txtQQ,string txtMSN,string txtTel,string txtContent) { string NickName = txtNickName.Trim(); string QQ = txtQQ.Trim(); string MSN = txtMSN.Trim(); string Tel = txtTel.Trim(); string Content = GeneralMethod.Encode(txtContent); string sqlString = "insert into guestBook values('" + NickName + "','" + QQ + "','" + MSN + "','" + Tel + "','" + Content + "','" + DateTime.Now.ToString() +"')"; //这里你得你自己写一个,我这里自己早就写了一个GetCommand把 ExecuteNonQuery( 封装到里面去了 int count = SetConnection.ExecuteNonQuery(sqlString); return count; } /// <summary> /// 把所有留言信息取出来 /// </summary> /// <returns>AllGuestBookInformation</returns> [AjaxPro.AjaxMethod] public string getGuestBook() { //这里你得你自己写一个,我这里自己早就写了一个GetCommand把 DataSet 封装到里面去了. DataSet ds = SetConnection.getDataSet("SELECT * FROM guestBook order by IssueTime Desc", "guestBook"); StringBuilder NickName = new StringBuilder(); StringBuilder QQ = new StringBuilder(); StringBuilder Tel = new StringBuilder(); StringBuilder MSN = new StringBuilder(); StringBuilder Content = new StringBuilder(); StringBuilder IssueTime = new StringBuilder(); foreach (DataRow dr in ds.Tables["guestBook"].Rows) { NickName.Append(dr["NickName"].ToString()).Append("|"); QQ.Append(dr["QQ"].ToString()).Append("|"); Tel.Append(dr["Tel"].ToString()).Append("|"); MSN.Append(dr["MSN"].ToString()).Append("|"); Content.Append(dr["Content"].ToString()).Append("|"); IssueTime.Append(dr["IssueTime"].ToString()).Append("|"); } return NickName.ToString() + "~" + QQ.ToString() + "~" + Tel.ToString() + "~" + MSN.ToString() + "~" + Content.ToString() + "~" + IssueTime.ToString(); }}－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
下面是 guestBook.aspx html代码
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="guestBook.aspx.cs" Inherits="Ajax_guestBook" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" ><head runat="server"> <title>留言簿</title> <script type="text/javascript" language="javascript" src="../JavaScripts/guestBook.js"> </script></head><body onload="btn_ShowGuestBookContent();"> <form id="form1" runat="server" > <div> <table border="1"> <tr> <td style="width: 100px"> 昵称：</td> <td style="width: 100px"> <input type="text" onmouseover="Clear_txtNickName();" id="txtNickName" value="小土呢" /> </td> <td style="width: 100px"> QQ</td> <td style="width: 100px"> <input type="text" onmouseover="Clear_txtQQ();" id="txtQQ" value="281827047" /></td> </tr> <tr> <td style="width: 100px"> 电话号码：</td> <td style="width: 100px"> <input type="text" onmouseover="Clear_txtTel();" id="txtTel" value="13733377325" /></td> <td style="width: 100px"> MSN</td> <td style="width: 100px"> <input type="text" onmouseover="Clear_txtMSN();" id="txtMSN" value="xiaotuni@hotmail.com" /></td> </tr> <tr> <td style="width: 100px; height: 42px;"> 内容：</td> <td colspan="3" style="height: 42px"> <textarea cols="6" rows="6" id="txtContent" style ="width:100%"> 这是一简单无刷新实现留言版的例子</textarea> </td> </tr> <tr> <td style="width: 100px"> </td> <td colspan="3"> <input type="button" onclick="AddGuestBook();" value="添加留言信息" id="btnAddGuestBook" /> </td> </tr> <tr> <td style="width: 100px"> </td> <td colspan="3"> Copyright ：<a href ="http://xiaotuni.w1.kingtoo.com">xiaotuni</a></td> </tr> </table> </div> <div id ="GuestBook"> </div> </form></body></html>下面是js代码
// JScript 文件function AddGuestBook(){ var Nick = document.getElementById("txtNickName").value; var QQ = document.getElementById("txtQQ").value; var Tel = document.getElementById("txtTel").value; var MSN = document.getElementById("txtMSN").value; var Content = document.getElementById("txtContent").value; if( Nick == "") { alert("昵称不能为空"); } else { if(Content == "") { alert("内容不能为空"); } else { var response = Ajax_guestBook.InsertGuestBook(Nick,QQ,MSN,Tel,Content) if(response.value == 1) { alert("添加成功"); } else { alert("添加失败"); } } } //显示所有留言信息 btn_ShowGuestBookContent(); //清空操作 btn_ClearControlsValue();}function btn_ClearControlsValue(){ document.getElementById("txtNickName").value = ""; document.getElementById("txtQQ").value = ""; document.getElementById("txtTel").value = ""; document.getElementById("txtMSN").value = ""; document.getElementById("txtContent").value = "";}function btn_ShowGuestBookContent(){ var response = Ajax_guestBook.getGuestBook(); if(response.value == null) { alert("出错了" + response.value); } else { BinderGuestBook(response); }}function BinderGuestBook(response){ var AllContent = response.value.split("~"); var NickName = AllContent[0].split("|"); var QQ = AllContent[1].split("|"); var Tel = AllContent[2].split("|") var MSN = AllContent[3].split("|"); var Content = AllContent[4].split("|"); var IssueTime = AllContent[5].split("|"); var aa =""; for(var i = 0 ; i < NickName.length - 1 ; i++) { aa += '<table border="0" cellpadding="1" cellspacing="1"><tr><td>昵称：</td><td>' + NickName[i] +'<td >QQ</td><td >' + QQ[i] + '</td></tr><tr><td >电话号码：</td><td >' + Tel[i] + '</td><td >MSN</td><td >'+MSN[i]+'</td></tr><tr><td >内容</td><td colspan="3" >'+Content[i] + '</td></tr><tr><td >时间：</td><td colspan="3">'+IssueTime[i] +'</td></tr></table>' } document.getElementById("GuestBook").innerHTML = aa;}var statue = 1;function Clear_txtNickName(){ if(statue == 1) { document.getElementById("txtNickName").value = ""; }}function Clear_txtQQ(){ document.getElementById("txtQQ").value = "";}function Clear_txtTel(){ document.getElementById("txtTel").value = "";}function Clear_txtMSN(){ document.getElementById("txtMSN").value = "";}数据guestBook表结构
USE [People]GO/****** 对象: Table [dbo].[GuestBook] 脚本日期: 10/21/2006 22:21:21 ******/SET ANSI_NULLS ONGOSET QUOTED_IDENTIFIER ONGOCREATE TABLE [dbo].[GuestBook]( [guestBookID] [int] IDENTITY(1,1) NOT NULL, [nickName] [nvarchar](16) COLLATE Chinese_PRC_CI_AS NULL, [QQ] [nvarchar](11) COLLATE Chinese_PRC_CI_AS NULL, [MSN] [nvarchar](35) COLLATE Chinese_PRC_CI_AS NULL, [Tel] [nvarchar](13) COLLATE Chinese_PRC_CI_AS NULL, [Content] [nvarchar](4000) COLLATE Chinese_PRC_CI_AS NULL, [IssueTime] [datetime] NULL,PRIMARY KEY CLUSTERED ( [guestBookID] ASC)WITH (IGNORE_DUP_KEY = OFF) ON [PRIMARY]) ON [PRIMARY]
浙公网安备 33010602011771号