JSON是在web应用中频繁使用的一种数据结构,在使用过程中经常出现格式错误等等问题,如果能清晰的了解JSON的构成,那将会避免这些错误

英文好的可以查看原文:

地址:http://www.codeproject.com/Articles/773359/Introduction-to-JSON-Using-JSON-in-ASP-NET-Web-App

介绍JSON,在ASP.NET Web应用中使用JSON,使用JSON与与数据库进行交互

介绍

在文章中,我将介绍JSON,例如什么是JSON,JSON的用途,为什么是JSON等等,还常见一个简单的示例。在实例中,我将展示怎么在.NET的web应用中使用JSON和如何使用JSON和数据库进行数据交互。在实例中,我通过调用web方法使用json从数据库取的数据,而没有使用服务器端的数据往返(使用AJAX做数据交互,没有使用一般的后端代码进行数据交互)。

背景

JSON 是JavaScript Object Notation的简写,是 Douglas Crockford发明的。实际上,JSON 是XML的一个轻量级的替代品,语言和平台无关的脚本,你可以在www.w3schools.com网站上看到一个简短的介绍。

JSON 是一个通用的,语言独立的数据存储格式。实际上,它类似XML,XML使用标签,而JSON是基于JavaScript对象字符标记的。现在很多编程语言对JSON都是支持的,包括C#, ASP.NET, Java, Perl, PHP, Python, and Ruby. 更多的JSON信息可以在www.JSON.org. 去查看

What is JSON? 【JSON是什么】?
  • JSON是JavaScript中的标准的对象表示法
  • JSON是轻量级的文本-数据交换格式
  • JSON是信息存储和文本信息交换的语法,类似XML
  • JSON比XML更小,更见快速和易于解析
  • JSON是语言独立的 .
  • JSON使用JavaScript语法去描述数据对象,但是JSON依然是语言和平台无关的
  • JSON解析器和JSON库存在于多个不同的语言平台
  • JSON文件后缀名是.json
  • JSON的互联网媒体类型 是application/js.
Uses of JSON 【JSON的使用】
  • JSON格式用来在网络上序列化和传递结构化数据
  • 主要应用在服务器与客户端之间传输数据
  • Web Services 和APIs 使用JSON格式去提供公用数据
  • 它可以用在现在的编程语言上
JSON with JavaScript 【JSON和JavaScript】

JSON是JavaScript中的对象文本标记的一个子集【1】。由于JSON是一个JavaScript的一个子集,JSON在JavaScript中提供了简单的方式来创建和存贮结构数据。

JSON的文本句法与JavaScript创建对象方式是完全一致的。因此,JavaScript程序可以使用内建的eval() 函数处理JSON 数据到JavaScript对象。

JSON数据可以使用AJAX进行传输

【1】原文:JSON is a subset of the object literal notation of JavaScript.  粗体部分字面意思 JavaScript对象字符标记 翻译起来有些别扭。自己理解下应该就是说JavaScript中的表示对象的语法。

Why JSON?  【为什么选择JSON】

对于AjAX应用程序来说,JSON 比XML更快更容易:

使用XML

  • 取的一个XML文档
  • 使用XML DOM来循环XML文档
  • 提取值存储到变量

使用JSON

  • 取的一个JSON字串
  • eval()解析字串
JSON语法

JSON语法是JavaScript对象表示法的一个子集:

  • 数据以键值对方式存储 例如:"name":"liyang"
  • 数据以逗号分隔 例如:"name":"liyang","age":50
  • objects对象用花括号包住 例如:{"name":"liyang","age":50}
  • arrays数组用方括号包住 例如:[{"name":"liyang","age":50},{"name":"lilei","age":24}]

Let’s have a look at the syntax:

让我们看一下语法

<script>
var data={ "Name" : "Arv" };
alert(data.Name);
</script>

首先,我创建了一个变量来保存数据,然后使用JSON来定义 一个对象,只有一个名称为:Name值为Arv的项

现在我添加一些值:

<script>
var data={ "Name":"Arv", "Designation":"Software Engineer", "ExperienceInYears":4
};
</script>
alert('Name : ' + data.Name + 'Designation : ' + data.Designation + 'Total Experience : ' + data.ExperienceInYears);

在数组中使用JSON存储数据

