5.JSON
- AJAX传递复杂数据如果自己进行格式定义的话会经历组装、解析的过程，因此AJAX中有一个事实上的数据传输标准JSON. JSON将复杂对象序列化为一个字符串，在浏览器端再将字符串反序列化为JavaScript可以读取的对象。JSON被几乎所有语言支持。
- C#中装.Net对象序列化为JSON字符串的方法： JavaScriptSerializer().Serialize(p),JavaScriptSerialzer在System.Web.Extenslons.dll中，是.net3.x中新增的类，如果在.net2.0中则需要用第三方的组件。
- JQuery AJAX得到的data是JSON格式数据，用$.parseJSON(data)方法将JSON格式数据解析为JavaScript对象就可以。
示例1：无刷新分布
在有些网站上看新闻或评论时，会看到一共有多少页的新闻或评论，当点击某页按钮时会显示此页的相关数据，会发现此页的表单并不没有提交动作。
原理：先计算数据表中总的评论数，如果每一页显示10条，则显示的总页数为总数除以10，如果余数不为0则再加上就是分的页数。 客户端在加载时会查询总页数，把每一页形成的按钮显示排列于一个table的行中，并为给个td单元格注册click事件，当用户单击分布按钮时，就会把此页码传递给服务端进行处理 ，服务端调用数据集的相关语句即可，（用ROW_NUMBER()函数）。
- 建立数据表及强类型数据集
GetPageData的Sql为：
SELECT * FROM
(select *,ROW_NUMBER() over(order by CreateDate) rownumber from dbo.T_Comment) t
where t.rownumber>=@startrow and t.rownumber<=@endrow
2.建立服务端（删除服务是为下面的示例的），为了使用JSON,我们声明了一个类，并让Json序列化成一系统对象给客户端解析。
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using 无刷新分页.DataSetPageCommentTableAdapters;
using System.Web.Script.Serialization; namespace 无刷新分页
{
/// <summary>
/// pagecomment 的摘要说明
/// </summary>
public class pagecomment : IHttpHandler
{ public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
string action=context.Request["action"];
if (action == "getpagecount") //获取总的页数
{
int counts = new T_CommentTableAdapter().GetAllRecords().Value; //为可空值，故后加value
int pages = counts / ;
if (counts % !=)
{
pages++;
}
context.Response.Write(pages);
}
else if (action == "getpagedata") //获取一个页的数据
{
int pageno = Convert.ToInt32(context.Request["pageno"]);//传进来的页码
int startrow = (pageno - )* + ;
int endrow = pageno * ; var datatable = new T_CommentTableAdapter().GetPageData(startrow, endrow);
List<comment> list = new List<comment>();
foreach (var row in datatable)
{
list.Add(new comment() { createdate = row.CreateDate.ToShortDateString(),msg=row.Msg });
}
JavaScriptSerializer jss = new JavaScriptSerializer();
string s = jss.Serialize(list);
context.Response.Write(s); }
else if (action == "deletepage")
{
int id=Convert.ToInt32(context.Request["id"]);
new T_CommentTableAdapter().Delete(id);
} } public bool IsReusable
{
get
{
return false;
}
}
} public class comment
{
public string createdate { get; set; }
public string msg { get; set; }
}
}
3.客户端Html源码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="js/jquery-1.10.1.min.js" type="text/javascript"></script> </head>
<body>
<ul id="ulcomment">
</ul>
<table >
<tr id="trcomment"> </tr>
</table>
<script type="text/javascript">
//先得到分页
$.post("pagecomment.ashx", { "action": "getpagecount" }, function (data, status) {//分页函数一定要在这个过程中
if (status == "success") {
for (var i = 1; i <= data; i++) {
var td = $("<td><a href=''>"+i+"</a></td>");
$("#trcomment").append(td);
} //得到每页的数据 $("#trcomment td").click(function (e) { //注册每个td 的事件
e.preventDefault(); //阻止超连接执行;
$.post("pagecomment.ashx", { "action": "getpagedata", "pageno": $(this).text() }, function (data, status) {
if (status == "success") {
var comments = $.parseJSON(data); $("#ulcomment").empty();
for (var i = 0; i < comments.length; i++) {
var comment = comments[i];
var li = $("<li>日期:" + comment.createdate + " 内容:" + comment.msg + "</li>");
$("#ulcomment").append(li);
}
}
});
});
} }); </script>
</body>
<script type="text/javascript"> </script>
</html>
4.运行截图
示例2.无刷新删除
我们可以用Repeater读取数据到页面上，但我们在itemTemplate中放一个button,不用服务端控件，当点击删除时会把当前记录的id发送到服务端进行删除，然后再根据服务端返回的数据确定是否删除成功，如果删除成功，则用代码删除客户端的相关记录。
在js中如何标记是点了哪个按钮，如何知道是哪条记录呢？ 我们可以给button增加两个属性，一个标记为当前id,一个标记为当前的操作类型。我们还可以用以上的服务羰和数据集：
如下为客户端的html源码：
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="无刷新删除.aspx.cs" Inherits="无刷新分页.无刷新删除" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="js/jquery-1.10.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("input[btntype=del]").click(function () { //给类型为input且属性btntype=del的元素注册事件
var id = $(this).attr("btnid");
$.post("pagecomment.ashx", { "action": "deletepage", "id": id }, function (data, status) {
if (status == "success") {
$("input[btnid=" + id + "]").parent().parent().remove();//删除自身的表单
alert("删除成功.");
}
});
});
}); </script>
</head>
<body>
<form id="form1" runat="server">
<div> <asp:ObjectDataSource ID="ObjectDataSource1" runat="server"
DeleteMethod="Delete" InsertMethod="Insert"
OldValuesParameterFormatString="original_{0}" SelectMethod="GetData"
TypeName="无刷新分页.DataSetPageCommentTableAdapters.T_CommentTableAdapter"
UpdateMethod="Update">
<DeleteParameters>
<asp:Parameter Name="Original_id" Type="Int32" />
</DeleteParameters>
<InsertParameters>
<asp:Parameter Name="CreateDate" Type="DateTime" />
<asp:Parameter Name="Msg" Type="String" />
</InsertParameters>
<UpdateParameters>
<asp:Parameter Name="CreateDate" Type="DateTime" />
<asp:Parameter Name="Msg" Type="String" />
<asp:Parameter Name="Original_id" Type="Int32" />
</UpdateParameters>
</asp:ObjectDataSource>
<asp:ListView ID="ListView1" runat="server" DataKeyNames="id"
DataSourceID="ObjectDataSource1" InsertItemPosition="LastItem"> <EmptyDataTemplate>
<table runat="server" style="">
<tr>
<td>
未返回数据。</td>
</tr>
</table>
</EmptyDataTemplate>
<InsertItemTemplate>
<tr style="">
<td>
<asp:Button ID="InsertButton" runat="server" CommandName="Insert" Text="插入" />
<asp:Button ID="CancelButton" runat="server" CommandName="Cancel" Text="清除" />
</td>
<td>
</td>
<td>
<asp:TextBox ID="CreateDateTextBox" runat="server"
Text='<%# Bind("CreateDate") %>' />
</td>
<td>
<asp:TextBox ID="MsgTextBox" runat="server" Text='<%# Bind("Msg") %>' />
</td>
</tr>
</InsertItemTemplate>
<ItemTemplate>
<tr style="">
<td>
<input type="button" btnid='<%#Eval("id") %>' btntype="del" value="无刷新删除" />
<asp:Button ID="EditButton" runat="server" CommandName="Edit" Text="编辑" />
</td>
<td>
<asp:Label ID="idLabel" runat="server" Text='<%# Eval("id") %>' />
</td>
<td>
<asp:Label ID="CreateDateLabel" runat="server"
Text='<%# Eval("CreateDate") %>' />
</td>
<td>
<asp:Label ID="MsgLabel" runat="server" Text='<%# Eval("Msg") %>' />
</td>
</tr>
</ItemTemplate>
<LayoutTemplate>
<table runat="server">
<tr runat="server">
<td runat="server">
<table ID="itemPlaceholderContainer" runat="server" border="0" style="">
<tr runat="server" style="">
<th runat="server">
</th>
<th runat="server">
id</th>
<th runat="server">
CreateDate</th>
<th runat="server">
Msg</th>
</tr>
<tr ID="itemPlaceholder" runat="server">
</tr>
</table>
</td>
</tr>
<tr runat="server">
<td runat="server" style="">
<asp:DataPager ID="DataPager1" runat="server">
<Fields>
<asp:NextPreviousPagerField ButtonType="Button" ShowFirstPageButton="True"
ShowLastPageButton="True" />
</Fields>
</asp:DataPager>
</td>
</tr>
</table>
</LayoutTemplate> </asp:ListView> </div>
</form>
</body>
</html>
运行截图：
5.JSON的更多相关文章
- 使用TSQL查询和更新 JSON 数据
JSON是一个非常流行的,用于数据交换的文本数据(textual data)格式,主要用于Web和移动应用程序中.JSON 使用“键/值对”(Key:Value pair)存储数据,能够表示嵌套键值对 ...
- 【疯狂造轮子-iOS】JSON转Model系列之二
[疯狂造轮子-iOS]JSON转Model系列之二 本文转载请注明出处 —— polobymulberry-博客园 1. 前言 上一篇<[疯狂造轮子-iOS]JSON转Model系列之一> ...
- 【疯狂造轮子-iOS】JSON转Model系列之一
[疯狂造轮子-iOS]JSON转Model系列之一 本文转载请注明出处 —— polobymulberry-博客园 1. 前言 之前一直看别人的源码,虽然对自己提升比较大,但毕竟不是自己写的,很容易遗 ...
- Taurus.MVC 2.2 开源发布：WebAPI 功能增强（请求跨域及Json转换）
背景: 1:有用户反馈了关于跨域请求的问题. 2:有用户反馈了参数获取的问题. 3:JsonHelper的增强. 在综合上面的条件下,有了2.2版本的更新,也因此写了此文. 开源地址: https:/ ...
- .NET Core系列 ： 2 、project.json 这葫芦里卖的什么药
.NET Core系列 : 1..NET Core 环境搭建和命令行CLI入门 介绍了.NET Core环境,本文介绍.NET Core中最重要的一个配置文件project.json的相关内容.我们可 ...
- 一个粗心的Bug，JSON格式不规范导致AJAX错误
一.事件回放 今天工作时碰到了一个奇怪的问题,这个问题很早很早以前也碰到过,不过没想到过这么久了竟然又栽在这里. 当时正在联调一个项目,由于后端没有提供数据接口,于是我直接本地建立了一个 json ...
- JSON.parse()和JSON.stringify()
1.parse 用于从一个字符串中解析出json 对象.例如 var str='{"name":"cpf","age":"23&q ...
- json与JavaScript对象互换
1,json字符串转化为JavaScript对象: 方法:JSON.parse(string) eg:var account = '{"name":"jaytan&quo ...
- .NET平台开源项目速览(18)C#平台JSON实体类生成器JSON C# Class Generator
去年,我在一篇文章用原始方法解析复杂字符串,json一定要用JsonMapper么?中介绍了简单的JSON解析的问题,那种方法在当时的环境是非常方便的,因为不需要生成实体类,结构很容易解析.但随着业务 ...
- WebApi接口 - 响应输出xml和json
格式化数据这东西,主要看需要的运用场景,今天和大家分享的是webapi格式化数据,这里面的例子主要是输出json和xml的格式数据,测试用例很接近实际常用情况:希望大家喜欢,也希望各位多多扫码支持和点 ...
随机推荐
- Android开发之屏幕方向
一.处理屏幕方向变化的两种技术 1.锚定方法 2.调整大小和重新定位,这种方法一般是分别为横向和纵向两种模式各自定义用户界面xml界面文件,当方向变化时读取对应的界面配置文件即可. 二.检测屏幕方向改 ...
- PHP 数组转字符串，与字符串转数组
implode 使用一个字符串将数组变成字符串 <?php $array = array('lastname', 'email', 'phone'); $comma_separated = im ...
- 如何在OpenWRT环境下做开发
1.搭建开发环境 首先,在执行make menuconfig后,会出现下图: 其中,图中红框部分是我定制路由器的系统版本,大家可以根据不同的路由器进行不同的选择:绿框部分表示我们需要编译一个SDK开发 ...
- hadoop_并行写操作思路
这篇文章是关于,如何修改hadoop的src以实现在client端上传大文件到HDFS的时候, 为了提高上传的效率实现将文件划分成多个块,将块并行的写入到datanode的各个block中 的初步的想 ...
- NSAttributedString用法
以前看到这种字号和颜色不一样的字符串,想出个讨巧的办法就是“¥150”一个UILabel,“元/位”一个UILabel.今天翻看以前的工程,command点进UITextField中看到［attrib ...
- IOS-UI- UIScrollView 滚动视图（1）
滚动视图多个页面实现的原理 滚动视图位置不变 内容的位置发生改变. 滚动视图的运用1.分页查看图片 2.查看大图片 3.当内容过多需要一个页面显示,如:注册,修改个人信息等等4.当不希望用户感觉咱们的 ...
- [转]深入理解JavaScript系列
文章转自:汤姆大叔-深入理解JavaScript系列文章 深入理解JavaScript系列文章,包括了原创,翻译,转载,整理等各类型文章,如果对你有用,请推荐支持一把,给大叔写作的动力. 深入理解Ja ...
- POJ 1631 Bridging signals（LIS O(nlogn)算法）
Bridging signals Description 'Oh no, they've done it again', cries the chief designer at the Waferla ...
- c++builder调用vc的dll
$bcb/bin目录中有个implib.exe 把你的vc.dll和implib.exe复制到c盘根目录下 运行cmd 进入c盘根目录执行 c:\implib -a cb.lib vc.dll 会生成 ...
- js 中对象--属性相关操作
查询属性: 可以用 对象.属性 来查询属性和属性方法 或者 对象[“属性”] 来查询属性和属性方法 演示代码: <script ...