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. Bsoj 1322 第K小数

    第K小数 Description 现在已有N个整数,你有以下三种操作: 1 A:表示加入一个值为A的整数: 2 B:表示删除其中值为B的整数: 3 K:表示输出这些整数中第K小的数: Input 第一 ...

  2. OracleOraDb10g_home1TNSListener无法启动

    1:“本地计算机上的OracleOraDb10g_home1TNSListener服务启动后停止.某些服务在未由其他服务或程序使用时将自动停止.” 解决办法:动态ip,服务 OracleOraDb10 ...

  3. HDU 1060 Left-most Digit

    传送门 Leftmost Digit Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Other ...

  4. 软件开发过程中的审查 (Review)

    http://blog.csdn.net/horkychen/article/details/5035769 软件开发过程中的审查 (Review)   希望别人做些什么->定义出流程 希望别人 ...

  5. jquery------.resizable()的使用

    index.jsp //加上这两行代码,右下角会有样式效果<link rel="stylesheet" href="//code.jquery.com/ui/1.1 ...

  6. Fedora 20下配置samba服务器

    1 安装samba [root@localhost ~]# yum –y install samba   ← 通过网络安装samba yum -y install samba-client    // ...

  7. 在不借助其他工具的情况下破解Windows开机密码

    文章:http://www.cnblogs.com/vforbox/p/4828855.html#!comments. 从该文章我们也可以得到一个快速启动某个程序的方法:将自己常用的程序命名为seth ...

  8. linux 优化&安全运维&黑客攻防

    优化: 可删除用户:adm,lp,sync,shutdown,halt,news,uucp,operator,games,gopher.   :userdel games 可删除组:adm,lp,ne ...

  9. emmet-vim

    最近啊,我投奔了网页的开发,看了一本<head first HTML and CSS>的书,感觉非常不错,然后又配置了一些vim里面用到的插件,现在我把学习到的东西记录下来! 首先,我不会 ...

  10. 取地址符：&

    例子: <?php $a=10; $b = &$a; echo $b; $b=15; echo $a; //结果:10和15 //当$b = &$a 时,a,b的地址相同,对a, ...