javascript;Jquery;获取JSON对象，无刷新评论实例。

最新推荐文章于 2024-09-27 18:07:01 发布

weixin_30896511

最新推荐文章于 2024-09-27 18:07:01 发布

阅读量44

点赞数

文章标签： json javascript ui ViewUI

原文链接：http://www.cnblogs.com/han1982/p/4055678.html

版权

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script type="text/javascript">
        window.onload = function () {
            //注册btn事件
            document.getElementById("btnPost").onclick = function () {
                var txtTitle = document.getElementById("txtTitle").value;
                var txtContent = document.getElementById("txtContent").value;
                var txtEmail = document.getElementById("txtEmail").value;
                var xhr = null;
                if (typeof (XMLHttpRequest) != undefined) {
                    xhr = new XMLHttpRequest();
                }
                else {
                    xhr = new ActiveXObject("Microsoft.XMLHttp");
                }
                xhr.onreadystatechange = function () {
                    if (xhr.readyState == 4 && xhr.status == 200) {
                        var tent = JSON.parse(xhr.responseText);
                        if (tent.IsOK == "1") {
                            document.getElementById("fontMsg").innerHTML = "评论成功！";
                            document.getElementById("fontMsg").color = "green";
                            //动态添加数据到页面显示
                            var tbody = document.getElementById("tbody1");
                            var trobj = tbody.insertRow(-1);
                            trobj.insertCell(-1).innerHTML = tent.autoId; //编号
                            trobj.insertCell(-1).innerHTML = txtTitle; //标题
                            trobj.insertCell(-1).innerHTML = txtContent; //内容
                            trobj.insertCell(-1).innerHTML = txtEmail; //邮箱
                        }
                        else if (tent.IsOK == "0") {
                            document.getElementById("fontMsg").innerHTML = "评论失败！";
                            document.getElementById("fontMsg").color = "red";
                        }
                    }
                };
                xhr.open("Post", "AddComments.ashx", true);
                xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
                xhr.send("title=" + txtTitle + "&content=" + txtContent + "&email=" + txtEmail);
            };
            //加载评论
            var xhr = null;
            if (typeof (XMLHttpRequest) != undefined) {
                xhr = new XMLHttpRequest();
            }
            else {
                xhr = new ActiveXObject("Microsoft.XMLHttp");
            }
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    var Comments = JSON.parse(xhr.responseText);
                    var tbody = document.getElementById("tbody1");
                    for (var i = 0; i < Comments.length; i++) {
                        var trobj = tbody.insertRow(-1);
                        trobj.insertCell(-1).innerHTML = Comments[i].autoId;
                        trobj.insertCell(-1).innerHTML = Comments[i].title;
                        trobj.insertCell(-1).innerHTML = Comments[i].content;
                        trobj.insertCell(-1).innerHTML = Comments[i].email;
                    }
                }
            };
            xhr.open("Get", "GetComments.ashx", true);
            xhr.send(null);
        };
    </script>
</head>
<body>
    评论：<br />
    <table border="1">
        <tr>
            <td>标题：</td>
            <td><input type="text" id="txtTitle" value="" /></td>
        </tr>
        <tr>
            <td>内容：</td>
            <td><input type="text" id="txtContent" value="" /></td>
        </tr>
        <tr>
            <td>邮箱：</td>
            <td><input type="text" id="txtEmail" value="" /></td>
        </tr>
        <tr>
            <td></td>
            <td><input type="button" id="btnPost" value="评论" /><font id="fontMsg"></font></td>
        </tr>
    </table>
    <p>=========================================================</p>
    <table>
        <tr>
            <td>编号：</td>
            <td>标题：</td>
            <td>内容：</td>
            <td>邮箱：</td>
        </tr>
        <tbody id="tbody1"></tbody>
    </table>
</body>
</html>

一般处理程序:

using MyPerson.BLL;
using MyPerson.Model;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Script.Serialization;

namespace MyPerson.UI.Ajax
{
    /// <summary>
    /// AddComments 的摘要说明
    /// </summary>
    public class AddComments : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            if (context.Request["title"] != null && context.Request["content"] != null && context.Request["email"] != null)
            {
                TblComments model = new TblComments();
                model.title = context.Request["title"];
                model.content = context.Request["content"];
                model.email = context.Request["email"];
                int n = new CommentsBll().AddComment(model);
                string json = new JavaScriptSerializer().Serialize(new { autoId = n, IsOK = n > 0 ? 1 : 0 }); //匿名类
                context.Response.Write(json);
            }
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}

jquery版：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="../Scripts/jquery-1.7.1.js"></script>
    <script type="text/javascript">
        $(function () {
            //注册btn事件
            $("#btnPost").click(function () {
                var txtTitle = $("#txtTitle").val();
                var txtContent = $("#txtContent").val();
                var txtEmail = $("#txtEmail").val();
                $.getJSON("AddComments.ashx", { "title": txtTitle, "content": txtContent, "email": txtEmail }, function (_data) {
                    if (_data.IsOK == "1") {
                        $("#fontMsg").html("评论成功！");
                        $("#fontMsg").css("color", "green");
                        //动态添加数据到页面显示
                        var tr = $("<tr><td>" + _data.autoId + "</td><td>" + txtTitle + "</td><td>" + txtContent + "</td><td>" + txtEmail + "</td></tr>");
                        $("#tbody1").append(tr);
                    }
                    else if (_data.IsOK == "0") {
                        $("#fontMsg").html("评论失败！");
                        $("#fontMsg").css("color", "red");
                    }
                });
            });
            //加载评论
            $.getJSON("GetComments.ashx", null, function (_data) {
                $.each(_data, function (key, value) {
                    var tr = $("<tr><td>" + value.autoId + "</td><td>" + value.title + "</td><td>" + value.content + "</td><td>" + value.email + "</td></tr>");
                    $("#tbody1").append(tr);
                });
            });
        });
    </script>
</head>
<body>
    评论：<br />
    <table border="1">
        <tr>
            <td>标题：</td>
            <td><input type="text" id="txtTitle" value="" /></td>
        </tr>
        <tr>
            <td>内容：</td>
            <td><input type="text" id="txtContent" value="" /></td>
        </tr>
        <tr>
            <td>邮箱：</td>
            <td><input type="text" id="txtEmail" value="" /></td>
        </tr>
        <tr>
            <td></td>
            <td><input type="button" id="btnPost" value="评论" /><font id="fontMsg"></font></td>
        </tr>
    </table>
    <p>=========================================================</p>
    <table>
        <tr>
            <td>编号：</td>
            <td>标题：</td>
            <td>内容：</td>
            <td>邮箱：</td>
        </tr>
        <tbody id="tbody1"></tbody>
    </table>
</body>
</html>