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

随机推荐

安装篇：MySQL系列之一
环境:CentOS6.9系统安装MariaDB-10.2.15 一.yum包管理器安装MariaDB-server 1)配置yum源(MariaDB官方源) [root@centos6 ~]# v ...
Swift几行代码解决UITableView空数据视图问题
tableView空数据问题一般项目中tableView若数据为空时会有一个提示示意图为了更好的管理这种提示示意图,笔者利用extension进行了简单的拓展解决思路利用swift面向协议的特 ...
ios 容错处理AvoidCrash
程序因为很多原因容易出现崩溃问题,比如数组越界.空字符串等造成的崩溃 // 在AppDelegate 写如下代码初始化防止程序因数组和字符串等崩溃问题 //初始化 AvoidCrash (常用对象防 ...
mysql CPU占用高
https://blog.csdn.net/u011239989/article/details/72863333 QPS高,sql简单的场景下, 需要 1. 提高数据库的服务器性能CPU 内存等 2 ...
003 Longest Substring Without Repeating Characters 最长不重复子串
Given a string, find the length of the longest substring without repeating characters.Examples:Given ...
win10卸载更新+关闭自动更新的方法
卸载更新方法: 左下角->设置->更新和安全->windows更新->高级选项->查看更新历史记录->卸载更新关闭自动更新的方法:win+r 输入service ...
SGU - 409
题目链接:https://vjudge.net/contest/239445#problem/H 题目大意:输入n,k,有n*n* n*n的网格,要求每行每列刚好有k个*,每n*n的小方格内也刚好有k ...
OkHttp工具类
package test; import java.io.File; import java.io.IOException; import java.util.ArrayList; import ja ...
jsp内置对象和el表达式内置对象误区
未经允许禁止转载... jsp九大内置对象 EL表达式隐含的11个对象隐含对象名称描述 pageContext 对应于JSP页面中的pageContext对象(注意:取的是pageC ...
Shell 学习—AWK介绍
Shell 学习—AWK = = = 安装awk root@kiki-desktop:~/shell# apt-get install gawk gawk-doc = = = awk 是一种程序语言. ...

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

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

随机推荐

热门专题