步步为营-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 > ) {
for (var i = ; 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(")/", ""), ));
var month = date.getMonth() + < ? "" + (date.getMonth() + ) : date.getMonth() + ;
var currentDate = date.getDate() < ? "" + 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对话框=>为信息添加链接=>显示对话框和并附上相应的值

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 > ) {
for (var i = ; 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(")/", ""), ));
var month = date.getMonth() + < ? "" + (date.getMonth() + ) : date.getMonth() + ;
var currentDate = date.getDate() < ? "" + 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[].NewsId);
$("#SubBy").text(strJson[].SubBy);
$("#TypeId").text(strJson[].TypeId);
//显示div
$("#detailDiv").css("display", "block");
//以对话框的形式弹出
$('#detailDiv').dialog({
width: ,
height: ,
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 (r) {
$.post("02-03新闻删除.ashx", { "id": id }, function (data) {
if (data == "ok") {
//清空原有数据
$("#tableList tr:gt(0)").remove();
//重新加载
pageLoad();
$.messager.show({
title: "提示",
msg: "删除成功!",
showType:"show"
});
} else {
$.messager.alert("提示","删除失败","error");
}
});
}
});
});
}
//05 添加新闻
function bindAddClick() {
//05-01 显示div
$("#addDiv").css("display", "block");
//05-02 以对话框形式弹出
$('#addDiv').dialog({
width: ,
height: ,
title: "添加新闻信息",
collapsible: true,
maximizable: true,
resizable: true,
modal: true,
buttons: [{
text: '添加',
iconCls: 'icon-ok',
handler: function () {
$.post("02-04新闻添加.ashx", { "title": $("#AddNewsTitle").val(), "content": $("#AddNewsContent").val() },
function (data) {
if (data == "ok") {
//清空原有数据
$("#tableList tr:gt(0)").remove();
//重新加载
pageLoad();
$.messager.show({
title: "提示",
msg: "添加成功!",
showType: "show"
});
//关闭对话框
$('#addDiv').dialog('close');
} else {
$.messager.alert("提示", "添加失败", "error");
}
});
}
}, {
text: 'Cancel',
handler: function () {
$('#detailDiv').dialog('close');
}
}]
}); }
//06 编辑信息
function bindEditClick() {
//06-01 添加单击事件
$(".edits").click(function () {
var id = $(this).attr("eId");
$.post("02-02新闻详细.ashx", { "id": id }, function (data) {
var strJson = $.parseJSON(data);
//为文本框赋值
$("#editNewsId").val(strJson[].NewsId);
$("#eidtNewsTitle").val(strJson[].NewsTitle);
$("#editNewsContent").val(strJson[].NewsContent);
$("#editTypeId").val(strJson[].TypeId);
//显示div
$("#editDiv").css("display", "block");
//以对话框的形式弹出
$('#editDiv').dialog({
width: ,
height: ,
title: "新闻详细信息",
collapsible: true,
maximizable: true,
resizable: true,
modal: true,
buttons: [{
text: 'Ok',
iconCls: 'icon-ok',
handler: function () {
//完成数据更新
editNewsInfo();
}
}, {
text: 'Cancel',
handler: function () {
$('#detailDiv').dialog('close');
}
}]
});
});
});
}
//06-02 完成数据的更新
function editNewsInfo() {
//01 获取表单中的数据,并将其序列化
var pars = $("#editForm").serializeArray();
$.post("02-05新闻编辑.ashx", pars, function (data) {
if (data == "ok") {
//清空原有数据
$("#tableList tr:gt(0)").remove();
//重新加载
pageLoad();
$.messager.show({
title: "提示",
msg: "修改成功!",
showType: "show"
});
//关闭对话框
$('#editDiv').dialog('close');
} else {
$.messager.alert("提示", "修改失败", "error");
}
});
} </script>
</head>
<body>
<input type="button" id="btnAddNewsInfo" value="添加新闻" onclick="bindAddClick()"/>
<table id="tableList">
<thead>
<th>新闻Id</th> <th>新闻标题</th> <th>新闻内容</th> <th>发布时间</th> <th>删除</th> <th>详细</th> <th>编辑</th>
</thead>
</table> 
<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>

 
<div id="addDiv">
<table>
<tr>
<td>新闻标题</td>
<td><input type="text" id="AddNewsTitle" /> </td>
</tr>
<tr>
<td>新闻内容</td>
<td><input type="text" id="AddNewsContent" /> </td>
</tr> </table>
</div>


