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. EasyUI/TopJUI之如何动态改变下拉列表框ComboBox输入框的背景颜色

    简单记录一下 前段时间接到客户需求:动态改变下拉列表框ComboBox输入框的背景颜色. 刚开始想的很简单在用户选择列表项的时候,判断一下列表框的value值添加相应的背景颜色就OK了,然而在实际操作 ...

  2. 低价购买 dp

    题目描述 “低价购买”这条建议是在奶牛股票市场取得成功的一半规则.要想被认为是伟大的投资者,你必须遵循以下的问题建议:“低价购买:再低价购买”.每次你购买一支股票,你必须用低于你上次购买它的价格购买它 ...

  3. POJ1024 Tester Program

    题目来源:http://poj.org/problem?id=1024 题目大意: 有一个迷宫,迷宫的起点在(0,0)处.给定一条路径,和该迷宫墙的设置,要求验证该路径是否为唯一的最短路径,该种墙的设 ...

  4. Luogu P4161 [SCOI2009]游戏 数论+DP

    ywy神犇太巨辣!!一下就明白了!! 题意:求$lcm(a_1,a_2,...,a_k)$的种类,其中$\Sigma\space a_i <=n$,$a_i$相当于环长 此处的$DP$,相当于是 ...

  5. springMvc配置 中文api

    http://7xvpsh.com1.z0.glb.clouddn.com/publish/21-2/the-dispatcher-servlet.html springmvc4.1.7:配置 复制转 ...

  6. jquery——事件

    绑定事件的其他方法 以及 取消绑定 事件:: <!DOCTYPE html><html lang="en"><head> <meta ch ...

  7. CentOS 7: ping Name or service not known

    解决方法 cd到/etc/sysconfig/network-scripts/ 修改ifcfg-*(*代表的内容可通过ifconfig查看)中的ONBOOT=yes reboot ifcfg-ens3 ...

  8. java Bean的映射工具

    数据层,业务逻辑层和表现层,每一层对应的应该是不一样的对象,所以就有个这么个java bean的映射工具 dozer.......................................... ...

  9. Android子线程更新UI成功

    android子线程更新UI成功 今天在写demo的时候,在子线程中更新UI,发现更新成功,记录一下. protected void onCreate(Bundle savedInstanceStat ...

  10. Oracle 取上周一到周末的sql

    -- 这样取的是 在一周内第几天,是以周日为开始的 select to_char(to_date('20131005','yyyymmdd'),'d') from dual; --结果:7 注释:20 ...