步步为营-78-新闻展示(Ajax+Json+easyUI)

Posted 2020-09-23 逍遥小天狼

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了步步为营-78-新闻展示(Ajax+Json+easyUI)相关的知识，希望对你有一定的参考价值。

Json:javascript Object Notation

1.1 Json对象的接收处理

<!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="JQuery/jquery-1.7.1.min.js"></script>
    <script>
        $(function () {
            //方法1
            $(\'#test1\').click(function () {
                //$.post("01Json接收处理的4种方法.ashx", {}, function (data) { alert("阿斯蒂芬"); });
               $.post("01Json接收处理的4种方法.ashx", {}, function (data) { alert( data.name); },"json");
            });
            //方法2
            $(\'#test2\').click(function () {
                $.post("01Json接收处理的4种方法.ashx", {}, function (data) {
                    var stJson = $.parseJSON(data);
                    alert(stJson.Age);
                });
            });
            //方法3
            $(\'#test3\').click(function () {
                $.getJSON("01Json接收处理的4种方法.ashx", {}, function (data) {
                    alert(data.name);
                });
            });
            //方法4
            $(\'#test4\').click(function () {
                
                $.ajax({
                    type: "post",
                    url: "01Json接收处理的4种方法.ashx",
                    data: {},
                    success: function (msg) {
                        alert(msg.Age);
                    },
                    dataType:"json",
                });
            });


           
        });
    </script>
</head>
<body>
    <input type="button" id="test1" value="姓名" />
    <input type="button" id="test2" value="年龄" />
    <input type="button" id="test3" value="姓名" />
    <input type="button" id="test4" value="年龄"/>
</body>
</html>

html

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace JsonTest
{
    /// <summary>
    /// _01Json接收处理的4种方法 的摘要说明
    /// </summary>
    public class _01Json接收处理的4种方法 : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/html";
            string strJson=@"{""name"":""张三"",""Age"":""18""}";
            context.Response.Write(strJson);
        }

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

ashx

2.1 列表展示:主要是后台获取数据=>传递给前台转成json对象=>拼接成HTML代码附加到table表中

　　需要注意两点:

　　　//1 专门实现序列化和和反序列化,很方便
System.Web.Script.Serialization.JavaScriptSerializer js = new System.Web.Script.Serialization.JavaScriptSerializer();
string str = js.Serialize(newsList);

　　 //2 将序列化成json格式后日期(毫秒数)转成日期格式

function ChangeDateFormat(cellval) {

var date = new Date(parseInt(cellval.replace("/Date(", "").replace(")/", ""), 10));

var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;

var currentDate = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();

return date.getFullYear() + "-" + month + "-" + currentDate;

}

using NewsBLL;
using NewsModel;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Script.Serialization;

namespace JsonTest
{
    /// <summary>
    /// _02_01新闻展示 的摘要说明
    /// </summary>
    public class _02_01新闻展示 : IHttpHandler
    {
        //创建Bll层对象
        NewsInfoBll bll = new NewsInfoBll();
        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/html";
           List<NewsInfoModel> newsList = bll.GetNewsInfo();
            //很重要的一行代码
          JavaScriptSerializer js = new  JavaScriptSerializer();
           string str = js.Serialize(newsList);
           context.Response.Write(str);
        }

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

ashx.cs

<!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="JQuery/jquery-1.7.1.min.js"></script>
    <script>
        $(function () {
            pageLoad();
        });

        function pageLoad() {
            $.post("02-01新闻展示.ashx", {},
                function (data) {
                    var stJson = $.parseJSON(data);//其结果为Json数组
                    //获取后台发来的Json对象
                    var len = stJson.length;
                    if (len > 0) {
                        for (var i = 0; i < len; i++) {
                            $("<tr><td>" + stJson[i].NewsId + "</td><td>" + stJson[i].NewsTitle + "</td><td>" + stJson[i].NewsContent + "</td><td>" +ChangeDateFormat( stJson[i].SubTime )+ "</td></tr>").appendTo("#tableList");
                        }
                    } else {
                        $("<tr><td>没有数据</td></tr>").appendTo("#tableList");
                    }
                   

                });
            //将序列化成json格式后日期(毫秒数)转成日期格式
            function ChangeDateFormat(cellval) {
                var date = new Date(parseInt(cellval.replace("/Date(", "").replace(")/", ""), 10));
                var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
                var currentDate = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
                return date.getFullYear() + "-" + month + "-" + currentDate;
            }

        }

    </script>
</head>
<body>
     