要创建一个JSON数组,将多个objects包含在方括号中

Example:

var description= [{"Name":"Arv", "Designation":"Software Engineer", "ExperienceInYears":4},
{"Name":"Rsh", "Designation":"Tester", "ExperienceInYears":2}];

如果要访问信息,我们需要在数组的某个索引下使用相应键名来取的我们想要的数据

例如:

document.write(description[0].Name); // Output: Arv
document.write(description[0].ExperienceInYears); // Output: 4
document.write(description[1].Name); // Output: Rsh

在ASP.NET web引用中使用JSON

在我们的引用中使用JSON,我们需要编写我们的JavaScript方法,在head标签中调用。 或者像下面这样编写:

<script type = "text/javascript">
//write JSON Code
</script>

还有和服务器端通讯的JSONRequest。所以我创建了一个名字为JSONDemoApplication的web应用

你可以在附件列表中找到我上传的一个示例应用,在我的实例中,我创建了一个简单的页面 命名为JSONTest.aspx.

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="JSONTest.aspx.cs" Inherits="_JSONTest" %>

<!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>JSON Application</title>
</head>
<body style = "font-family:Arial; font-size:10pt">
<form id="form1" runat="server">
<center>
<table>
<tr><td colspan="" align="center">
Enter your UserName and select Department See SQL script to know default username and department
</td></tr>
<tr>
<td align="right">
UserName : </td>
<td align="left">
<asp:TextBox ID="txtUserName" runat="server"
onkeyup = "OnChange(this)" onblur= "ShowAvailability()"></asp:TextBox>
<span id = "mesg"></span> </td>
<td align="right">
Department : </td>
<td align="left">
<asp:DropDownList ID="ddlDepartment" runat="server">
<asp:ListItem Text="HR" Value=""></asp:ListItem>
<asp:ListItem Text="Fianace" Value=""></asp:ListItem>
<asp:ListItem Text="Admin" Value=""></asp:ListItem>
<asp:ListItem Text="IT" Value=""></asp:ListItem>
</asp:DropDownList>
<span id = "msg2"></span> </td>
</tr>
</table>
</center>
</form>
</body>
</html>
JSONRequest

JSONRequest 是一个全局的JavaScript对象,它提供了三个方法: post, get, and cancel.

JSONRequest.post【1】

JSONRequest.post does an HTTP POST of the serialization of a JavaScript object or array, gets the response, and parses the response into a JavaScript value. If the parse is successful, it returns the value to the requesting script. In making the request, no HTTP authentication or cookies are sent. Any cookies returned by the server cause the request to fail. The JSONRequest service can only be used to send and receive JSON-encoded values. JSONRequest cannot be used to retrieve other text formats.

In the demo application, I am using post method.

JSONRequest.post takes some parameters:

url: The URL to POST to. The URL does not need to be related to the page's URL.

send- object: The JavaScript object or array to send as the POST data. It will be serialized as JSON text. Cyclical structures will fail.

done- function (requestNumber, value, exception): The function to be called when the request is completed. If the request was successful, the function will receive the request number and the returned value. If it is not successful, it will receive the request number and an exception object. The done function will not be called until after the call to JSONRequest returns a serial number.

【1】这段英文看代码意思大概就是说下AJAX请求的东东,大家了解即可,就不翻译了。(实在是不好翻译)

So I have created a ShowAvailability function and create JSONRequest:

<script type = "text/javascript">
function ShowAvailability() {
$.ajax({
type: "POST",//using post method to send data
url: "CS.aspx/CheckUserName", //path to find web method CheckUserName
data: '{userName: "' + $("#<%=txtUserName.ClientID%>")[0].value + '" }',//assign value to username from textbox
contentType: "application/json; charset=utf-8",
dataType: "json",//datatype json is compulsory
success: OnSuccess,
failure: function(response) {
alert(response);
}
});
}
function OnSuccess(response) {
var mesg = $("#mesg")[0]; switch (response.d) {
case "0":
mesg.style.color = "red";
mesg.innerHTML = "Username not exist";
break;
case "1":
mesg.style.color = "green";
mesg.innerHTML = "Available";
break;
case "error":
mesg.style.color = "red";
mesg.innerHTML = "Error occurred";
break;
}
}
function OnChange(txt) {
$("#mesg")[0].innerHTML = "";
}
</script>

