jQuery怎么解析Json字符串(Json格式/Json对象)_jquery

json数据是我们常用的一种小型的数据实时交换的一个东西,他可以利用jquery或js进行解析,下面我来介绍jquery解析json字符串方法。

我们先以解析上例中的comments对象的JSON数据为例,然后再小结jQuery中解析JSON数据的方法。

上例中得到的JSON数据如下,是一个嵌套JSON:

{
  "comments": [
    {
      "content": "很不错嘛",
      "id": 1,
      "nickname": "纳尼"
    },
    {
      "content": "哟西哟西",
      "id": 2,
      "nickname": "小强"
    }
  ]
}

获取JSON数据,在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,第二个是当前遍历的值。哈哈,有了$.each()方法JSON的解析就迎刃而解咯。(*^__^*) 嘻嘻……

function loadInfo() {
  $.getJSON("loadInfo", function(data) {
    $("#info").html("");//清空info内容
    $.each(data.comments, function(i, item) {
      $("#info").append(
          "<div>" + item.id + "</div>" +
          "<div>" + item.nickname  + "</div>" +
          "<div>" + item.content + "</div><hr/>");
    });
    });
}

正如上面,loadinfo是请求的地址,function(data){...}就是在请求成功后的回调函数,data封装了返回的JSON对象,在下面的$.each(data.comments,function(i,item){...})方法中data.comments直接到达JSON数据内包含的JSON数组:

[
  {
    "content": "很不错嘛",
    "id": 1,
    "nickname": "纳尼"
  },
  {
    "content": "哟西哟西",
    "id": 2,
    "nickname": "小强"
  }
]

$.each()方法中的function就是对这个数组进行遍历,再通过操作DOM插入到合适的地方的。在遍历的过程中,我们可以很方便的访问当前遍历index(代码中的”i“)和当前遍历的值(代码中的”item“)。

上例的运行结果如下:

如果返回的JSON数据比较复杂,则只需多些$.each()进行遍历即可,嘿嘿。例如如下JSON数据:

{
  "comments": [
    {
      "content": "很不错嘛",
      "id": 1,
      "nickname": "纳尼"
    },
    {
      "content": "哟西哟西",
      "id": 2,
      "nickname": "小强"
    }
  ],
  "content": "你是木头人,哈哈。",
  "infomap": {
    "性别": "男",
    "职业": "程序员",
    "博客": "http://www.cnblogs.com/codeplus/"
  },
  "title": "123木头人"
}

js如下:

function loadInfo() {
  $.getJSON("loadInfo", function(data) {
    $("#title").append(data.title+"<hr/>");
    $("#content").append(data.content+"<hr/>");
    //jquery解析map数据
    $.each(data.infomap,function(key,value){
      $("#mapinfo").append(key+"----"+value+"<br/><hr/>");
    });
    //解析数组
    $.each(data.comments, function(i, item) {
      $("#info").append(
          "<div>" + item.id + "</div>" +
          "<div>" + item.nickname  + "</div>" +
          "<div>" + item.content + "</div><hr/>");
    });
    });
}

值得注意的是,$.each()遍历Map的时候,function()中的参数是key和value,十分方便。

上例的运行效果:

jQuery很强大,so...更多的了解还得参考文档,(ˇˍˇ) 想~

下面是其他网友的补充:

一、jQuery解析Json数据格式:

使用这种方法,你必须在Ajax请求中设置参数:
1 dataType: "json"
获取通过回调函数返回的数据并解析得到我们想要的值,看源码:

jQuery.ajax({
url: full_url,
dataType: "json",
success: function(results) {
alert(result.name);
} }); 

通常情况下,你可以从后台返回JSON数据,前台就交给jQuery啦,哈哈!!
jquery异步请求将type(一般为这个配置属性)设为“json”,或者利用$.getJSON()方法获得服务器返回,那么就不
需要eval()方法了,因为这时候得到的结果已经是json对象了,只需直接调用该对象即可,这里以$.getJSON方法为
例说

例1
代码如下:

var data="
{
root:
[
{name:'1',value:'0'},
{name:'6101',value:'北京市'},
{name:'6102',value:'天津市'},
{name:'6103',value:'上海市'},
{name:'6104',value:'重庆市'},
{name:'6105',value:'渭南市'},
{name:'6106',value:'延安市'},
{name:'6107',value:'汉中市'},
{name:'6108',value:'榆林市'},
{name:'6109',value:'安康市'},
{name:'6110',value:'商洛市'}
]
}"; 

jquery

$.getJSON("http://sanic.cnblogs.com/",{param:"sanic"},function(data){
//此处返回的data已经是json对象
//以下其他操作同第一种情况
$.each(data.root,function(idx,item){
if(idx==0){
return true;//同countinue,返回false同break
}
alert("name:"+item.name+",value:"+item.value);
});
});

二、jQuery解析Json对象:

jQuery提供了另一种方法“parseJSON”,这需要一个标准的JSON字符串,并返回生成的JavaScript对象。让我们来看
看语法:

data = $.parseJSON(string);
看看它是如何运用的到实际开发中的:

