原文地址: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);