Jquery重新学习之五[操作JSON数据]
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 会有我的微信号，如果有问题你也可以在那找到我；当然不感兴趣无视此信息；
Jquery重新学习之五[操作JSON数据]的更多相关文章
- Jquery重新学习之六[操作XML数据]
上一章整理有关Jquery操作JSON格式数据,本章则是整理Jquery与XML的交互,因为XML简单易用及运用在很跨平台上的优点,所以项目运用Jquery操作XML还是比较常见:下面的代码来自Jqu ...
- springmvc学习笔记(18)-json数据交互
springmvc学习笔记(18)-json数据交互 标签: springmvc springmvc学习笔记18-json数据交互 springmvc进行json交互 环境准备 加入json转换的依赖 ...
- jquery通过ajax方法获取json数据不执行success
1.jquery通过ajax方法获取json数据不执行success回调 问题描述:jquery通过ajax方法获取json数据不执行success回调方法 问题原因:json格式存在问题或不符合标准 ...
- js中如何操作json数据
一.要想熟练的操作json数据,就先要了解json数据的结构,json有两种结构:对象和数组. 1.对象 一个对象以“{”开始,“}”结束.每个“名称”后跟一个“:”:“‘名称/值’ 对”之间使用“, ...
- jquery通过ajax方法获取json数据不执行success回调
问题描述:jquery通过ajax方法获取json数据不执行success回调方法 问题原因:json格式存在问题或不符合标准写法,导致总是执行error回调方法 解决方案:使json格式务必符合下述 ...
- Java操作JSON数据(4,end)--Jackson操作JSON数据
Jackson是SpringBoot默认使用的JSON处理库,它可以轻松的将Java对象转换成JSON对象,同样也可以将JSON转换成Java对象.本文介绍下Jackson的基本使用方法,包括序列化和 ...
- Java操作JSON数据(3)--fastjson操作JSON数据
fastjson是阿里巴巴的开源JSON解析库,它可以解析JSON格式的字符串,支持将Java Bean序列化为JSON字符串,也可以从JSON字符串反序列化到JavaBean.本文介绍下fastjs ...
- Java操作JSON数据(2)--Gson操作JSON数据
Gson是Google公司发布的一个开发源码的Java库,可用于将Java对象转换为JSON字符串,也可用于将JSON字符串转换为对应的Java对象.本介绍下Gson的基本使用方法,包括序列化和反序列 ...
- Java操作JSON数据(1)--JSON-lib操作JSON数据
JSON-lib是一个java库,用于将bean.映射.集合.java数组和XML转换为JSON,或将JSON转为beans和DynaBeans.JSON-lib最后的版本是2.4,更新时间是2010 ...
随机推荐
- BZOJ4551 HEOI2016树
可以用并查集,记忆化搜索,线段树多种方法实现. 我这里写的是依照dfs序建线段树,维护区间最大值. #include<bits/stdc++.h> using namespace std; ...
- [UOJ50]链式反应
这个题意说人话就是:一棵带标号的有根树,编号满足堆性质,根节点有$x$个儿子是叶子($x\in A$),另外的$2$个儿子也是这样的一棵树,求不同的树的个数 设$f_n$为答案,枚举那两棵子树的大小$ ...
- Redis 3.0 Windows 安装步骤
Redis 3.0 Windows 安装步骤 ----来自 https://www.aliyun.com/jiaocheng/872572.html 发布时间:2018-04-10 来源:网络 上传者 ...
- java 随机数种子
引子:需要实现每天随机获得一个礼包,且全服玩家随出来的都是同一个. 实现方案:以当前时间是一年的第几天作为random的种子,取1~礼包总个数范围内的随机值. public static int ge ...
- WebDriver元素查找方法摘录与总结
WebDriver元素查找方法摘录与总结 整理By:果冻迪迪 selenium-webdriver提供了强大的元素定位方法,支持以下三种方法. • 单个对象的定位方法 • 多个对象的定位方法 • 层级 ...
- js——引用类型和基本类型
js中的数据类型有以下几种: 基本类型:Number Boolean String undefined null Symbol 引用类型:Object(Array, Function, Date ...
- 【转】2012年6月26 – 盛大PHP工程师最新面试题
无笔试. 口试:(前半部分平淡无奇,没什么太难的问题,都是求职岗位基本要会的东西,局限于php.下面是真正进入状态的题.) 谈谈观察者模式是什么?主要应用. 答:类似会有一些server对象时刻侦听某 ...
- linux shell 正则表达式(BREs,EREs,PREs)差异比较（转，当作资料查）
转载: 在计算机科学中,是指一个用来描述或者匹配一系列符合某个句法规则的字符串的单个字符串.在很多文本编辑器或其他工具里,正则表达式通常被用来检索和/或 替换那些符合某个模式的文本内容.许多程序设计语 ...
- Java垃圾回收精粹 — Part2
Java垃圾回收精粹分4个部分,本篇是第2部分.在第2部分里介绍了Hotspot中的堆结构.对象分配以及次要回收. Hotspot中的堆结构 理解不同的收集器的工作方式,是探讨Java堆结构如何支持分 ...
- [Gradle] Gradle 简介
Gradle 是以 Groovy 语言为基础,面向Java应用为主.基于DSL(领域特定语言)语法的自动化构建工具. Ø gradle对多工程的构建支持很出色,工程依赖是gradle的第一公民. Ø ...