JQuery前端之操作JSON的方法

这篇具有很好参考价值的文章主要介绍了JQuery前端之操作JSON的方法。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

jquery json,编程语言,jQuery,前端,jquery,json

转自:微点阅读  https://www.weidianyuedu.com

一、关于Json的数据格式

从结构上看,所有的数据最终都可以分成三种类型:

第一种类型是scalar(标量),也就是一个单独的string(字符串)或数字(numbers),比如“北京”这个单独的词。

第二种类型是sequence(序列),也就是若干个相关的数据按照一定顺序并列在一起,又叫做array(数组)或List(列表),比如“北京,东京”。

第三种类型是mapping(映射),也就是一个名/值对(Name/value),即数据有一个名称,还有一个与之相对应的值,这又称作hash(散列)或

dictionary(字典),比如“首都:北京”。

JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,它的规则非常简单并且是有趣的:

1)并列的数据之间用逗号(“,”)分隔。

2)映射用冒号(“:”)表示。

3)并列数据的集合(数组)用方括号("[]")表示。

4)映射的集合(对象)用大括号(“{}”)表示。

按照这个规则可以作以下理解:

1.数组用“[]”创建,对象用“{}”创建,并且使用Json基本都是用[]或者{}创建的数组或对象,否则一个普通的字符串是没有意义的;

2.无论是数组还是对象,之间的元素都用“,”隔开;

3.对象内部,(属性的)名称和值用“:”隔开,并且必须要用“:”隔开,不可单独存在属性名或者值;

4.对象和数组可以互相嵌套,即数组中的一个元素可以是一个对象也可以是一个数组,同理对象中的一个属性的值可以是一个对象也可以是一个数组。

JSON 最常见的用法之一,是从 web 服务器上读取 JSON 数据(作为文件或作为 HttpRequest),将 JSON 数据转换为JavaScript 对象,然后在网页中使用该数据。

或者反过来,把参数转换成JSON对象,然后在后台反序列化成对象,再获取到参数的值,这可以解决callback方法只能传一个参数的缺点

把JSON对象作为Callback的参数

二、Json数据形式实例

1.

var china= {beijing:{name:"北京",area:"16000",haidian:{name:"海淀区"}},

shanghai:{name:"上海",area:"10000",minhang:{name:"闵行区"}}};

alert(china.beijing.haidian.name);

alert(china.shanghai.minhang.name);

分别弹出“海淀区”和“闵行区”。

2.

var ourcountry=[["北京市"],["上海市"],["合肥市","芜湖市","蚌埠市"]];

alert(ourcountry[2][1]);

弹出“芜湖市”。

3. var zhongguo = {provinces: [{name: "北京",

cities: [{name:"北京市",

quxian: ["海淀区",

"朝阳区",

"东城区",

"西城区"]

}

]

},

{name:"安徽省", cities:[{ name: "芜湖市", quxian: ["繁昌县","芜湖县","南陵县","三山区"] },

{ name:"合肥市", quxian: ["肥西县","蜀山区","庐阳区"] }]},

"湖北省"

]

};

var str ="中国:{\n";

for (var i = 0;i < zhongguo.provinces.length; i++) {

if (zhongguo.provinces.cities !=null) {

str += zhongguo.provinces.name+"{";

for (var j = 0; j < zhongguo.provinces.cities.length; j++) {

if (zhongguo.provinces.cities[j] !=null) {

str +=zhongguo.provinces.cities[j].name +"{";

for (var k = 0; k <zhongguo.provinces.cities[j].quxian.length; k++) {

str +=zhongguo.provinces.cities[j].quxian[k];

if (k != zhongguo.provinces.cities[j].quxian.length - 1) {

str +=",";

}

}

str +="}";

}

}

str +="}\n";

}

}

str +="}";

alert(str);

弹出“ 中国:{ 北京{北京市{海淀区,朝阳区,东城区,西城区}}

安徽省{芜湖市{繁昌县,芜湖县,南陵县,三山区}

合肥市{肥西县,蜀山区,庐阳区}

}

}

三、在前台把服务器返回的字符串转换成Jsond对象