<div id="editDiv">
<form id="editForm">
<input type="hidden" name="txtEditNewsId" id="editNewsId" />
<table>
<tr><td>新闻标题</td><td><input type="text" name="txtEditNewsTitle" id="eidtNewsTitle" /></td></tr>
<tr><td>新闻内容</td><td><input type="text" name="txtEditNewsContent" id="editNewsContent" /></td></tr>
<tr><td>新闻类型</td><td><input type="text" name="txtEditTypeId" id="editTypeId" /></td></tr>
</table>
</form>
</div>
</body>
</html>

2.6 分页
2.6.1 先改后台代码

修改前

using NewsBLL;
using NewsCommon;
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";
//01 设置每一页显示条数
int pageSize = ;
//02 设置当前页数
int pageIndex;
if (!int.TryParse(context.Request["pageIndex"], out pageIndex))
{
pageIndex = ;
}
//03 获取总的页数
int pageCount = bll.GetNewsInfoPageCount(pageSize);
//04 判断当前页数和总页数的关系
pageIndex = pageIndex < ? : pageIndex;
pageIndex = pageIndex > pageCount ? pageCount : pageIndex;
//05获取显示数据
List<NewsInfoModel> newsInfoList = bll.GetNewsInfoPage(pageIndex, pageSize);
//06 获取页码条
string pageBarStr = PageBarHelper.GetPageBar(pageIndex, pageCount, );
//很重要的一行代码
JavaScriptSerializer js = new JavaScriptSerializer();
//07
string str = js.Serialize(new { UList = newsInfoList, pageStr = pageBarStr });
context.Response.Write(str);
} public bool IsReusable
{
get
{
return false;
}
}
}
}

修改后

