使用 jQuery 解析 JSON 响应答案

【问题标题】：Parse JSON response using jQuery使用 jQuery 解析 JSON 响应
【发布时间】：2013-06-26 04:34:32
【问题描述】：

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

代码：

<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/"}]}]});

我想要的形式是：

主题：链接

【问题讨论】：

标签： ajax json object jsonp

【解决方案1】：

试试这个：

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>");
   });
},

【讨论】：

我收到了这样的回复 [{id: 1, message: "sdfsdf", message_for: 1, message_by: 2, created_at: "2015-08-29 08:22:02",…},…] 没有问题中指定的主题之类的变量。

【解决方案2】：

JSON 返回的数据是 json 格式：它只是一个值数组。这就是为什么您会看到 [object Object],[object Object],[object Object]。

您必须遍历这些值才能获得实际值。像下面这样

jQuery 为迭代提供了 $.each()，所以你也可以这样做：

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

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

【讨论】：

【解决方案3】：

最初的问题是解析主题列表，但是从原始示例开始让函数返回单个值也可能有用。为此，这是一个（一种方法）这样做的例子：

<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>

【讨论】：

【解决方案4】：

试试下面的代码。这是帮助您的代码。

  $("#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。对预检请求的响应未通过访问控制检查：请求的资源上不存在“Access-Control-Allow-Origin”标头。因此，Origin 'http://localhost:19829' 不允许访问。响应的 HTTP 状态代码为 501。

【讨论】：

【解决方案5】：

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);
            }
        });

【讨论】：

一些解释会有所帮助。

【解决方案6】：

我在 Google 上闲逛，然后发现了您的问题，将 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>

【讨论】：