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

时间：2021-09-25 00:07:45
 
<!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 >  ?  :  }); //匿名类

                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>

相关文章