<!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="http://localhost:60660/style/style.css" rel="stylesheet" /> <link href="Css/tableStyle.css" rel="stylesheet" />
<link href="Css/themes/default/easyui.css" rel="stylesheet" />
<link href="Css/themes/icon.css" rel="stylesheet" /> <link href="http://localhost:60660/style/PageBarStyle.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(pageIndex) {
$.post("02-01新闻展示.ashx", {"pageIndex":pageIndex},
function (data) {
var stJson = $.parseJSON(data);//其结果为Json数组
//获取后台发来的Json对象
var len = stJson.UList.length;
if (len > ) {
for (var i = ; i < len; i++) {
$("<tr><td>" + stJson.UList[i].NewsId + "</td><td>" + stJson.UList[i].NewsTitle + "</td><td>" + stJson.UList[i].NewsContent + "</td><td>" + ChangeDateFormat(stJson.UList[i].SubTime) + "</td> <td><a href='javascript:void(0)' class='deletes' dId='" + stJson.UList[i].NewsId + "'>删除</a></td> <td><a href='javascript:void(0)' class='details' nId='" + stJson.UList[i].NewsId + "'>详细</a></td> <td><a href='javascript:void(0)' class='edits' eId='" + stJson.UList[i].NewsId + "'>编辑</a></td> </tr>").appendTo("#tableList"); //07显示页码条
$("#pageBarDiv").html(stJson.pageStr);
//08 为页码条添加click事件
bindPageBarClick();
//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(")/", ""), ));
var month = date.getMonth() + < ? "" + (date.getMonth() + ) : date.getMonth() + ;
var currentDate = date.getDate() < ? "" + 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[].NewsId);
$("#SubBy").text(strJson[].SubBy);
$("#TypeId").text(strJson[].TypeId);
//显示div
$("#detailDiv").css("display", "block");
//以对话框的形式弹出
$('#detailDiv').dialog({
width: ,
height: ,
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 (r) {
$.post("02-03新闻删除.ashx", { "id": id }, function (data) {
if (data == "ok") {
//清空原有数据
$("#tableList tr:gt(0)").remove();
//重新加载
pageLoad();
$.messager.show({
title: "提示",
msg: "删除成功!",
showType:"show"
});
} else {
$.messager.alert("提示","删除失败","error");
}
});
}
});
});
}
//05 添加新闻
function bindAddClick() {
//05-01 显示div
$("#addDiv").css("display", "block");
//05-02 以对话框形式弹出
$('#addDiv').dialog({
width: ,
height: ,
title: "添加新闻信息",
collapsible: true,
maximizable: true,
resizable: true,
modal: true,
buttons: [{
text: '添加',
iconCls: 'icon-ok',
handler: function () {
$.post("02-04新闻添加.ashx", { "title": $("#AddNewsTitle").val(), "content": $("#AddNewsContent").val() },
function (data) {
if (data == "ok") {
//清空原有数据
$("#tableList tr:gt(0)").remove();
//重新加载
pageLoad();
$.messager.show({
title: "提示",
msg: "添加成功!",
showType: "show"
});
//关闭对话框
$('#addDiv').dialog('close');
} else {
$.messager.alert("提示", "添加失败", "error");
}
});
}
}, {
text: 'Cancel',
handler: function () {
$('#detailDiv').dialog('close');
}
}]
}); }
//06 编辑信息
function bindEditClick() {
//06-01 添加单击事件
$(".edits").click(function () {
var id = $(this).attr("eId");
$.post("02-02新闻详细.ashx", { "id": id }, function (data) {
var strJson = $.parseJSON(data);
//为文本框赋值
$("#editNewsId").val(strJson[].NewsId);
$("#eidtNewsTitle").val(strJson[].NewsTitle);
$("#editNewsContent").val(strJson[].NewsContent);
$("#editTypeId").val(strJson[].TypeId);
//显示div
$("#editDiv").css("display", "block");
//以对话框的形式弹出
$('#editDiv').dialog({
width: ,
height: ,
title: "新闻详细信息",
collapsible: true,
maximizable: true,
resizable: true,
modal: true,
buttons: [{
text: 'Ok',
iconCls: 'icon-ok',
handler: function () {
//完成数据更新
editNewsInfo();
}
}, {
text: 'Cancel',
handler: function () {
$('#detailDiv').dialog('close');
}
}]
});
});
});
}
//06-02 完成数据的更新
function editNewsInfo() {
//01 获取表单中的数据,并将其序列化
var pars = $("#editForm").serializeArray();
$.post("02-05新闻编辑.ashx", pars, function (data) {
if (data == "ok") {
//清空原有数据
$("#tableList tr:gt(0)").remove();
//重新加载
pageLoad();
$.messager.show({
title: "提示",
msg: "修改成功!",
showType: "show"
});
//关闭对话框
$('#editDiv').dialog('close');
} else {
$.messager.alert("提示", "修改失败", "error");
}
});
}
//08 为页码条添加单击事件
function bindPageBarClick() {
$(".pageBar").click(function () {
var pageIndex = $(this).attr('href').split("=")[];
//清空原有数据
$("#tableList tr:gt(0)").remove();
pageLoad(pageIndex);
return false;
});
} </script>
</head>
<body>
<input type="button" id="btnAddNewsInfo" value="添加新闻" onclick="bindAddClick()"/>
<table id="tableList">
<thead>
<th>新闻Id</th> <th>新闻标题</th> <th>新闻内容</th> <th>发布时间</th> <th>删除</th> <th>详细</th> <th>编辑</th>
</thead>
</table>
<div id="pageBarDiv" class="page_nav"> </div>

<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>

 
<div id="addDiv">
<table>
<tr>
<td>新闻标题</td>
<td><input type="text" id="AddNewsTitle" /> </td>
</tr>
<tr>
<td>新闻内容</td>
<td><input type="text" id="AddNewsContent" /> </td>
</tr> </table>
</div>


<div id="editDiv">
<form id="editForm">
<input type="hidden" name="txtEditNewsId" id="editNewsId" />
<table>
<tr><td>新闻标题</td><td><input type="text" name="txtEditNewsTitle" id="eidtNewsTitle" /></td></tr>
<tr><td>新闻内容</td><td><input type="text" name="txtEditNewsContent" id="editNewsContent" /></td></tr>
<tr><td>新闻类型</td><td><input type="text" name="txtEditTypeId" id="editTypeId" /></td></tr>
</table>
</form>
</div>
</body>
</html>