NET环境下Jquery操作JSON初探

     Visual Stuio为.NET程序员提供了大量的服务端控件,当我们习惯于使用控件来做一些东西的时候,我们不知不觉已经对这些控件产生了依赖,同时这些控件似乎封装的太好了,它们的功能强大到我们几乎很少去考虑像其他语言(如PHP)必须要考虑的问题。比如,在针对客户端和服务端进行交互的场景,在.net里,我们只需要在客户端html控件中增加ruanat = “server”,并给予它一个id,就能够在后台轻松的访问该控件的各种属性。服务端控件就更不用说了。而在PHP里面,还要使用POST,GET之类的方法才行。最近学习了PHP之后,颇有感触,在做.NET页面时,更加喜欢采用客户端html控件,这样能让自己更能体会到客户端和服务端交互的过程。更令人兴奋的是,当你能将客户端语言和服务端语言结合起来的那种一气呵成的感觉。一直有个想法,作为一个做WEB开发的人员,如果能熟练的掌握前后台的开发,只有在那个时候开发出来的网站,才能更加准确的表达开发者内心的想法,那种境界显然是令人向往的(呵呵)。

     言归正传,还是回到今天的话题吧。当我们希望在页面上呈现出后台数据时,我们总是不会忘记.NET提供的强大的数据控件,如GridView,Repeater等等。对这些控件和table通过精心的布局,我们能够做出很好的表单效果。如下

效果01

 

    但是服务端控件肯定不是完美的,有些效果是很难呈现的(当然,可以实现,比如多用几个控件,然而,这个并没有体现出服务端控件的优势)。如果要结合页面的元素做一些不规则的数据呈现时,采用控件绑定显然不是一个很好的方式。这个时候,应该是JSON出场了。

JSON相关介绍

从W3school教程上对其描述如下

JSON:JavaScript 对象表示法(JavaScript Object Notation)

JSON是存储和交换文本信息的语法。类似与XML

JSON比XML更小、更快,更容易解析。

什么是JSON?

JSON指的是JavaScript对象表示法(JavaScript Object Notation)

JSON是轻量级的文本数据交换格式

JSON独立于语言

JSON具有自我描述性,更易理解

JSON使用JavaScript语法来描述数据对象,但是JSON仍然独立于语言和平台。JSON解析器和JSON库支持许多不同的编程语言。

JSON是JavaScript原生格式,这意味着在JavaScript中处理JSON不需要任何的API或者工具包。

JSON构建于两种结构:

“名称/值”对的集合。不同的语言中,它被理解为对象(object),记录(record),结构(struct),字典(Dictonary),哈希表(hash table),有键列表(keyed list),或者关联数组(associative array)。

值的有序列表(An ordered list of values)。在大部分语言中,它被理解成数组(array)。

这些都是常见的数据结构。事实上大部分现代计算机语言都以某种形式支持他们。这使得一种数据格式在同样基于这些结构的编程语言之间交换成为可能。

JSON具有以下这些形式:

对象是一个无序的“‘名称/值’对”集合。 一个对象以“{”(左括号)开始,“}”(右括号)结束。每个“名称”后跟一个“:”(冒号);“‘名称/值’ 对”之间使用“,”(逗号)分隔。

clip_image002

数组是值(value)的有序集合。一个数组以“[”(左中括号)开始,“]”(右中括号)结束。值之间使用“,”(逗号)分隔。

clip_image002[4]

值(value)可以是双引号括起来的字符串(string),数值(number),true,false,null,对象(object)或数组(array)。这些结构可以嵌套。

clip_image002[6]

字符串(string)是由双引号包围的任意数量的Unicode字符串的集合,使用反斜线定义。一个字符(character string),即一个单独的字符串(string)与C或者Java的字符串非常类似。

clip_image002[8]

数值(number)也与C或者Java的数值非常类似。除去未曾使用的八进制或者十六进制。除去一些编码细节。

clip_image002[10]

关于Json格式更多可参考(http://www.json.org/json-zh.html)

Jquery版本差异导致对JSON解析的问题

由于Jquery 1.4+版本对JSON格式有了严格的要求,一定要加双引号,如果没有双引号或者带的是单引号都不能正常通过。

如string data = "[{name:\"ants\",age:24},{name:\"lele\",age:23}]";//构建Json数据

这种格式在Jquery1.4版本一下应该是可以通过的(自己测试,在1.2.6版本能够通过)。

如果使用的是Jquery1.4以上版本,则一定要加双引号,

如必须是[{"name":"huxing","age":"24"},{"name":"lete","age":23}]这样一种格式。

clip_image002[12]

NET中Jquery操作JSON

.ashx 中提供JSON数据

这里也是一个非常简单的实例。

采用C#+Jquery+Json

首先新建一个.ashx文件。

 

clip_image002[6]

这是会得到一个jsonData.ashx的代码文件。

我们在其中写一个Json格式的字符串,用于传到客户端。

如下

clip_image002[14]

clip_image002[16]

由此,服务端已经准备好了JSON数据。

string data = "[{\"name\":\"" + name + "\",\"age\":\"" + age + "\"},{\"name\":\"lete\",\"age\":23}]";

再来看看客户端吧!

我们新建一个静态网页,命名为Dome.htm

如下

clip_image002[8]

注意在页面上添加对Jquery的引用。

客户端页面

clip_image002[18]

 

 

 

 客户端脚本

 

clip_image002[20]

运行效果

当单击“获取数据”后,显示如下

clip_image002[22]

3.2 .js(或者.json )中提供JSON数据

这个原理和上面的很类似,不在獒述。以下实例中有详解。

2012-02-17jQuery操作Json.rar

 

 

posted @ 2012-02-21 16:03  智客工坊  阅读(1111)  评论(0编辑  收藏  举报