1、使用Repeater方式：

Comments.aspx

  1. <html xmlns="http://www.w3.org/1999/xhtml">
  2. <head runat="server">
  3.     <title></title>
  4.     <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
  5.     <script type="text/javascript">
  6.         $(function () {
  7.             $("#btnPost").click(function () {
  8.                 $.post("Comments.ashx", { "msg": $("#txtconmment").val() }, function (data, status) {
  9.                     if (status != "success") {
  10.                         alert("发表失败请重试");
  11.                     }
  12.                     if (data == "ok") {
  13.                         var newComment = $("<li>评论日期：" + timeStamp2String(new Date()) + ",IP：自己，内容：" + $("#txtconmment").val() + "</li>");
  14.                         $("#ulComment").append(newComment);
  15.  
  16.                         alert("发表成功");
  17.                     }
  18.                     else {
  19.                         alert("评论内容有问题");
  20.                     }
  21.                 });
  22.  
  23.             });
  24.  
  25.         });
  26.         function timeStamp2String(time) {
  27.             var datetime = new Date();
  28.             datetime.setTime(time);
  29.             var year = datetime.getFullYear();
  30.             var month = datetime.getMonth() +  <  ? "" + (datetime.getMonth() + ) : datetime.getMonth() + ;
  31.             var date = datetime.getDate() <  ? "" + datetime.getDate() : datetime.getDate();
  32.             var hour = datetime.getHours() <  ? "" + datetime.getHours() : datetime.getHours();
  33.             var minute = datetime.getMinutes() <  ? "" + datetime.getMinutes() : datetime.getMinutes();
  34.             var second = datetime.getSeconds() <  ? "" + datetime.getSeconds() : datetime.getSeconds();
  35.             return year + "/" + month + "/" + date + " " + hour + ":" + minute + ":" + second;
  36.         }
  37.     </script>
  38.  
  39.     <style type="text/css">
  40.         #txtconmment {
  41.             height: 139px;
  42.             width: 326px;
  43.         }
  44.     </style>
  45. </head>
  46.  
  47. <body>
  48.     <form id="form1" runat="server">
  49.     <div>
  50.         <br />
  51.         Repeater方式加载评论：<br />
  52.         <asp:ObjectDataSource ID="ObjectDataSource1" runat="server"
  53.             DeleteMethod="Delete" InsertMethod="Insert"
  54.             OldValuesParameterFormatString="original_{0}" SelectMethod="GetData"
  55.             TypeName="ajaxApp.DataSetCommentsTableAdapters.commentsTableAdapter"
  56.             UpdateMethod="Update">
  57.             <DeleteParameters>
  58.                 <asp:Parameter Name="Original_id" Type="Int64" />
  59.             </DeleteParameters>
  60.             <InsertParameters>
  61.                 <asp:Parameter Name="comments" Type="String" />
  62.                 <asp:Parameter Name="ipAddress" Type="String" />
  63.                 <asp:Parameter Name="dateTime" Type="DateTime" />
  64.             </InsertParameters>
  65.             <UpdateParameters>
  66.                 <asp:Parameter Name="comments" Type="String" />
  67.                 <asp:Parameter Name="ipAddress" Type="String" />
  68.                 <asp:Parameter Name="dateTime" Type="DateTime" />
  69.                 <asp:Parameter Name="Original_id" Type="Int64" />
  70.             </UpdateParameters>
  71.         </asp:ObjectDataSource>
  72.         <ul id="ulComment">
  73.         <asp:Repeater ID="Repeater1" runat="server" DataSourceID="ObjectDataSource1">
  74.  
  75.          <ItemTemplate>
  76.  
  77.             <li>评论日期：<%#Eval("dateTime") %>,IP:<%#Eval("ipAddress") %>,
  78.             内容：<%#Eval("comments") %></li>
  79.  
  80.          </ItemTemplate>
  81.  
  82.         </asp:Repeater>
  83.          </ul>
  84.         <br />
  85.         <br />
  86.         <br />
  87.     <textarea id="txtconmment"></textarea>
  88.         <br />
  89.         <br />
  90.     <input id="btnPost" type="button" value="提交" />
  91.  
  92.     </div>
  93.     </form>
  94. </body>
  95. </html>

