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. 走进科学 WAF(Web Appllication Firewall)

    1. 前言 当WEB应用越来越为丰富的同时,WEB 服务器以其强大的计算能力.处理性能及蕴含的较高价值逐渐成为主要攻击目标.SQL注入.网页篡改.网页挂马等安全事件,频繁发生. 企业等用户一般采用防火 ...

  2. android studio问题-ICCP:Not recognizing known sRGB profile

    转:http://my.oschina.net/1pei/blog/479162 PNG格式:每个PNG文件是由一个PNG标识(signature),后面跟一些数据块(chunk),每个chunk由 ...

  3. 大数据测试之hadoop命令大全

    1.列出所有Hadoop Shell支持的命令 $ bin/hadoop fs -help2.显示关于某个命令的详细信息 $ bin/hadoop fs -help command-name3.用户可 ...

  4. TIME_WAIT过多

    Linux系统下,TCP/IP连接断开后,会以TIME_WAIT状态保留一定的时间,然后才会释放端口.当并发请求过多的时候,就会产生大量的 TIME_WAIT状态的连接,无法及时断开的话,会占用大量的 ...

  5. jquery------.cycle的使用

    代码下载地址:http://malsup.github.io/jquery.cycle.all.js 把里面的代码复制到jquery.cycle.all.js里面 index.jsp <scri ...

  6. ubuntu下安装 openssl 开发库

    ubuntu下安装 openssl 开发库 检查是否已安装openssl: sudo apt-get install openssl 如果已安装执行以下操作:sudo apt-get install ...

  7. ECSHOP验证码背景图修改教程

    ECSHOP验证码背景图修改教程 ECSHOP教程/ ecshop教程网(www.ecshop119.com) 2013-11-18   ECSHOP验证码背景图修改教程: ECSHOP前后台的某些地 ...

  8. 第一部分 mongodb 基础篇

    什么是NoSQL认识MongoDBMongDB的下载与安装MongoDB的体系结构常用命令(基本的增删改查)客户端GUI工具集合 一: 什么是NoSql1 NoSQL简介NoSQL是Not Only ...

  9. 7、8上的cell上的一个按钮，当点击按钮时，要拿到这个cell，可以用代理，也可以用superview

    /** cell上的付款按钮事件 */ - (IBAction)paymentButtonClick:(UIButton *)sender { /** * @author SongXing, 15-0 ...

  10. mybatis 使用resultMap实现数据库的操作

    resultType:直接表示返回类型 resultMap:对外部resultMap的引用 二者不能同时使用 创建一个实体类Role和User public class Role { private ...