把代码放在head标签中间:

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="JSONTest.aspx.cs" Inherits="_JSONTest" %>
<!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="scripts/jquery-1.9.1.js" type="text/javascript"></script>
<script type = "text/javascript">
function ShowAvailability() {
$.ajax({
type: "POST",
url: "CS.aspx/CheckUserName",
data: '{userName: "' + $("#<%=txtUserName.ClientID%>")[].value + '" }',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: OnSuccess,
failure: function(response) {
alert(response);
}
});
}
function OnSuccess(response) {
var mesg = $("#mesg")[];
switch (response.d) {
case "":
mesg.style.color = "red";
mesg.innerHTML = "Username not exist";
break;
case "":
mesg.style.color = "green";
mesg.innerHTML = "Available";
break;
case "error":
mesg.style.color = "red";
mesg.innerHTML = "Error occurred";
break;
}
}
function OnChange(txt) {
$("#mesg")[].innerHTML = "";
}
</script>
</head>
<body style = "font-family:Arial; font-size:10pt">
<form id="form1" runat="server">
<center>
<table>
<tr><td colspan="" align="center">
Enter your UserName and select Department See SQL script to know default username and department
</td></tr>
<tr>
<td align="right">UserName : </td>
<td align="left"><asp:TextBox ID="txtUserName" runat="server"
onkeyup = "OnChange(this)" onblur= "ShowAvailability()">
</asp:TextBox><span id = "mesg"></span> </td>
<td align="right">Department : </td>
<td align="left">
<asp:DropDownList ID="ddlDepartment" runat="server">
<asp:ListItem Text="HR" Value=""></asp:ListItem>
<asp:ListItem Text="Fianace" Value=""></asp:ListItem>
<asp:ListItem Text="Admin" Value=""></asp:ListItem>
<asp:ListItem Text="IT" Value=""></asp:ListItem>
</asp:DropDownList> <span id = "msg2"></span> </td>
</tr>
</table>
</center>
</form>
</body>
</html>

现在我们创建一个web方法,来响应我们在前台【JSONTest.aspx】中写的,名称为CheckUserName 的方法,并给它分配一个参数

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data.SqlClient;
using System.Configuration;
using System.Data; public partial class _JSONTest : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
[System.Web.Services.WebMethod]
public static string CheckUserName(string userName)//parameter send from JSON call
{
string returnValue = string.Empty;
try
{
string consString = ConfigurationManager.ConnectionStrings["conString"].ConnectionString;
SqlConnection conn = new SqlConnection(consString);
SqlCommand cmd = new SqlCommand("Sp_CheckAvailability", conn);//SP to check username available in database
cmd.CommandType = CommandType.StoredProcedure;
cmd.Parameters.AddWithValue("@UserName", userName.Trim());
conn.Open();
returnValue = cmd.ExecuteScalar().ToString();
conn.Close();
}
catch(SqlException ex)
{
returnValue = "error" + ex.ToString();
}
return returnValue;
}
}

我创建了一个表插入了一些数据:

CREATE DATABASE MyJSONDB ----create database
GO
USE MyJSONDB
GO
CREATE TABLE tblLogin ---create table to check data
(
EmpUserName NVARCHAR(100),
EmpDepartment NVARCHAR(100)
)
GO
----Insert dummy data
INSERT INTO tblLogin VALUES('hruser','')
INSERT INTO tblLogin VALUES('Fianaceuser','')
INSERT INTO tblLogin VALUES('adminuser','')
INSERT INTO tblLogin VALUES('ituser','dd','')
INSERT INTO tblLogin VALUES('productionuser','')
INSERT INTO tblLogin VALUES('testinguser','')
GO

然后创建了一个存储过程来检查数据库是否已经存在记录:

CREATE PROCEDURE Sp_CheckAvailability ( @UserName NVARCHAR(100)='')
AS
BEGIN
SELECT COUNT(*) FROM tblLogin WHERE EmpUserName=@UserName
END

Points of Interest

可以看到,在AJAX环境下,我们调用web服务,我们期望获得某种格式的一些数据。好,假如我们在AJAX请求返回XML格式数据,我们需要把XML数据传递给一个XML解析器来处理,然后才能在JavaScript中使用和操作数据。如果我们接受JSON的数据,我们不需要任何事而把结果赋值给一个JavaScript变量,因为JSON已经是JavaScript,我们可以像平常一样直接操作数据。

