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() +  <  ? "" + (datetime.getMonth() + ) : datetime.getMonth() + ;

            var date = datetime.getDate() <  ? "" + datetime.getDate() : datetime.getDate();

            var hour = datetime.getHours() <  ? "" + datetime.getHours() : datetime.getHours();

            var minute = datetime.getMinutes() <  ? "" + datetime.getMinutes() : datetime.getMinutes();

            var second = datetime.getSeconds() <  ? "" + datetime.getSeconds() : datetime.getSeconds();

            return year + "/" + month + "/" + date + " " + hour + ":" + minute + ":" + second;

        }

    </script>

    <style type="text/css">

        #txtconmment {

            height: 139px;

            width: 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 = ; i < lines.length; i++) {

                var line = lines[i];

                var fields = line.split("|");

                var comment = $("<li>IP地址：" + fields[] + "发帖日期：" + fields[] + "内容："

            + fields[] + "</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('$'));

        }
 

使用 Repeater方式和完全静态页面使用AJAX读取和提交数据的更多相关文章

  1. jsp页面通过ajax取值/展示数据及分页显示

    jsp页面通过ajax从后台获取数据,在页面展示,并实现分页效果代码: [JavaScript部分代码] 1 <script> function getComposition(pageno ...

  2. 浅谈php生成静态页面

    一.引 言 在速度上,静态页面要比动态页面的比方php快很多,这是毫无疑问的,但是由于静态页面的灵活性较差,如果不借助数据库或其他的设备保存相关信息的话,整体的管理上比较繁琐,比方修改编辑.比方阅读权 ...

  3. 使用Varnish+ESI实现静态页面的局部缓存（思路篇）

    使用Varnish+ESI实现静态页面的局部缓存(思路篇) 页面静态化是搭建高性能网站必用的招式之一,页面静态化可以有效提升系统响应速度,同时也有利于搜索引擎优化.但在页面静态化后,静态页面之间包含( ...

  4. html模板生成静态页面及模板分页处理

    它只让你修改页面的某一部分,当然这"某一部分"是由你来确定的.美工先做好一个页面,然后我们把这个页面当作模板(要注意的是这个模板就没必要使用EditRegion3这样的代码了,这种 ...

  5. 接上篇，php生成静态页面，加上页面时间缓存

    <?php require_once(dirname(__FILE__).'/include/config.inc.php'); ?> <?php $dosql->Execut ...

  6. WebApi中将静态页面作为首页

    WebApi中将静态页面作为首页 使用场景 在我的项目中使用Asp.Net WebApi作为后端数据服务,使用Vue作为前端Web,在服务器IIS上部署时需要占用两个端口,一个是80端口,用户在浏览器 ...

  7. 【转】C# HttpWebRequest提交数据方式

    [转]C# HttpWebRequest提交数据方式 HttpWebRequest和HttpWebResponse类是用于发送和接收HTTP数据的最好选择.它们支持一系列有用的属性.这两个类位 于Sy ...

  8. 经FreeMarkerclasspath加载方式生成静态页面

    package htmlskin; import java.io.BufferedWriter; import java.io.File; import java.io.FileNotFoundExc ...

  9. 浅谈在静态页面上使用动态参数，会造成spider多次和重复抓取的解决方案

    原因: 早期由于搜索引擎蜘蛛的不完善,蜘蛛在爬行动态的url的时候很容易由于网站程序的不合理等原因造成蜘蛛迷路死循环. 所以蜘蛛为了避免之前现象就不读取动态的url,特别是带?的url 解决方案: 1 ...

随机推荐

  1. luoguP4931 情侣？给我烧了！（加强版）

    luogu 普通版题解:https://www.cnblogs.com/lcxer/p/10876856.html 在普通版里,我们考虑对于\(n\)对情侣,恰好\(k\)对是和谐的方案数是 \[ a ...

  2. 洛谷P2574 XOR的艺术

    题目描述 \(AKN\)觉得第一题太水了,不屑于写第一题,所以他又玩起了新的游戏.在游戏中,他发现,这个游戏的伤害计算有一个规律,规律如下 1. 拥有一个伤害串为长度为\(n\)的\(01\)串. 2 ...

  3. Python网络爬虫(二)

    Urllib库之解析链接 Urllib库里有一个parse这个模块,定义了处理URL的标准接口,实现 URL 各部分的抽取,合并以及链接转换.它支持如下协议的 URL 处理:file.ftp.goph ...

  4. angularJs1.x 版本中 uib-tabset 如何默认激活不同的标签页

     <uib-tabset> 默认有个active属性,根据官方文档,active的默认值是0,也就是说,默认显示索引为0的标签页,可以通过修改这个值来默认显示不同的索引的标签页. 示例: ...

  5. AngularJs1.X学习--路由

    [三种使用说明:] $stateProvider.state('station.printQRCode', { //params: { 'parentOfficeId': null }, //一次性参 ...

  6. spring boot test MockBean

    使用spring boot , MockBean @RunWith(SpringRunner.class) @SpringBootTest(classes = Application.class) p ...

  7. Microsoft JDBC Driver 使用 getParameterMetaData 会报错？

    不知道为何使用 Microsoft JDBC Driver for SQL Server 驱动时,sql语句不带参数没有问题,但是如果带参数且使用 getParameterMetaData 就会提示某 ...

  8. python入门之random模块

    #!/usr/bin/env python #_*_encoding: utf-8_*_ import random print(random.random()) #生成一个在0到1之间的随机浮点数 ...

  9. 【Unity3D/C#】利用IEnumerable<>和yield产生斐波那契数列

    using UnityEngine; using System.Collections; using System.Collections.Generic; public class YieldTes ...

  10. 浅谈堆-Heap（一）

    应用场景和前置知识复习 堆排序 排序我们都很熟悉,如冒泡排序.选择排序.希尔排序.归并排序.快速排序等,其实堆也可以用来排序,严格来说这里所说的堆是一种数据结构,排序只是它的应用场景之一 Top N的 ...