使用 Repeater方式和完全静态页面使用AJAX读取和提交数据

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('$'));
        }
 
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/kennyliu/p/3440384.html