2019独角兽企业重金招聘Python工程师标准>>>

如摘要所说,json是常用的前后端交互的数据格式,本文简单介绍jquery如何解析json数据,以备忘。

如下是一个嵌套的json:

[{"name":"20:00-21:15","price":"1.00"},{"name":"17:30-17:59","price":"1.00"},
{"name":"22:00-22:30","price":"3.00"},{"name":"20:00-21:15&22:00-22:30","price":"0.00"}]

1.在jQuery中有一个简单的方法 $.getJSON() 可以实现.

下面引用的是官方API对$.getJSON()的说明:

jQuery.getJSON( url, [data,] [success(data, textStatus, jqXHR)] )

urlA string containing the URL to which the request is sent.

dataA map or string that is sent to the server with the request.

success(data, textStatus, jqXHR)A callback function that is executed if the request succeeds.

回调函数中接受三个参数,第一个书返回的数据,第二个是状态,第三个是jQuery的XMLHttpRequest,我们只使用到第一个参数。

$.each()是用来在回调函数中解析JSON数据的方法,下面是官方文档:

jQuery.each( collection, callback(indexInArray, valueOfElement) )

collectionThe object or array to iterate over.

callback(indexInArray, valueOfElement)The function that will be executed on every object.

$.each()方法接受两个参数,第一个是需要遍历的对象集合(JSON对象集合),第二个是用来遍历的方法,这个方法又接受两个参数,第一个是遍历的index,第二个是当前遍历的值

function loadInfo() {$.getJSON("loadInfo", function(data) {$("#info").html("");//$.each(data.comments, function(i, item) {$("#info").append('<option value="'    +item.price+     '">'     +item.name+    '</option>');});});
}

2.或者不用$.getJSON而使用$.ajax获取返回数据的时候使用eval解析,例如

pricejson = eval(msg);var    salehtml = '';$.each(pricejson, function(i, item) {                                 salehtml  += '<option value="'    +item.price+     '">'     +item.name+    '</option>'; });
$("#info").html(salehtml);

PS: 原生javascript处理客户端js接收返回数据的时候,有时候服务端有可能返回空的对像,

比如:

var data = ({});
isEmptyObject: function( obj ) {for ( var name in obj ) {return false;}return true;
}

转载于:https://my.oschina.net/wojibuzhu/blog/205001

如何使用jquery处理json数据相关推荐

  1. jQuery读取JSON数据(jQuery调用JSON数据学习第二天)

    在初步了解JSON数据格式之后,接下来学习jQuery框架下,如何读取一个JSON数据. 由于JSON格式是JavaScript的原生态格式,因此,使用jQuery访问JSON数据时十分方便的,只需要 ...

  2. 深入分析jquery解析json数据

    我们先以解析上例中的comments对象的JSON数据为例,然后再小结jQuery中解析JSON数据的方法. JSON数据如下,是一个嵌套JSON: {"comments":[{& ...

  3. JQuery解析JSON数据

    <script src="http://cdn.static.runoob.com/libs/jquery/1.8.3/jquery.js"></script&g ...

  4. jquery ajax json 数据的遍历

    需求:进行ajax请求后,后台传递回来以下json数据 { "data":[ {"id":"1","name":&quo ...

  5. Jquery解析Json数据,实现级联菜单

    首先这里需要用到jquery,简单的说,jquery就是javascript的一些库,极大的简化了js的代码.我用到的是jquery-3.3.1.min.js这个版本的jq,大家可以去官网下载,jso ...

  6. jQuery获取json数据

    出自---小瓶子编辑 $.each()方法接受两个参数,第一个是需要遍历的对象集合(JSON对象集合),第二个是用来遍历的方法,这个方法又接受两个参数,第一个是遍历的index,第二个是当前遍历的值. ...

  7. jquery中json数据转换为字典

    首先在前台页面中的json数据为 var recipe = {};recipe["name"] = $("#name").val();recipe[" ...

  8. 使用JQuery MiniUI,json数据构建TreeGrid(树图)

    index.html直接上代码. 需要引用MiniUI的boot.js <!DOCTYPE html> <html><head><meta charset=& ...

  9. JQuery处理json数据实例(map和数组)

    2019独角兽企业重金招聘Python工程师标准>>> var testMap="{\"districtId\":{\"上海\":{ ...

  10. Jquery重新学习之五[操作JSON数据]

    Jquery操作Json格式的数据在我们平时的项目中也经常运用:最近看Jquery权威指南中就有一章节是对这方面的整理总结:最后通过一个Asp.net结合一般处理程序ashx的实例,基本上能满足项目中 ...

最新文章

  1. xgboost 正则项_XGBoost入门系列第一讲
  2. poj 1821 fence
  3. sql获取oracle数据库数据,通过sql语句获取数据库的基本信息
  4. [html] 如何判断用户正在操作页面?当页面一个小时没有操作时跳转到指定页面如何做?
  5. kubelet内存异常分析
  6. 避开10个面试大坑,接offer成功率提升至99%
  7. Apache HttpClient 4 3开发指南
  8. 搭建svn,创建svn项目
  9. ubuntu kylin mysql_Ubuntu16.04下Kylin的安装与配置
  10. Android Studio打开React Native创建的项目
  11. 谁为“上班玩耍”买单
  12. woff字体找不到导致的404错误
  13. 50年过去了,嫦娥五号探月依然不能直播,告诉你三个可能
  14. 数据库存储图片路径并显示图片
  15. 【CSON原创】javascript图片滚动效果发布
  16. IBM SPSS Statistics 25 安装教程
  17. Andriod 实现可拖动列表
  18. LAMP兄弟连 视频教程集
  19. 论文阅读:Factorizable Net: An Efficient Subgraph-based Framework for Scene Graph Generation
  20. 扛住阿里双十一高并发流量,Sentinel是怎么做到的?

热门文章

  1. 在access中一列称为_ACCESS考试_笔试
  2. python xml第三方库_我应该使用哪个python XML库?
  3. spring cloud构建互联网分布式微服务云平台-服务提供与调用
  4. Scala具体解释---------数组、元组、映射
  5. iis中添加视频播放支持mp4文件、flv文件等
  6. 在 ML2 中配置 VXLAN - 每天5分钟玩转 OpenStack(110)
  7. 桶排序/基数排序(Radix Sort)
  8. 微信支付v2开发(6) 发货通知
  9. WebGL 3D on iOS8 正式版
  10. Office 365系列(6)------Stage Migrate 搬迁方式至O365上来方法及步骤总结