客户端可以给服务器端通过地址栏或者post很容易的提交数据,但是服务器端处理完数据之后,将计算的结果信息回传给客户端时就存在了一定的难度,特别是数据量较大时。这个时候数据的格式成了关键,按照某种格式可以很方便的进行数据的组装,然后可以很方便的进行解析。使用Json便是一种很好的策略。在服务器端,按照Json的格式拼装好一个字符串,响应给客户端。客户端如何进行解析呢?一般有两种策略(两种策略的名称是自己给的名字,不一定很合理,但是思路应该是没有问题的):

1.直接解析

var json = eval("(" + result + ")");

通过上面这个表达式,就完成了将服务器端响应给客户端的Json格式的字符串解析成了一个Json(格式的)对象,名称为“json”,通过“json.”或者“json[]”的方式便可进行数据访问。

2.间接解析

var json = "r=" + result;

eval(json);

当然上面行代码可以合并为:eval("r=" + result);

通过上面的计算,也可以将服务器端响应给客户端的Json格式的字符串解析成了一个Json(格式的)对象,但是该对象名称为“r”,通过“r.”或者“r[]”的方式可进行数据访问。

总结:Json是一种简单的数据交换格式,它几乎可以很好的代替xml让服务器之间灵活的交换数据。

四、直接请求JSON数据文件

很多接口都是直接给个URL请求链接,按照URL的参数格式即可返回JSON数据或XML数据,此时可以直接在Jquery发起URL请求直接获取到JSON数据

$.getJSON("/baiying/data.html",function(data) {

tr2detail_data = data.train_info;

tr2list_data = data.station_list;

RenderObj.ControlList["checiInforender"].Refresh();

RenderObj.ControlList["checiDetailrender"].Refresh();

})

$.getJSON("test.json",function(data){

for (var i = 0; i <data.rows.length; i++) {

$("#test").append("<p>"+ data.rows[i].realName + "</p>");

}

});

五、JavaScript中的数组和对象

在JavaScript中,通常用[]创建的数据格式称为数组,用{}创建的东西称为对象。

有一个数组a=[1,2,3,4],还有一个对象a={0:1,1:2,2:3,3:4},运行alert(a[1]),两种情况下的运行结果是相同的!这就是说,数据集合既可以用数组表示,也可以用对象表示,那么到底该用哪一种呢?

其实数组表示有序数据的集合,而对象表示无序数据的集合。如果数据的顺序很重要,就用数组,否则就用对象。

六、JSON.parse(str)和JSON.stringify(a):

1.parse 用于从一个字符串中解析出json 对象。

例如

varstr="{"name":"cpf","age":"23"}"

经 JSON.parse(str) 得到:

Object: age:"23"

name:"cpf"

_proto_:Object

ps:单引号写在{}外,每个属性都必须双引号,否则会抛出异常

2.stringify用于从一个对象解析出字符串,

例如 var a={a:1,b:2}

经 JSON.stringify(a)得到:

"{"a":1,"b":2}"

七、字符串转换成JSON的三种方式

1,eval方式解析,恐怕这是最早的解析方式了。

1

2

3

4

function strToJson(str){

var json = eval("(" + str + ")");

return json;

}

记得str两旁的小括号

2,new Function形式,

1

2

3

4

function strToJson(str){

var json = (new Function("return " + str))();

return json;

}

3,使用全局的JSON对象。

1

2

3

function strToJson(str){

return JSON.parse(str);

}

使用JSON.parse需严格遵守JSON规范,如属性都需用引号引起来,如下

1

2

var str = "{name:"jack"}";

var obj = JSON.parse(str); // --> parse error

name没有用引号引起来,使用JSON.parse所有浏览器中均抛异常,解析失败。而前两种方式则没问题。

4、把JSON转化成字符串

一般在调试alert时用,用于查看JSON对象明细

JSON.stringify(res)文章来源地址https://www.toymoban.com/news/detail-774606.html