    <table id="tableList">
        <thead>
        <th>新闻Id</th>        <th>新闻标题</th>        <th>新闻内容</th>        <th>发布时间</th>
        </thead>
    </table>
</body>
</html>

新闻展示.html

运行效果

2.2 详细信息:设置隐藏的dialog对话框=>为信息添加链接=>显示对话框和并附上相应的值

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link href="Css/tableStyle.css" rel="stylesheet" />
    <link href="Css/themes/default/easyui.css" rel="stylesheet" />
    <link href="Css/themes/icon.css" rel="stylesheet" />
    
    <script src="JQuery/jquery-1.7.1.js"></script>
    <script src="JQuery/jquery.easyui.min.js"></script>
    <script src="JQuery/easyui-lang-zh_CN.js"></script>

    <script>
        $(function () {
            //01 页面加载
            pageLoad();
            // 将详细信息div隐藏
            $("#detailDiv").css("display", "none");
        });
        //01 页面加载
        function pageLoad() {
            $.post("02-01新闻展示.ashx", {},
                function (data) {
                    var stJson = $.parseJSON(data);//其结果为Json数组
                    //获取后台发来的Json对象
                    var len = stJson.length;
                    if (len > 0) {
                        for (var i = 0; i < len; i++) {
                            $("<tr><td>" + stJson[i].NewsId + "</td><td>" + stJson[i].NewsTitle + "</td><td>" + stJson[i].NewsContent + "</td><td>" +ChangeDateFormat( stJson[i].SubTime )+ "</td> <td><a href=\'javascript:void(0)\' class=\'deletes\' dId=\'"+stJson[i].NewsId+"\'>删除</a></td> <td><a href=\'javascript:void(0)\' class=\'details\' nId=\'"+stJson[i].NewsId+"\'>详细</a></td>  <td><a href=\'javascript:void(0)\' class=\'edits\' eId=\'"+stJson[i].NewsId+"\'>编辑</a></td> </tr>").appendTo("#tableList");
                            //03 详细信息
                            bindDetailClick();
                        }
                    } else {
                        $("<tr><td>没有数据</td></tr>").appendTo("#tableList");
                    }
                });     

        }
        //02 将序列化成json格式后日期(毫秒数)转成日期格式
        function ChangeDateFormat(cellval) {
            var date = new Date(parseInt(cellval.replace("/Date(", "").replace(")/", ""), 10));
            var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
            var currentDate = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
            return date.getFullYear() + "-" + month + "-" + currentDate;
        }
        //03 详细信息
        function bindDetailClick() {
            //03-01 添加单击事件
            $(".details").click(function () {
                var id = $(this).attr("nId");
                $.post("02-02新闻详细.ashx", { "id": id }, function (data) {
                    var strJson = $.parseJSON(data);
                    //为文本框赋值
                    $("#NewId").text(strJson[0].NewsId);
                    $("#SubBy").text(strJson[0].SubBy);
                    $("#TypeId").text(strJson[0].TypeId);
                    //显示div
                    $("#detailDiv").css("display", "block");
                    //以对话框的形式弹出
                    $(\'#detailDiv\').dialog({
                        width: 300,
                        height: 300,
                        title: "用户详细信息",
                        collapsible: true,
                        maximizable: true,
                        resizable: true,
                        modal: true,
                        buttons: [{
                            text: \'Ok\',
                            iconCls: \'icon-ok\',
                            handler: function () {
                                alert(\'ok\');
                            }
                        }, {
                            text: \'Cancel\',
                            handler: function () {
                                $(\'#detailDiv\').dialog(\'close\');
                            }
                        }]
                    });
                });
            });
        }

       

    </script>
</head>
<body>
     
    <table id="tableList">
        <thead>
        <th>新闻Id</th>   <th>新闻标题</th>   <th>新闻内容</th>   <th>发布时间</th> <th>删除</th>   <th>详细</th>  <th>编辑</th>
        </thead>
    </table>

    <!------------03详细信息------------------>
    <div id="detailDiv">
        <table>
            <tr>
                <td>新闻Id</td>
                <td><span id="NewId"></span></td>
            </tr>
            <tr>
                <td>上传者</td>
                <td><span id="SubBy"></span></td>
            </tr>
            <tr>
                <td>所属类型</td>
                <td><span id="TypeId"></span></td>
            </tr>
        </table>
    </div>
    <!------------详细信息------------------>

</body>
</html>

HTML---03

using NewsBLL;
using NewsModel;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Script.Serialization;

namespace JsonTest
{
    /// <summary>
    /// _02_02新闻详细 的摘要说明
    /// </summary>
    public class _02_02新闻详细 : IHttpHandler
    {
        //创建Bll层对象
        NewsInfoBll bll = new NewsInfoBll();
        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/html";
            //01 获取新闻id 
            if (context.Request["id"] != null)
            {
                int newsId = Convert.ToInt32(context.Request["id"]);
                List<NewsInfoModel> newsList = bll.GetNewsInfo(newsId);
                JavaScriptSerializer jss = new JavaScriptSerializer();
                string str = jss.Serialize(newsList);
                context.Response.Write(str);
            }
           
        }

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

ashx

2.3 删除对应04

2.4 添加对应05

2.5 编辑对应06

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link href="Css/tableStyle.css" rel="stylesheet" />
    <link href="Css/themes/default/easyui.css" rel="stylesheet" />
    <link href="Css/themes/icon.css" rel="stylesheet" />
    
    <script src="JQuery/jquery-1.7.1.js"></script>
    <script src="JQuery/jquery.easyui.min.js"></script>
    <script src="JQuery/easyui-lang-zh_CN.js"></script>

    <script>
        $(function () {
            //01 页面加载
            pageLoad();
            // 03将详细信息div隐藏
            $("#detailDiv").css("display", "none");
            //05将添加新闻div隐藏
            $("#addDiv").css("display", "none");
            //06将编辑新闻div隐藏
            $("#editDiv").css("display", "none");

            
        });
        //01 页面加载
        function pageLoad() {
            $.post("02-01新闻展示.ashx", {},
                function (data) {
                    var stJson = $.parseJSON(data);//其结果为Json数组
                    //获取后台发来的Json对象
                    var len = stJson.length;
                    if (len > 0) {
                        for (var i = 0; i < len; i++) {
                            $("<tr><td>" + stJson[i].NewsId + "</td><td>" + stJson[i].NewsTitle + "</td><td>" + stJson[i].NewsContent + "</td><td>" +ChangeDateFormat( stJson[i].SubTime )+ "</td> <td><a href=\'javascript:void(0)\' class=\'deletes\' dId=\'"+stJson[i].NewsId+"\'>删除</a></td> <td><a href=\'javascript:void(0)\' class=\'details\' nId=\'"+stJson[i].NewsId+"\'>详细</a></td>  <td><a href=\'javascript:void(0)\' class=\'edits\' eId=\'"+stJson[i].NewsId+"\'>编辑</a></td> </tr>").appendTo("#tableList");
                            //03 详细信息
                            bindDetailClick();
                            //04 删除信息
                            bindDeleteClick();
                            //06 编辑信息
                            bindEditClick();
                        }
                    } else {
                        $("<tr><td>没有数据</td></tr>").appendTo("#tableList");
                    }
                });     

        }
        //02 将序列化成json格式后日期(毫秒数)转成日期格式
        function ChangeDateFormat(cellval) {
            var date = new Date(parseInt(cellval.replace("/Date(", "").replace(")/", ""), 10));
            var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
            var currentDate = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
            return date.getFullYear() + "-" + month + "-" + currentDate;
        }
        //03 详细信息
        function bindDetailClick() {
            //03-01 添加单击事件
            $(".details").click(function () {
                var id = $(this).attr("nId");
                $.post("02-02新闻详细.ashx", { "id": id }, function (data) {
                    var strJson = $.parseJSON(data);
                    //为文本框赋值
                    $("#NewId").text(strJson[0].NewsId);
                    $("#SubBy").text(strJson[0].SubBy);
                    $("#TypeId").text(strJson[0].TypeId);
                    //显示div
                    $("#detailDiv").css("display", "block");
                    //以对话框的形式弹出
                    $(\'#detailDiv\').dialog({
                        width: 300,
                        height: 300,
                        title: "新闻详细信息",
                        collapsible: true,
                        maximizable: true,
                        resizable: true,
                        modal: true,
                        buttons: [{
                            text: \'Ok\',
                            iconCls: \'icon-ok\',
                            handler: function () {
                                alert(\'ok\');
                            }
                        }, {
                            text: \'Cancel\',
                            handler: function () {
                                $(\'#detailDiv\').dialog(\'close\');
                            }
                        }]
                    });
                });
            });
        }
        //04 删除信息
        function bindDeleteClick() {
            $(".deletes").click(function () {
                var id = $(this).attr("dId");
                $.messager.confirm("删除提示", "确认删除选中记录吗?", function (r) {
                    if不同json如何使用jsonArray以及ajax如何取,实现读取新闻
 R包pheatmap：用参数一步步详细绘制热图
 R包pheatmap：用参数一步步详细绘制热图
 新闻网站个人中心(用户信息页面展示)流程分析
 利用JQuery一步步打造无缝滚动新闻
 论文泛读78建立新闻领域的问答系统