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 会有我的微信号,如果有问题你也可以在那找到我;当然不感兴趣无视此信息;
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 单线程的Redis速度为什么快?
· 展开说说关于C#中ORM框架的用法!
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· Pantheons:用 TypeScript 打造主流大模型对话的一站式集成库
· SQL Server 2025 AI相关能力初探