从 jquery ajax 提取 JSON 响应到 html div答案

【问题标题】：Extract JSON response from jquery ajax to html div从 jquery ajax 提取 JSON 响应到 html div
【发布时间】：2017-08-30 23:09:58
【问题描述】：

我无法将数据检索到 jquery div 元素，但我可以在 firebug 中看到 ajax 响应。

$(document).ready(function () {
    $.ajax({
        url: "https://m.lowes.com/CatalogServices/product/nvalue/v1_0?nValue=4294857975&maxResults=6&showURL=1&rollUpVariants=1&showUrl=true&storeNumber=0595&priceFlag=rangeBalance&showMarketingBullets=1&callback",
        dataType: "jsonp",
        success: function (data) {
            var returnedData = JSON.parse(data);
            $('#result').html(returnedData);
        }
    });
})

this is my response.for example my url contains data productCount:64 ,I should extract productCount from ajax success and display it in html div id result

【问题讨论】：

您的数据类型更改为“json”，您能否发布您在回复中得到的内容？
为什么你认为 API 支持 JSONP？
不，jsonp 是正确的，因为看起来他们正在跨域使用它
你的结果元素是什么？直接尝试 .html(data) 如果它是一个文本框使用值而不是像这样的 html jsfiddle.net/v02x36fp/1

标签： javascript jquery html json ajax

【解决方案1】：

当你解析出 JSOn 数据时，你会像这样使用它：

var parsed_data = JSON.parse(JSON_DATA);
$('#result').html(parsed_data.key);

所以如果你的 parsed_data 有点像：

{name:"test",age:12}

然后你像这样使用它：

$('#result').html(parsed_data.name); //it will give you test

如果您真的想打印出整个数据，请使用JSON.stringify(obj)，如下所示：

$('#result').html(JSON.stringify(parsed_data));

【讨论】：

【解决方案2】：

在您的代码中，您正在返回一个 json，并且您试图将它插入到 div 中，在 div 中您只能插入 html 代码而不是 json。

尝试检查您返回的 json，如果您需要将每个元素插入 div，请执行此操作，但不要全部执行。

html() 方法不知道你要分配什么，它只插入一个 html。

【讨论】：

【解决方案3】：

您需要遍历returnData 中的json 数据。您无法将 json 直接放入 html 中。您需要先转换/解析/迭代它。所以，例如：

$.each(returnedData, function (index, value) {
    // do stuff with it, e. g.:
    //  $('#result').html($('#result').html() + value);
});

【讨论】：

【解决方案4】：

https://jsfiddle.net/m8udusps/

这里的代码确实有效。但是它说在解析 JSON 时存在问题。您需要添加crossDomain: true, 以使其实际获得结果。

【讨论】：

【解决方案5】：

收到了一个假定的 JSON 结构，例如：

{
  "Field1": "value1",
  "Field2": "value2"
}

此代码获取键的值（在此示例中只是第一个键）。结果是带有Data: value1 的警告消息：

                $.ajax({
                    'url' : './localurl',
                    'type' : 'GET',
                    'success' : function(data) {
                        alert("Data: "+data.Field1);
                    },
                    'error' : function(request,error) {
                        alert("Error in response: "+JSON.stringify(data));
                    }
                });

在这种情况下Field1是接收到的密钥，它可以通过data变量直接访问，所以没有必要做JSON.parse(data)（实际上这个JSON.parse会产生错误）

【讨论】：