1、使用Repeater方式:
Comments.aspx
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $("#btnPost").click(function () { $.post("Comments.ashx", { "msg": $("#txtconmment").val() }, function (data, status) { if (status != "success") { alert("发表失败请重试"); } if (data == "ok") { var newComment = $("<li>评论日期:" + timeStamp2String(new Date()) + ",IP:自己,内容:" + $("#txtconmment").val() + "</li>"); $("#ulComment").append(newComment); alert("发表成功"); } else { alert("评论内容有问题"); } }); }); }); function timeStamp2String(time) { var datetime = new Date(); datetime.setTime(time); var year = datetime.getFullYear(); var month = datetime.getMonth() + 1 < 10 ? "0" + (datetime.getMonth() + 1) : datetime.getMonth() + 1; var date = datetime.getDate() < 10 ? "0" + datetime.getDate() : datetime.getDate(); var hour = datetime.getHours() < 10 ? "0" + datetime.getHours() : datetime.getHours(); var minute = datetime.getMinutes() < 10 ? "0" + datetime.getMinutes() : datetime.getMinutes(); var second = datetime.getSeconds() < 10 ? "0" + datetime.getSeconds() : datetime.getSeconds(); return year + "/" + month + "/" + date + " " + hour + ":" + minute + ":" + second; } </script> <style type="text/css"> #txtconmment { height: 139px; 326px; } </style> </head> <body> <form id="form1" runat="server"> <div> <br /> Repeater方式加载评论:<br /> <asp:ObjectDataSource ID="ObjectDataSource1" runat="server" DeleteMethod="Delete" InsertMethod="Insert" OldValuesParameterFormatString="original_{0}" SelectMethod="GetData" TypeName="ajaxApp.DataSetCommentsTableAdapters.commentsTableAdapter" UpdateMethod="Update"> <DeleteParameters> <asp:Parameter Name="Original_id" Type="Int64" /> </DeleteParameters> <InsertParameters> <asp:Parameter Name="comments" Type="String" /> <asp:Parameter Name="ipAddress" Type="String" /> <asp:Parameter Name="dateTime" Type="DateTime" /> </InsertParameters> <UpdateParameters> <asp:Parameter Name="comments" Type="String" /> <asp:Parameter Name="ipAddress" Type="String" /> <asp:Parameter Name="dateTime" Type="DateTime" /> <asp:Parameter Name="Original_id" Type="Int64" /> </UpdateParameters> </asp:ObjectDataSource> <ul id="ulComment"> <asp:Repeater ID="Repeater1" runat="server" DataSourceID="ObjectDataSource1"> <ItemTemplate> <li>评论日期:<%#Eval("dateTime") %>,IP:<%#Eval("ipAddress") %>, 内容:<%#Eval("comments") %></li> </ItemTemplate> </asp:Repeater> </ul> <br /> <br /> <br /> <textarea id="txtconmment"></textarea> <br /> <br /> <input id="btnPost" type="button" value="提交" /> </div> </form> </body> </html>
Comments.ashx页面代码:接合使用数据集生成
public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/plain"; string msg = context.Request["msg"]; new commentsTableAdapter().Insert(msg,context.Request.UserHostAddress,DateTime.Now); context.Response.Write("ok"); }
2、完全AJAX方式显示评论内容:
Comments.htm页面:
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $.post("GetComments.ashx", function (data, status) { if (status != "success") { $("#ulComment").append($("<li>加载失败</li>")); return; } var lines = data.split("$"); for (var i = 0; i < lines.length; i++) { var line = lines[i]; var fields = line.split("|"); var comment = $("<li>IP地址:" + fields[0] + "发帖日期:" + fields[1] + "内容:" + fields[2] + "</li>"); $("#ulComment").append(comment); } }); }) </script> </head> <body> <ul id="ulComment"> </ul> </body> </html>
GetComments.ashx页面:
/// <summary> /// GetComments 的摘要说明 /// </summary> public class GetComments : IHttpHandler { //返回的格式———评论人IP|日期|内容$ public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/plain"; //context.Response.Write("Hello World"); var comments = new commentsTableAdapter().GetData(); StringBuilder sb = new StringBuilder(); foreach (var comment in comments) { sb.Append(comment.ipAddress).Append("|").Append(comment.dateTime).Append("|") .Append(comment.comments).Append("$"); } context.Response.Write(sb.ToString().Trim('$')); }