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. inux环境PHP7.0安装

    inux环境PHP7.0安装   PHP7和HHVM比较PHP7的在真实场景的性能确实已经和HHVM相当, 在一些场景甚至超过了HHVM.HHVM的运维复杂, 是多线程模型, 这就代表着如果一个线程导 ...

  2. 初学Hibernate持久化

    hibernate三种持久化对象状态:(持久化对象:Persistent Object=POJO + hbm映射) 1.瞬时状态(临时状态或自由态):PO对象刚创建(即new)开始进入瞬时状态,此时对 ...

  3. SQL Server中追踪器Trace的介绍和简单使用

    一.What is Trace? 对于SQL Profiler这个工具相信大家都不是很陌生,没用过的朋友可以在SQL Server Management Studio>工具>SQL Ser ...

  4. Why The Golden Age Of Machine Learning is Just Beginning

    Why The Golden Age Of Machine Learning is Just Beginning Even though the buzz around neural networks ...

  5. 织梦DedeCms去掉栏目页面包屑导航最后的分隔符“>”

    织梦DedeCms的面包屑导航调用标签{dede:field name=’position’ /},在栏目页里调用的面包屑导航,最后会出现分割符号“>”,如:主页 > DedeCms 模板 ...

  6. 旋转屏幕时，假如自定义的xib大小变了，可能是这个属性没有修改

    虽然xib内部启用了自动布局,但是当xib放入外界,xib自身的autoresizing是存在的

  7. commons-logging和Log4j 日志管理/log4j.properties配置详解

    commons-logging和Log4j 日志管理 (zz) 什么要用日志(Log)? 这个……就不必说了吧. 为什么不用System.out.println()? 功能太弱:不易于控制.如果暂时不 ...

  8. [Angularjs]asp.net mvc+angularjs+web api单页应用

    写在前面 最近的工作一直在弄一些h5的单页应用,然后嵌入到app的webview中.之前一直在用angularjs+html+ashx的一套东西.实在是玩腻了.然后就尝试通过asp.net mvc的方 ...

  9. 让我们一起学习《Node.js入门》一书吧！

    Node.js入门 读完本书之后,你将完成一个完整的web应用,该应用允许用户浏览页面以及上传文件. 里面对一些知识的讲解,让你略窥Node.js的门径.最好一段代码一段代码的写下来,我的习惯是手里拿 ...

  10. mysql 多表联合更新

    UPDATE mall_order moLEFT JOIN mall_order_goods mog ON mo.id = mog.order_idSET mo.ratio=0.08WHERE mog ...