CommentsTest.html代码：

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title></title>

    <script src="jquery-1.8.3.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(function () {

            $.ajax({

                type: "post", url: "CommentsTest.ashx", data: { action: 'loadMsgs' },

                success: function (data) {

                    for (var i = 0; i < data.length; i++) {

                        var msg = data[i];

                        $("#ulMsgs").append($("<li>发表日期：" + msg.CreateDateTime + "；IP地址：" + msg.IP + "；消息：" + msg.Msg + "</li>"));

                    }

                },

                error: function () { alert("请求错误"); }

            });

            $("#btnPost").click(function () {

                var msg = $("#txtMsg").val();

                $.ajax({

                    type: "post", url: "CommentsTest.ashx", data: { msg: msg, action: 'post' },

                    success: function (data) {

                        if (data.Status == "ok") {

                            //alert("发表成功");

                            $("#ulMsgs").append($("<li>发表日期：刚刚；IP地址：本机；消息：" + msg + "</li>"));

                            $("#txtMsg").val("");

                        }

                        else if (data.Status == "error") {

                            alert(data.Msg);

                        }

                    },

                    error: function () { alert("请求错误"); }

                });

            });

        });

    </script>

</head>

<body>

    <ul id="ulMsgs">

    </ul>

    <br />

    <textarea id="txtMsg" cols="50" rows="5"></textarea><br />

    <input type="button" id="btnPost" value="发表" />

</body>

CommentsTest.ashx代码：

public void ProcessRequest(HttpContext context)

{

    context.Response.ContentType = "application/json";

    string action = context.Request["action"];

    if (action == "loadMsgs")

    {

        DataTable dt =  SQLHelper.ExecuteReader("select * from T_Comments");

        List<Object> list = new List<object>();

        foreach (DataRow row in dt.Rows)

        {

            string msg = (string)row["Msg"];

            DateTime createDT = (DateTime)row["CreateDateTime"];

            string ip = (string)row["IP"];

            //JavaScriptSerializer在序列化DateTime的时候序列化出的东西不好看，可以在服务器端ToString()转换为字符串

            //也可以在浏览器端，使用JS把/DATE\(203377733)/转换为字符串格式

            list.Add(new { Msg = msg, CreateDateTime = createDT.ToString(), IP = ip });

        }

        context.Response.Write(new JavaScriptSerializer().Serialize(list));

    }

    else if (action == "post")

    {

        string msg = context.Request["msg"];

        string ip = context.Request.UserHostAddress;

        SQLHelper.ExecuteNonQuery("insert into T_Comments(Msg,CreateDateTime,IP) values(@Msg,@CreateDateTime,@IP)",

                new SqlParameter("@Msg", msg), new SqlParameter("@CreateDateTime", DateTime.Now),

                new SqlParameter("@IP", ip));

        context.Response.Write(new JavaScriptSerializer().Serialize(new { Status = "ok", Msg = "发表成功" }));

    }

    else

    {

        throw new Exception("action错误");

    }

}

案例(JQuery的ajax无刷新评论)的更多相关文章

  1. ajax无刷新评论示例

    下面就为大家带来一篇 ajax无刷新评论示例.学习还是有点帮助的,给大家做个参考吧. 这是留言板的界面,当用户点击提交留言的时候,自动提交到我的留言下面 留言内容中为空,或者为灰色的“没有填写留言内容 ...

  2. Ajax：后台jquery实现ajax无刷新删除数据及demo

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAA8gAAAFSCAIAAAChUmFZAAAgAElEQVR4nO29z4scWZbn2/+Hb30zi8

  3. jquery 的ajax无刷新上传文件之后，页面还是会莫名的刷新-----解决办法

    文件上传用到全局数组: $_FILES 只需要把下面的 <button onclick="post()">提交</button> 改为 <input ...

  4. jQuery.form Ajax无刷新上传错误 (jQuery.handleError is not a function) 解决方案

    今天,随着ajaxfileupload时间firebug财报显示,"jQuery.handleError is not a function"错误.因为一旦使用jQuery.for ...

  5. JQUERY AJAX无刷新异步上传文件

    AJAX无刷新上传文件并显示 http://blog.csdn.net/gao3705512/article/details/9330637?utm_source=tuicool jQuery For ...

  6. jQuery实现form表单基于ajax无刷新提交方法详解

    本文实例讲述了jQuery实现form表单基于ajax无刷新提交方法.分享给大家供大家参考,具体如下: 首先,新建Login.html页面: <!DOCTYPE html PUBLIC &quo ...

  7. JS---案例：无刷新评论---属于创建对象的案例拿出来复习

    案例:无刷新评论---属于创建对象的案例拿出来复习 创建行和单元格,添加到相应元素中,设置内容 createElement, appendChild,innerHTML <!DOCTYPE ht ...

  8. jQuery 无刷新评论

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. JQuery 实现页面无刷新

    对于JQuery实现页面无刷新的效果,即:应用这个JQuery这个组件,可以实现在页面上加载数据库中的数据信息,但是并没有给用户页面刷新的感觉,这样既可以有效的进行数据交互,也可以不妨碍用户的其他操作 ...

随机推荐

  1. anr产生的原理&如何避免(android)

  2. XUnit学习

    1.建立测试单元项目 2.引用XUnit.dll或者在Nuget里安装XUnit 3.安装Nuget->xUnit.net[Runner: Visual Studio] 4.打开 测试-> ...

  3. background总结

    1. background-position background-position的百分比属性规则是:图片本身(x%,y%)的那个点,与背景区域的(x%,y%)的那个点重合. 具体可参考: http ...

  4. iOS视图生命周期与视图控制器关系

    iOS中视图是一个应用的重要组成部分,功能的实现与其息息相关,而视图控制器控制着视图,其重要性在整个应用中不言而喻.   视图生命周期与视图控制器关系   以视图的5种状态为基础,我们来系统的了解一下 ...

  5. explicit构造函数

    explicit构造函数 Explicit Constructors(显式构造函数)收藏 按照默认规定,只有一个参数的构造函数也定义了一个隐式转换,将该构造函数对应数据类型的数据转换为该类对象,如下面 ...

  6. JS待定···

    <select name="selgroup" id="selSendGroup" onchange="selSendGroupTest(thi ...

  7. TYVJ2477 架设电话线

    题目描述 Farmer John打算将电话线引到自己的农场,但电信公司并不打算为他提供免费服务.于是,FJ必须为此向电信公司支付一定的费用.     FJ的农场周围分布着N(1 <= N < ...

  8. socket基本

    fd_set用法: http://blog.sina.com.cn/s/blog_5c8d13830100erzs.htm socket连接: lpszHost="127.0.0.1&quo ...

  9. XSS代码触发条件，插入XSS代码的常用方法

    1.脚本插入 (1)插入javascript和vbscript正常字符. 例1:<img src=”javascript:alert(/xss/)”> 例2:<table backg ...

  10. CSS 实现垂直居中的几种方案

    最近在学关系型数据库相关,MySQL 和 Postgre,捎带着学了 PHP,为了练手这几天就忙着自己搭博客,项目部署在某云上,该云算是良心,给的空间自己搭博客用足够了.本来想着每日一bo的,所以有的 ...