History

  • 18th May, 2014: Initial version
  • 23 May, 2014 :attchaed demo application to download

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

JSON 小记的更多相关文章

  1. JSON小记

    json: { "1" : "2", "1" : "3" } 在json中如果有重复的key,会取最后一个key的值,如 ...

  2. Newtonsoft.Json小记

    /*json相关*/ //http://www.cnblogs.com/hongfei/p/3593936.html string jsonObject = "{\"phone\& ...

  3. 临时处理小记:把Numpy的narray二进制文件转换成json文件

    临时处理一个Numpy的二进制文件,分析知道里面是dict类型,简单小记一下,如果Numpy和Python基础不熟悉可以看我之前写的文章 In [1]: %%time import numpy as ...

  4. json学习小记

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  5. JavaScript中字符串转Json方法小记

    例如: JSON字符串:var str1 = '{ "name": "cxh", "sex": "man" }'; JS ...

  6. JavaScript对json操作小记

    JSON是一种轻量级的数据交换格式,同时,JSON是 JavaScript 原生格式,因此我们可以直接处理它不需要依赖任何工具包或者插件.因此,好多后台都会选择返回给前端这种非常友好的数据格式. 引子 ...

  7. (转)JavaScriptSerializer,DataContractJsonSerializer解析JSON字符串功能小记

    JsonAbout: using System;using System.Collections.Generic;using System.Linq;using System.Text;using S ...

  8. Json数组操作小记 及 JSON对象和字符串之间的相互转换

    [{"productid":"1","sortindex":"2"},{"productid":&q ...

  9. 小记:对Android网络下载工具的初步封装!(包括json,字符串下载(volley),和图片下载(glide))

    import android.content.Context; import android.net.ConnectivityManager; import android.net.NetworkIn ...

随机推荐

  1. 后台树状菜单,js实现递归无限分类

    //新闻类别管理 public function new_classify() { $arr = M('news_classify')->where("fid = 0")-& ...

  2. pyhton3多线程

    from time import ctime,sleep def music(): for i in range(2): print ("I was listening to music. ...

  3. UML类图设计

    大纲: 在Visio里,包和类的关系是包含关系,将类拖入包的文件夹之后,关系就建立了,二元关联符号可以设置为:聚合.合成.接口:空心圆+直线(唐老鸭类实现了‘讲人话’):依赖:虚线+箭头(动物和空气的 ...

  4. Scala:(2)控制结构

    (1)if else val s=) else -1 (2)循环 ){ r=r*n n-= } ///for 循环 to n) r=r*i //until val s="Hello" ...

  5. eclipse中build workspace的相关优化

    网上流传的各种的eclipse的调优的方法都大同小异,但是调优的基本上针对eclipse或者myclipse的本身,比如关掉validate和启动项,文件拼写,和自动构建等,调过之后,等个eclips ...

  6. CSS如何实现圆角的outline效果?

    一.首先,outline是个很牛逼的东西 温故而知鑫,10年的时候写过一篇可用性方面的文章:“页面可用性之outline轮廓外框的一些研究”,还算挺有用的:3年之后,也就是13年,介绍了个没什么使用价 ...

  7. spring揭秘 读书笔记 二 BeanFactory的对象注册与依赖绑定

    本文是王福强所著<<spring揭秘>>一书的读书笔记 我们前面就说过,Spring的IoC容器时一个IoC Service Provider,而且IoC Service Pr ...

  8. luogu P3198 [HNOI2008]遥远的行星

    bzoj 洛谷 这题意是不是不太清楚 真正题意:求\[f_i=\sum_{j=1}^{\lfloor i*A \rfloor} \frac{M_i*M_j}{i-j}\] 似乎只能\(O(n*\lfl ...

  9. webbrowser 模块的 open()方法

    webbrowser 模块的 open()函数可以启动一个新浏览器,打开指定的 URL.在交 互式环境中输入以下代码: >>> import webbrowser >>& ...

  10. Python3 解压序列

    一 普遍情况: x,y,z = 1,2,3 print("x:",x) # x:1 print("y:",y) # y:2 print("z:&quo ...