Comments.ashx页面代码：接合使用数据集生成

  1.     public void ProcessRequest(HttpContext context)
  2.         {
  3.             context.Response.ContentType = "text/plain";
  4.             string msg = context.Request["msg"];
  5.             new commentsTableAdapter().Insert(msg,context.Request.UserHostAddress,DateTime.Now);
  6.             context.Response.Write("ok");
  7.         }

2、完全AJAX方式显示评论内容：

Comments.htm页面：

  1. <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
  2. <script type="text/javascript">
  3.     $(function () {
  4.         $.post("GetComments.ashx", function (data, status) {
  5.             if (status != "success") {
  6.                 $("#ulComment").append($("<li>加载失败</li>"));
  7.                 return;
  8.             }
  9.             var lines = data.split("$");
  10.             for (var i = ; i < lines.length; i++) {
  11.                 var line = lines[i];
  12.                 var fields = line.split("|");
  13.                 var comment = $("<li>IP地址：" + fields[] + "发帖日期：" + fields[] + "内容："
  14.             + fields[] + "</li>");
  15.  
  16.                 $("#ulComment").append(comment);
  17.             }
  18.  
  19.         });
  20.  
  21.     })
  22.  
  23. </script>
  24. </head>
  25. <body>
  26. <ul id="ulComment">
  27.  
  28. </ul>
  29. </body>
  30. </html>
  1. GetComments.ashx页面：
  1. /// <summary>
  2.     /// GetComments 的摘要说明
  3.     /// </summary>
  4.     public class GetComments : IHttpHandler
  5.     {
  6.         //返回的格式———评论人IP|日期|内容$
  7.         public void ProcessRequest(HttpContext context)
  8.         {
  9.             context.Response.ContentType = "text/plain";
  10.             //context.Response.Write("Hello World");
  11.             var comments = new commentsTableAdapter().GetData();
  12.             StringBuilder sb = new StringBuilder();
  13.             foreach (var comment in comments)
  14.             {
  15.                 sb.Append(comment.ipAddress).Append("|").Append(comment.dateTime).Append("|")
  16.                     .Append(comment.comments).Append("$");
  17.  
  18.             }
  19.             context.Response.Write(sb.ToString().Trim('$'));
  20.         }
  1.  

使用 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. DHCP原理和配置

    在大型网络中,会有大量的主机和设备需要获取ip地址和网络参数,为了解决手动配置的工作量大.ip冲突问题,因此需要使用DHCP(dynamic host configuration protocol). ...

  2. JOS lab1 part2 分析

    lab1的Exercise 2就是让我们熟悉gdb的si操作,并知道BIOS的几条指令在做什么就够了,所以我们也会尽可能的去分析每一行代码. 首先进入到6.8282/lab这个目录下,输入指令make ...

  3. Angular2.0的学习（五）

    第五节课: 1.组件的输入输出属性 2.使用中间人模式传递数据 3.组件生命周期以及Angular的变化发现机制

  4. LCS(Longest Common Subsequence)

    http://blog.csdn.net/zztfj/article/details/6157429 LCS(Longest Common Subsequence) 就是求两个字符串最长公共子串的问题 ...

  5. C++之struct

    C++的struct对C做和很多补充,里面可以放函数(构造函数和虚函数),也可以同struct和class的继承,在C++中也完全可以替代class.他们之间的主要区别: 1 calss默认是私有继承 ...

  6. (转)用户管理 之 Linux 用户（user）和用户组（group）管理概述

    用户管理 之 Linux 用户(user)和用户组(group)管理概述  原文:http://www.cnblogs.com/licheng/p/6103992.html 一.理解Linux的单用户 ...

  7. Vim相关问题

    1.vim格式修改 进入配置文件: $ sudo vim /etc/vim/vimrc 在文件末尾添加: #默认查找忽略大小写 set ignorecase #如果有一个大写字母,则切换到大小姐敏感查 ...

  8. c# string.format 的简写 $

    var name = "huchao"; var info = $"你是谁,我叫:{name}"; Console.Write(info); Console.R ...

  9. Quartz.NET持久化

    Quartz.NET所用到的数据库表结构 官方提供的各种数据库脚本:https://github.com/quartznet/quartznet/tree/master/database/tables ...

  10. C# 调用NPOI 修改Excel 完成实时更新公式结果

    C# 调用NPOI,修改EXCEL中的数据后并保存后,不会对公式进行更新操作.打开Excel表需要更新一下公式才生效 强制更新公式:C# 调用sheet.ForceFormulaRecalculati ...