Jquery+ashx实现无刷新评论

 

原文地址：http://www.cnblogs.com/fengzheng/archive/2011/09/23/2185092.html

目的：实现无刷新提交用户评论  无刷新显示评论信息

必备文件：jquery.js   jquery.form.js(表单插件）

核心技术：jquery +ajax+json

文件：showTalk.aspx (显示页面，用于显示评论信息以及发表评论）

　　Update.ashx (用于增加评论到数据库中，后台处理程序）

　　GetAllTalk.ashx （用于获取所有的评论并转换为json格式）

(showTalk.aspx)文件内容：

此文件中要引用jquery.js 和jquery.form.js 。注：这两个引用有先后顺序，jquery.js在jquery.form.js之前。

<SPAN style="COLOR: #008080"></SPAN>

View Code

 1 1 <script type="javascript">
 2 2 $(document).ready(function(){
 3 　　/** 页面初始化  加载评论信息**/
 4 　　//getstr();
 5 　　//setInterval("getstr()",20000);
 6 
 7 　　getJSONdata();
 8 　　setInterval("getJSONdata()",20000);
 9 　　
10 　　
11 　　/**新增评论信息**/
12 　　var options = { success:function(responseText,statusText){
13 　　　　　　if(statusText == "success"){
14 　　　　　　　　//alert("评论成功");
15 　　　　　　　　}
16 　　　　}
17 　　　　}
18 　　　　$("#ti").click(function(){
19 　　　　　　　　$("#talk_form").ajaxSubmit(options); //获取表单提交 jquery.form.js中的ajaxSubmit方法
20 　　　　　　　　getJSONdata(); //提交评论时立即重新获取评论
21 　　　　　　　　//or
22 　　　　　　　　getstr();
23 　　　　});
24 });
25 
26 /**下面是获取后台拿到的json的两种方法**/
27 //方法一：用getJSON方法 此方法也是jquery提供
28 　　function getstr(){
29 　　　　$("#first").empty();  //显示评论前先清除 避免重复显示 注：此方法会造成屏闪(效过不佳，待改进）
30 　　　　$.getJSON("GetAllTalk.ashx",function(json){
31 　　　　　　$.each(json,function(i,key){
32 　　　　　　　　var zone = "<div class='talk_zone_pre'><div class='u_name_date'><span class='u_name'>" + json[i].TalkName + 
33 　　　　　　　　　　　　"</span><span class='date'>" + json[i].TalkTime + "</span><div class='u_content'>" + json[i].TalkContent + 
34 　　　　　　　　　　　　"</div></div>";
35 　　　　　　　　$("#first").append(zone);
36 　　　　});
37 　　}
38 
39 　//方法二：用$.ajax方法获取json
40 　　function getJSONdata(){
41 　　　　$("#first").empty();  //显示评论前先清除 避免重复显示 注：此方法会造成屏闪(效过不佳，待改进）
42 　　　　$.ajax({
43 　　　　　　　　type:'post',  //请求方式
44 　　　　　　　　dataType:'json', //数据格式
45 　　　　　　　　url:'GetAllTalk.ashx',
46 　　　　　　　　success:function(json){
47 　　　　　　　　　　$.each(json,function(i,key){
48 　　　　　　　　　　　　var zone = "<div class='talk_zone_pre'><div class='u_name_date'><span class='u_name'>" + json[i].TalkName + 
49 　　　　　　　　　　　　"</span><span class='date'>" + json[i].TalkTime + "</span><div class='u_content'>" + json[i].TalkContent + 
50 　　　　　　　　　　　　"</div></div>";
51 　　　　　　　　　　$("#first").append(zone);
52 　　　　　　　　　　});
53 　　　　　　　　}
54 　　　　　　});
55 　　　　}
56 3 </script>

<BR><BR><BR>

 1 <form id="talk_form" action="Update.ashx" method="post">
 2 <div class="content">
 3 <%-- 用于显示评论  此处占位 --%>
 4      <div id="first" style="width:680px; height:390px;"></div>
 5 　　　<div class="talk_zone">
 6 　　　　<table widht="100%">
 7 　　　　　　<tr><td>昵称：</td><td><input type="text" id="u_name" name="u_name" /></td></tr>
 8 　　　　　　<tr><td>评论：</td><td><textarea id="u_content" name="u_content" cols="60" rows="10"></textarea></td></tr>　　
 9 　　　　　　<tr><td colspan="2" align="center"><input type="button" id="ti" value="提交" /></td></tr>
10 　　　　</table>
11 　　　</div>
12  <div>
13 </form>

<BR><BR class=brush:css;gutter:false;><%-- 样式--%>

 1 <style type="text/css">
 2 *{ margin:0 auto;}
 3 .content
 4 {
 5        width:700px;
 6         height:auto;
 7 }
 8 .talk_zone_pre
 9 {
10 　　height:auto;
11 　　widht:700px;
12 　　margin:2px auto;
13 　　font-size:12px;
14 　　border-bottom:1px solid #3ddddc;
15 　　float:left;
16 }
17 .u_name_date
18 {
19 　　width:680px;
20 　　height:30px;
21 　　color:#333000;
22 }
23 .u_name
24 　{
25 　　float:left;
26 　　width:100px;
27 　　line-height:30px;
28 　　vertical-align:middle;
29 　　font-weight:bold;
30 }
31 .date
32 {
33 　　float:right;
34 　　width:150px;
35 　　line-height:30px;
36 　　vertical-align:middle;
37 }
38 .u_content
39 {
40 　　width:680px;
41 　　padding:5px;
42 　　border:1px solid #000000;
43 　　float:left;
44 　　color:Gray;
45 }
46 .talk_zone
47 {
48 　　border:1px solid #663333;
49 　　float:left;
50 }
51  </style>

<BR><BR>

在介绍两个后台处理页面时，先说一下数据库表的结构

字段名称	字段类型
Id	int
TalkName	nvarchar
TalkTime	datetime
TalkContent	text

Update.ashx文件：

其中只有一个方法：

 1 public bool AddTalk(string name,string content)
 2 {
 3    using(SqlConnection conn = new SqlConnection("连接字符串"))
 4      {
 5        　　conn.open();
 6        　　string sql = "INSERT INTO [talks] (TalkName,TalkTime,TalkContent) VALUES (@TalkName,@TalkTime,@TalkContent)";
 7     　　　 SqlCommand cmd = new SqlCommand(sql,conn);
 8     　　　 cmd.Parameters.AddWithValue("@TalkName",name);
 9 　　　　   cmd.Parameters.AddWithValue("@TalkTime",DateTime.Now.Date);
10 　　　　   cmd.Parameters.AddWithValue("@TalkContent",content);
11    　　    if(cmd.ExecuteNonQuery()>0）
12               return true;
13     　　   else
14               return false;
15       }
16 }
17 
18 
19 //在ProcessRequest事件中接收评论人名称及内容 并调用上面的方法
20 string U_name = context.Request["u_name"];
21 string U_content = context.Request["u_content"];
22 AddTalk(U_name ,U_content );

GetAllTalk.ashx （用于获取所有的评论并转换为json格式）

此文件中提供一个将从数据库表中拿到的记录转换为json格式的方法：

//获取评论记录 
public DataTable GetAllContent()
{
　　using(SqlConnection conn = new SqlConnection("连接字符串"))
   {
      conn.open();
      string sql ="SELECT TalkName,TalkTime,TalkContent FROM [talks]";
  　　 DataSet dset = new DataSet();
　　   SqlDataAdapter ada = new SqlDataAdapter(sql ,conn);
      ada.Fill(dset);
      return dset.Tables[0];
   }
}

//重点：将得到的DataTable转换为json
public string GetJson(DataTable dt)
{
     int rowNum = 0;
　　  StringBuilder sb = new StringBuilder();
　　  sb.Append("[");
　　  foreach(DataRow row in dt.Rows)
       {
   　　　　if(rowNum>0)
          sb.Append(",");  //逗号不加在最后一项
   　　　　sb.Append("{");
          for(int i=0;i<dt.Columns.Count;i++)
　　　　　　　　{
　　　　　　　　　　if(i>0)
   　　　　　　　　     sb.Append(",");
　　　　　　　　　　sb.Append("\"" + dt.Columns[i].ColumnName + "\":\"" +　row[i].ToString() + "\"");
　　　　　　　　}
　　　　　　sb.Append("]");
　　　　　　return sb.ToString();
　　　　}
}

在ProcessRequest事件中调用上面的方法
DataTable dt = GetAllContent();
string json = GetJson(dt);
context.Response.Write(json);