到了这里,关于JQuery前端之操作JSON的方法的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • JQuery、JSON、AJAX、XML、IO流、多线程、反射核心知识点详解

    一、什么是JQuery     JQuery是JavaScript的一个框架,对js的封装,使得js简单易学     优点:         1、不用考虑浏览器兼容性问题         2、jquery拥有强大的选择器,简化了js代码         3、jquery提供了很多系统函数,直接调用 二、版本         1.x版本:兼

    2024年02月07日
    浏览(32)
  • MQTT,JSON,VSCODE(C语言编程环境)心得

    心得基于linux虚拟机和SSH方式,编辑基于VSCODE,编译基于GCC或G++,调试基于GDB的插件,代码管理基于git。 安装GIT:sudo apt-get install git 配置GIT: git config --global user.name “xxx” git config --global user.email “xxx@163.com” ssh-keygen -t rsa -C “xxx@163.com” 拷贝到网站 根据提示进入目录 cd

    2023年04月24日
    浏览(30)
  • 【jQuery入门】链式编程、修改css、类操作和className的区别

    jQuery是一个流行的JavaScript库,广泛用于简化DOM操作和处理事件。在jQuery中,链式编程是一种强大的技术,允许在同一行上执行多个操作。本文将介绍jQuery中的链式编程、修改CSS、类操作以及className的区别。 链式编程是jQuery的一项强大功能,允许在单个语句中执行多个操作。

    2024年01月21日
    浏览(23)
  • Go语言网络编程入门:TCP、HTTP、JSON序列化、Gin、WebSocket、RPC、gRPC示例

    在本文中,我们将介绍Go语言中的网络编程的不同方式,包括TCP、HTTP、Gin框架、WebSocket、RPC、gRPC的介绍与连接实例,并对所有示例代码都给出了详细的注释,最后对每种模式进行了总结。 TCP(传输控制协议)是一种面向连接的、可靠的、基于字节流的传输层通信协议,提供

    2024年02月16日
    浏览(48)
  • 【前端每日一问002】jquery中each与data方法的用法与概念

    在 jQuery 中, .each() 方法和 .data() 方法都是常用的工具。这两个方法的用法和概念如下: .each() 方法是 jQuery 对象的方法,用于遍历匹配元素集合中的所有元素,并对每个元素执行一个回调函数。该方法的语法如下: 其中, selector 是用于匹配元素的选择器,可以是任何 jQuer

    2024年02月06日
    浏览(32)
  • 【b站咸虾米】jQuery的ajax异步操作 web前端后端分离技术的原理

    课程地址:【jQuery的ajax异步操作 web前端后端分离技术的原理】 https://www.bilibili.com/video/BV1u5411M7ny/?share_source=copy_webvd_source=b1cb921b73fe3808550eaf2224d1c155 通过案例学习ajax异步操作。 介绍 php,前后端不分离的技术。 ajax,实现前后端分离技术。 在之前,要做动态网站,要懂php,ja

    2024年04月15日
    浏览(33)
  • Go语言入门记录:从channel的池应用、sync的Pool、benchmark、反射reflect、json处理、http、性能分析和一些编程习惯

    channel的一对一会阻塞,添加buffer不会阻塞。 buffered Channel实现对象池。 sync.Pool 的介绍。 获取时先去私有对象中获取,如果不存在就在相同Processor中的共享池中获取,如果还没有,则去其他Processor中去获取。 存放时,如果私有对象不存在,就放在私有对象中,如果存在就放在

    2024年02月10日
    浏览(36)
  • Maven中导入jQuery,前端页面中引用jQuery

    第一步pom文件中,配置maven坐标。 第二步,在前端页面中引用jQuery 注:该前端页面需要在web根目录即webapp目录下。可认为在maven中导入jQuery后,jquery.min.js文件放在目录webapp/webjars/jquery/3.3.1下。

    2024年02月09日
    浏览(36)
  • BCSP-玄子前端开发之JavaScript+jQuery入门CH10_jQuery基础

    4.10.1 jQuery 简介 jQuery是流行的JavaScript程序库,是对JavaScript对象和函数的封装 设计思想是write less, do more [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gx0f3UFO-1682307309412)(./assets/image-20230423230915569.png)] 4.10.2 jQuery 能做什么 访问和操作DOM元素 控制页

    2023年04月24日
    浏览(38)
  • 前端小记——jQuery

    目录 jQuery简介 jQuery语法 jQuery加载模式 jQurey选择器 元素选择 文本内容插入 获取输入框的值 设置属性 CSS样式的操作 设置class属性 class切换 节点操作 事件的绑定 事件简写 事件对象 显示隐藏动画 上卷下拉动画 淡入淡出动画 jQuery 是一个轻量级的\\\"写的少,做的多\\\"的 JavaScrip

    2024年02月02日
    浏览(37)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包