Jquery操作Json格式的數據在我們平時的項目中也經常運用；最近看Jquery權威指南中就有一章節是對這方面的整理總結；最后通過一個Asp.net結合一般處理程序ashx的實例，基本上能滿足項目中平時遇到的問題；
1：Json格式在JS中直接通過"對象.屬性名稱"就可以進行訪問；
<head>
<title>jQuery 讀取JSON 數據</title>
<script src="JScript/jquery-1.8.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
var objInfo = {
'name': '踏浪帥',
'sex': '男',
'Age': '20'
};
$(function() {
$("#Button1").click(function() {
var strHTML = "";
strHTML += "姓名：" + objInfo.name + "<br>";
strHTML += "性別：" + objInfo.sex + "<br>";
strHTML += "年齡：" + objInfo.Age + "<hr>";
$("#Tip").html(strHTML);
}); ;
});
</script>
</head>
<body>
<div class="iframe">
<div class="title">
<input id="Button1" type="button"
class="btn" value="獲取數據" />
</div>
<div class="content">
<div id="Tip"></div>
</div>
</div>
</body>
</html>
2：在前端JS字符串轉化成JSON格式
2.1 通過eval()進行；
<head>
<title>jQuery 操作JSON 數據</title>
<script src="JScript/jquery-1.8.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
var strInfo = "{'name': '小明','sex': '男','email': 'abc@126.com','date':1349340837359}";
$(function() {
var strV0 = "原始數據";
var strV1 = "變化數據";
var strHTML = "";
//將字符串轉成JSON對象
var objInfo = eval('(' + strInfo + ')');
//根據按鈕文字改變JSON對象中的值
if ($(this).val() == strV1) {
objInfo.date = new Date().getTime();
}
strHTML += "姓名：" + objInfo.name + "<br>";
strHTML += "性別：" + objInfo.sex + "<br>";
strHTML += "郵箱：" + objInfo.email + "<br>";
strHTML += "時間：" + objInfo.date + "<hr>";
//切換按鈕顯示的文字
if ($(this).val() == strV0) {
$(this).val(strV1);
} else {
$(this).val(strV0);
}
//顯示處理后的數據
$("#Tip").html(strHTML);
});
});
</script>
</head>
<body>
<div class="iframe">
<div class="title">
<input id="Button1" type="button"
class="btn" value="原始數據" />
</div>
<div class="content">
<div id="Tip"></div>
</div>
</div>
</body>
</html>
注意:為什么要 eval這里要添加 “("("+data+")");//”呢？原因在於：eval本身的問題。 由於json是以”{}”的方式來開始以及結束的，在JS中，它會被當成一個語句塊來處理，所以必須強制性的將它轉換成一種表達式。加上圓括號的目的是迫使eval函數在處理JavaScript代碼的時候強制將括號內的表達式（expression）轉化為對象，而不是作為語句（statement）來執行。舉一個例子，例如對象字面量{}，如若不加外層的括號，那么eval會將大括號識別為JavaScript代碼塊的開始和結束標記，那么{}將會被認為是執行了一句空語句。所以下面兩個執行結果是不同的：alert(eval("{}"); // return undefined alert(eval("({})");// return object[Object] 對於這種寫法，在JS中，可以到處看到。如: (function()) {}(); 做閉包操作時等。
2.2 通過jQuery.parseJSON()進行轉化成JSON；接受一個JSON字符串，返回解析后的對象。傳入一個畸形的JSON字符串會拋出一個異常。比如下面的都是畸形的JSON字符串：{test: 1} （ test 沒有包圍雙引號）;{'test': 1} （使用了單引號而不是雙引號） 另外，如果你什么都不傳入，或者一個空字符串、null或undefined，parseJSON都會返回 null 。
<head>
<title>jQuery 操作JSON 數據</title>
<script src="JScript/jquery-1.8.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
var strInfo = '{"name": "小明","sex": "男","email": "abc@126.com","date":1349340837359}'; //注意單雙引號
$(function () {
//定義按鈕文字變量
var strV0 = "原始數據";
var strV1 = "變化數據";
$("#Button1").click(function () {
var strHTML = "";
//將字符串轉成JSON對象
var objInfo = jQuery.parseJSON(strInfo);
//根據按鈕文字改變JSON對象中的值
if ($(this).val() == strV1) {
objInfo.date = new Date().getTime();
}
strHTML += "姓名：" + objInfo.name + "<br>";
strHTML += "性別：" + objInfo.sex + "<br>";
strHTML += "郵箱：" + objInfo.email + "<br>";
strHTML += "時間：" + objInfo.date + "<hr>";
//切換按鈕顯示的文字
if ($(this).val() == strV0) {
$(this).val(strV1);
} else {
$(this).val(strV0);
}
//顯示處理后的數據
$("#Tip").html(strHTML);
});
});
</script>
</head>
<body>
<div class="iframe">
<div class="title">
<input id="Button1" type="button"
class="btn" value="原始數據" />
</div>
<div class="content">
<div id="Tip"></div>
</div>
</div>
</body>
</html>
3：上面的Json格式都是比較簡單類型（只是name:value類型），還有一種是帶嵌套平時我們也會經常碰到；Json中是以"[]"來包含；我們可以通過each進行循環顯示出來；
<head>
<title>jQuery 遍歷JSON 數據</title>
<script src="JScript/jquery-1.8.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
var objData = {
member: [{
grade: "一年級",
students: {
name: ["劉小芳", "李大明"]
}
}, {
grade: "二年級",
students: {
name: ["陳優", "王小海", "朱紅"]
}
}, {
grade: "三年級",
students: {
name: ["張妍", "蔡霞"]
}
}]
};
function add_Grade() {
var objmember = objData.member;
var strHTML_0 = "";
$.each(objmember, function(index) {
strHTML_0 += '<a href="javascript:" onclick="lnk_Click(' + index + ')">'
+ objmember[index].grade
+ '</a> ';
});
$(".title").html("年級優秀學生：" + strHTML_0);
};
function lnk_Click(i) {
var objstudent = objData.member[i].students.name;
var strHTML_1 = "";
$.each(objstudent, function(index) {
strHTML_1 += ' ' + objstudent[index] + ' ';
});
$("#Tip").html(strHTML_1);
};
$(function() {
add_Grade();
lnk_Click(0)
});
</script>
</head>
<body>
<div class="iframe">
<div class="title"></div>
<div class="content">
<div id="Tip"></div>
</div>
</div>
</body>
</html>
4：在ASP.NET中操作JSON一般是與ashx進行結合；后台返回JSON在前台進行顯示；下面的實例通過AJAX獲得后台對象實體的字符串然后顯示；
a：前台頁面通過ajax調用后台的ashx程序獲得數據
<head runat="server">
<title></title>
<script src="Scripts/jquery-1.8.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
var strHtml = "";
$("#BtnGetJson").click(function () {
$.ajax({
url: "ToJson.ashx",
type: "GET",
dataType: "json",
success: function (data) {
$.each(data, function (index) {
strHtml += ' ' + data[index].Name + ' ' + data[index].PassWord + '<br/>';
});
$("#MyDiv").html(strHtml);
}
});
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<input id="BtnGetJson" type="button" value="獲得JSON值" />
<div id="MyDiv">
</div>
</form>
</body>
</html>
b：新建一個ToJson.ashx的一般處理程序類，讓它將后台的實體對象進行轉化返回到前台
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace JqueryForJson
{
/// <summary>
/// ToJson 的摘要說明
/// </summary>
public class ToJson : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
List<User> list = new List<User>();
list.Add(new User() { Name = "踏浪帥", PassWord = "123456" });
list.Add(new User() { Name = "wujy", PassWord = "456789" });
string JsonStr = JsonHelper.GetJson<List<User>>(list);//如果是單個實體GetJson<User>(model)
context.Response.Write(JsonStr);
}
public bool IsReusable
{
get
{
return false;
}
}
}
public class User
{
public string Name { get; set; }
public string PassWord { get; set; }
}
}
c：這邊有一個把實體轉化成JSON字符串的類，當然也可以通過其它方式進行轉化；
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Runtime.Serialization.Json;
using System.ServiceModel.Web;///記得引用這個命名空間
using System.IO;
using System.Text;
/// <summary>
/// Summary description for JsonHelper
/// </summary>
public class JsonHelper
{
public JsonHelper()
{
//
// TODO: Add constructor logic here
//
}
/// <summary>
/// 把對象序列化 JSON 字符串
/// </summary>
/// <typeparam name="T">對象類型</typeparam>
/// <param name="obj">對象實體</param>
/// <returns>JSON字符串</returns>
public static string GetJson<T>(T obj)
{
//記住 添加引用 System.ServiceModel.Web
/**
* 如果不添加上面的引用,System.Runtime.Serialization.Json; Json是出不來的哦
* */
DataContractJsonSerializer json = new DataContractJsonSerializer(typeof(T));
using (MemoryStream ms = new MemoryStream())
{
json.WriteObject(ms, obj);
string szJson = Encoding.UTF8.GetString(ms.ToArray());
return szJson;
}
}
/// <summary>
/// 把JSON字符串還原為對象
/// </summary>
/// <typeparam name="T">對象類型</typeparam>
/// <param name="szJson">JSON字符串</param>
/// <returns>對象實體</returns>
public static T ParseFormJson<T>(string szJson)
{
T obj = Activator.CreateInstance<T>();
using (MemoryStream ms = new MemoryStream(Encoding.UTF8.GetBytes(szJson)))
{
DataContractJsonSerializer dcj = new DataContractJsonSerializer(typeof(T));
return (T)dcj.ReadObject(ms);
}
}
}
感謝您的閱讀，堅持每天進步一點點，離成功就更新一步；希望文章對您有所幫助；
最近有個妹子弄的一個關於擴大眼界跟內含的訂閱號，每天都會更新一些深度內容，在這里如果你感興趣也可以關注一下(嘿對美女跟知識感興趣)，當然可以關注后輸入：github 會有我的微信號，如果有問題你也可以在那找到我；當然不感興趣無視此信息；
