使用 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() +  <  ? "" + (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读取和提交数据的更多相关文章

jsp页面通过ajax取值/展示数据及分页显示
jsp页面通过ajax从后台获取数据,在页面展示,并实现分页效果代码: [JavaScript部分代码] 1 <script> function getComposition(pageno ...
浅谈php生成静态页面
一.引言在速度上,静态页面要比动态页面的比方php快很多,这是毫无疑问的,但是由于静态页面的灵活性较差,如果不借助数据库或其他的设备保存相关信息的话,整体的管理上比较繁琐,比方修改编辑.比方阅读权 ...
使用Varnish+ESI实现静态页面的局部缓存（思路篇）
使用Varnish+ESI实现静态页面的局部缓存(思路篇) 页面静态化是搭建高性能网站必用的招式之一,页面静态化可以有效提升系统响应速度,同时也有利于搜索引擎优化.但在页面静态化后,静态页面之间包含( ...
html模板生成静态页面及模板分页处理
它只让你修改页面的某一部分,当然这"某一部分"是由你来确定的.美工先做好一个页面,然后我们把这个页面当作模板(要注意的是这个模板就没必要使用EditRegion3这样的代码了,这种 ...
接上篇，php生成静态页面，加上页面时间缓存
<?php require_once(dirname(__FILE__).'/include/config.inc.php'); ?> <?php $dosql->Execut ...
WebApi中将静态页面作为首页
WebApi中将静态页面作为首页使用场景在我的项目中使用Asp.Net WebApi作为后端数据服务,使用Vue作为前端Web,在服务器IIS上部署时需要占用两个端口,一个是80端口,用户在浏览器 ...
【转】C# HttpWebRequest提交数据方式
[转]C# HttpWebRequest提交数据方式 HttpWebRequest和HttpWebResponse类是用于发送和接收HTTP数据的最好选择.它们支持一系列有用的属性.这两个类位于Sy ...
经FreeMarkerclasspath加载方式生成静态页面
package htmlskin; import java.io.BufferedWriter; import java.io.File; import java.io.FileNotFoundExc ...
浅谈在静态页面上使用动态参数，会造成spider多次和重复抓取的解决方案
原因: 早期由于搜索引擎蜘蛛的不完善,蜘蛛在爬行动态的url的时候很容易由于网站程序的不合理等原因造成蜘蛛迷路死循环. 所以蜘蛛为了避免之前现象就不读取动态的url,特别是带?的url 解决方案: 1 ...

随机推荐

Idea设置签名
IntelliJ IDEA如何设置头注释,自定义author和date 下面这张图,保证你一看就会: 下面这个模板,你拿去改一改就行了. 1 /** 2 * @Author: Gosin 3 * ...
day22作业详解
1.面向对象作业1 2.作业详解点击查看详细内容 #1. class Li(object): def func1(self): print('in func1') obj = Li() obj.fu ...
JMETER进行REST API测试（分步指南）
我确定你在这里是因为你需要加载测试Json Rest API.这并不奇怪,因为Rest API现在越来越受欢迎. 这本指南的目的:帮助您进行负载测试一个Json的 REST API 通过一个具体的例子 ...
[Leetcode]009.Palindrome Number
public class Solution { public boolean isPalindrome(int x) { if (x<0 || (x!=0 && x%10==0) ...
chapter09
import java.io.File import java.nio.file._ import scala.collection.mutable.ArrayBuffer/** * Created ...
mycat分片规则之分片枚举（sharding-by-intinfile）
mycat分片规则之分片枚举(sharding-by-intinfile) http://blog.51cto.com/goome/2058959 mycat安装及分片初体验 https://blog ...
08.Spring Bean 解析 - BeanDefinitionDocumentReader
基本概念 BeanDefinitionDocumentReader ,该类的作用有两个,完成 BeanDefinition 的解析和注册 . 解析:其实是解析 Ddocument 的内容并将其添加到 ...
Python lambda（匿名函数）介绍【转】
引用: http://www.cnblogs.com/evening/archive/2012/03/29/2423554.html 在学习python的过程中,lambda的语法时常会使人感到困惑, ...
superset 配置连接 hbase
1. 简单说明最近配置superset查询hbase, 根据网上查询到的文档和经验,成功了一次(python3.4 superset 0.20.),后边重试换各种版本就不行了.最后根据错误终于发现 ...
mysql5.5.28.tar.gz编译安装操作笔记
1.yum安装依赖包 yum install wget gcc gcc-c++ make cmake ncurses-devel libtool zilib-devel -y 2.创建mysql用 ...

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

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

随机推荐

热门专题