使用 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 ...

随机推荐

Error: Attribute application@allowBackup value=(false) from AndroidManifest.xml:14:7-34 is also present at [:react-native-qq] AndroidManifest.xml:14:18-44 value=(true).
解决方法: 修改文件: 在manifest标签中添加 xmlns:tools="http://schemas.android.com/tools" 在application标签中添 ...
git教程3-分支
https://git-scm.com/book/zh/v1/Git-%E5%88%86%E6%94%AF-%E5%88%86%E6%94%AF%E7%9A%84%E7%AE%A1%E7%90%86 ...
原生Ajax实现
发现一件可怕的事情,前端学不完了,春招要开始了.唉,人生苦短.
CF　C. Plasticine zebra　（思维）
题意: 是输入一个只有'w','b'的字符串,可以对他的任意位置切割成两个子串,切割后的右边的子串翻转后再和左边的子串拼起来会得到一个新的字符串,操作次数不限,问能得到的字符串中wb交替出现的最大的长 ...
python入门之random模块
#!/usr/bin/env python #_*_encoding: utf-8_*_ import random print(random.random()) #生成一个在0到1之间的随机浮点数 ...
转 mysql有一个warning，但可以执行成功
mysql有一个warning,但可以执行成功,报整型值错误,怎么解,求支招转 http://tieba.baidu.com/p/4558183228
01.Spring Ioc 容器
基本概念 Spring 的 Ioc 容器,通常也称应用上下文.它包含了两个概念 Ioc 和容器: 容器:顾名思义就是用来装东西的,在 Spring 中容器里盛放的就是各种各样的 Bean.既然装了东 ...
整理：sql server 中sql语句执行顺序
SQL Server 查询处理中的各个阶段(SQL执行顺序) SQL 不同于与其他编程语言的最明显特征是处理代码的顺序.在大数编程语言中,代码按编码顺序被处理,但是在SQL语言中,第一个被处理的子句是 ...
StringMVC返回字符串
@RequestMapping(value="twoB.do") public void twoBCode(HttpServletRequest request,HttpServl ...
javascript浮点值运算舍入误差
问题在javascript中整数和浮点数都属于Number数据类型(简单数据类型中的一种),我们经常会发现在打印1.0这样的浮点数的结果是1而非1.0,这是由于保存浮点数的内存空间是保存整数值的两倍 ...

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

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

随机推荐

热门专题