jQuery.ajax({
url: dataURL, success: function(results) {
var parsedJson = jQuery.parseJSON(results);
alert(parsedJson.name);
}
}); 

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索jquery
, JSON对象
JSON格式
jquery解析json字符串、jquery解析json对象、json字符串解析成对象、jquery json转字符串、jquery拼接json字符串,以便于您获取更多的相关知识。

时间: 2024-09-24 01:41:15

jQuery怎么解析Json字符串(Json格式/Json对象)_jquery的相关文章

jQuery.parseJSON(json)将JSON字符串转换成js对象_jquery

概述 接受一个JSON字符串,返回解析后的对象. 传入一个畸形的JSON字符串会抛出一个异常.比如下面的都是畸形的JSON字符串: {test: 1} ( test 没有包围双引号) {'test': 1} (使用了单引号而不是双引号) 另外,如果你什么都不传入,或者一个空字符串.null或undefined,parseJSON都会返回 null . 参数 jsonString 要解析的JSON字符串 示例 描述: 解析一个JSON字符串 jQuery 代码: var str = '{"name

hibernate-Hibernate可以返回json或者JsonArray格式的对象吗?

问题描述 Hibernate可以返回json或者JsonArray格式的对象吗? 现在好多项目前端都是json的了 Hibernate返回的List,无法和前端的进行匹配 解决方案 不可以的,只能返回Java对象,然后你可以用JSON操作api把Java对象转成JSON字符串就好了啊. 解决方案二: 返回对象的json格式 解决方案三: 只能写个共通方法,讲list转成json格式.这个应该准备好,因为现在基本上数据传输都是json格式了 解决方案四: Hibernate直接和前端匹配啦?将对象

使用JSON.parse将json字符串转换成json对象的时候会出错_javascript技巧

在对数据库取出来的数据(特别是描述信息)里面含有特殊字符的话,使用JSON.parse将json字符串转换成json对象的时候会出错,主要是双引号,回车换行等影响明显,左尖括号和右尖括号也会导致显示问题,所以要在输出到页面进行json对象转换之前将一些特殊符合进行编码或转义,下面展示的是C#代码编码和转义几个常用特殊字符.经过笔者测试,将这些符号编码和转义之后,大部分json字符串都可以转换成json对象了.如果遇到个别问题,应朝着这个方向去查找问题. theString = theString

将JSON字符串转换成Map对象的方法_javascript技巧

页面向后台action传递一个json字符串,需要将json字符串转换成Map对象 public Map<String, String> toMap(Object object) { Map<String, String> data = new HashMap<String, String>(); // 将json字符串转换成jsonObject JSONObject jsonObject = JSONObject.fromObject(object); Iterato

js中把JSON字符串转换成JSON对象最好的方法

 这篇文章主要介绍了js中把JSON字符串转换为JSON对象最好的方法,需要的朋友可以参考下 在JS中将JSON的字符串解析成JSON数据格式,一般有两种方式: 1.一种为使用eval()函数. 2. 使用Function对象来进行返回解析.   第一种解析方式:使用eval函数来解析,并且使用jQuery的each方法来遍历 用jQuery解析JSON数据的方法,作为jQuery异步请求的传输对象,jQuery请求后返回的结果是json对象,这里考虑的都是服务器返回JSON形式的字符串的形式,

JSON字符串转C#匿名对象工具

 代码如下 复制代码 public static T DeserializeAnonymousType<T>(string value, T anonymousTypeObject) 现在问题就变成了怎么针对JSON写一个C#匿名对象,这简单多了,对JSON字符串稍做转换即可:    代码如下 复制代码 private void btnBegin_Click(object sender, EventArgs e) {     string json = txtJson.Text.Trim();

jQuery实现简单的日期输入格式化控件_jquery

js代码有一百多行. 先上效果图  html代码 日期: <input type="text" id="dateInputer" class="hhm-dateInputer" placeholder="请输入日期"> 设置input元素类名为 hhm-dateInputer,通过这个类来绑定这个日期输入控件. js代码 这里应用了jQuery的库, 主要用于选择元素和绑定事件. 复制代码 代码如下: <sc

jquery js 获取时间差、时间格式具体代码_jquery

调取 复制代码 代码如下: GetDateDiff(start, end, "day") /* * 获得时间差,时间格式为 年-月-日 小时:分钟:秒 或者 年/月/日 小时:分钟:秒 * 其中,年月日为全格式,例如 : 2010-10-12 01:00:00 * 返回精度为:秒,分,小时,天 */ function GetDateDiff(startTime, endTime, diffType) { //将xxxx-xx-xx的时间格式,转换为 xxxx/xx/xx的格式 star

js jquery前台解析json字符串

一.js解析json字符串 eval()和JSON.parse() 对于服务器返回的JSON字符串,如果jquery异步请求没做类型说明,或者以字符串方式接受,那么需要做一次对象化处理,就是将该字符串放于eval()中执行一次.这种方式也适合以普通javascipt方式获取json对象,以下举例说明: var dataObj=eval("("+data+")");//转换为json对象 为什么eval这里要添加 "("+data+")&

JS对象与json字符串格式转换实例_javascript技巧

本文实例讲述了JS对象与json字符串格式转换的实现方法,分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <head>     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />     <title></title>     <script type="text/javascript"&g