使用jQuery解析JSON响应

我在处理我的一个应用程序中的JSON响应。我已成功使用jsonp建立连接。但我无法解析我的回应。使用jQuery解析JSON响应

代码：

<script type='text/javascript'> 
(function($) { 
var url = 'http://cooktv.sndimg.com/webcook/sandbox/perf/topics.json'; 

$.ajax({ 
    type: 'GET', 
    url: url, 
    async: false, 
    jsonpCallback: 'callback', 
    contentType: "application/json", 
    dataType: 'jsonp', 
    success: function(json) { 
     console.log(json.topics); 
     $("#nav").html('<a href="">'+json.topics+"</a>"); 
    }, 
    error: function(e) { 
     console.log(e.message); 
    } 
}); 

})(jQuery); 
</script>

输出我越来越：

[object Object],[object Object],[object Object]

响应示例：

callback({"topics":[{"name":"topic","content":[{"link_text":"link","link_src":"http://www.foodnetwork.com/"},{"link_text":"link","link_src":"http://www.hgtv.com/"},{"link_text":"link","link_src":"http://www.diynetwork.com/"},{"link_text":"link","link_src":"http://www.cookingchanel.com/"},{"link_text":"link","link_src":"http://www.travelchannel.com/"},{"link_text":"link","link_src":"http://www.food.com/"}]},{"name":"topic2","content":[{"link_text":"link","link_src":"http://www.google.com/"},{"link_text":"link","link_src":"http://www.yahoo.com/"},{"link_text":"link","link_src":"http://www.aol.com/"},{"link_text":"link","link_src":"http://www.msn.com/"},{"link_text":"link","link_src":"http://www.facebook.com/"},{"link_text":"link","link_src":"http://www.twitter.com/"}]},{"name":"topic3","content":[{"link_text":"link","link_src":"http://www.a.com/"},{"link_text":"link","link_src":"http://www.b.com/"},{"link_text":"link","link_src":"http://www.c.com/"},{"link_text":"link","link_src":"http://www.d.com/"},{"link_text":"link","link_src":"http://www.e.com/"},{"link_text":"link","link_src":"http://www.f.com/"}]}]});

我想要的形式：

主题：链接

来源

2013-06-28 Radhakrishna Rayidi

让这个尝试：

success: function(json) { 
    console.log(JSON.stringify(json.topics)); 
    $.each(json.topics, function(idx, topic){ 
    $("#nav").html('<a href="' + topic.link_src + '">' + topic.link_text + "</a>"); 
    }); 
},

来源

2013-06-28 11:59:45 Aguardientico

工作就像一个魅力:) –

它的伟大工程，谢谢 – fthopkins

我收到这类回应 '[{ID：1，留言： “sdfsdf”，message_for： 1，message_by：2，created_at：“2015-08-29 08:22:02”，...}，...]'没有像问题中指定的主题那样的变量。 –

由JSON返回的数据是JSON格式：它是简单值的阵列。这就是为什么你看到[对象对象]，[对象对象]，[对象对象]。

你必须迭代该值才能获得真正的价值。像下面

jQuery提供$。每（）进行迭代，所以你也可以这样做：

$.getJSON("url_with_json_here", function(data){ 
    $.each(data, function (linktext, link) { 
     console.log(linktext); 
     console.log(link); 
    }); 
});

现在只需使用这些信息创建一个超链接。

来源

2013-06-28 12:02:23

没有工作...... :( –

原始问题是解析主题列表，但是从原始示例开始，让函数返回单个值也可能有用。为此，下面是一个例子（单向）做到这一点：

<script type='text/javascript'> 
    function getSingleValueUsingJQuery() { 
     var value = ""; 
     var url = "rest/endpointName/" + document.getElementById('someJSPFieldName').value; 
     jQuery.ajax({ 
     type: 'GET', 
     url: url, 
     async: false, 
     contentType: "application/json", 
     dataType: 'json', 
     success: function(json) { 
      console.log(json.value); // needs to match the payload (i.e. json must have {value: "foo"} 
      value = json.value; 
     }, 
     error: function(e) { 
      console.log("jQuery error message = "+e.message); 
     } 
     }); 
     return value; 
    } 
    </script>

来源

2015-01-19 18:26:05

试试波纹管代码。这有助于你的代码。

$("#btnUpdate").on("click", function() { 
      //alert("Alert Test"); 
      var url = 'http://cooktv.sndimg.com/webcook/sandbox/perf/topics.json'; 
      $.ajax({ 
       type: "GET", 
       url: url, 
       data: "{}", 
       dataType: "json", 
       contentType: "application/json; charset=utf-8", 
       success: function (result) { 
        debugger; 

        $.each(result.callback, function (index, value) { 
         alert(index + ': ' + value.Name); 
        }); 
       }, 
       failure: function (result) { alert('Fail'); } 
      }); 
     });

我无法访问您的网址。波纹管错误显示

XMLHttpRequest无法加载http://cooktv.sndimg.com/webcook/sandbox/perf/topics.json。对预检请求的响应不会通过访问控制检查：请求的资源上不存在“访问控制 - 允许来源”标头。因此不允许访问原产地'http://localhost:19829'。响应有HTTP状态代码501

来源

2016-10-03 06:39:19 muthukumar

jQuery.ajax({ 
      type: 'GET', 
      url: "../struktur2/load.php", 
      async: false, 
      contentType: "application/json", 
      dataType: 'json', 
      success: function(json) { 
       items = json; 
      }, 
      error: function(e) { 
       console.log("jQuery error message = "+e.message); 
      } 
     });

来源

2017-02-18 15:25:45 mobuhai

有些解释会有帮助。 –

我挂了谷歌，后来我发现你的问题，这是非常简单的解析JSON响应转换成普通的HTML。只要使用这个小的JavaScript代码：

<!DOCTYPE html> 
<html> 
<body> 

<h2>Create Object from JSON String</h2> 

<p id="demo"></p> 

<script> 

var obj = JSON.parse('{ "name":"John", "age":30, "city":"New York"}'); 
document.getElementById("demo").innerHTML = obj.name + ", " + obj.age; 

</script> 

</body> 
</html>

来源

2017-08-02 05:14:41

使用jQuery解析JSON响应

回答

相关问题