如何从 ajax 返回的 HTML 访问 json 数据？答案

【问题标题】：How do I access json data from ajax-returned HTML?如何从 ajax 返回的 HTML 访问 json 数据？
【发布时间】：2013-04-12 20:33:31
【问题描述】：

我正在尝试从返回 html 和 json 的 Ajax 调用中检索 json 项目数据。我下面的 javascript 返回一条成功消息，这很有帮助；我只是不确定如何访问数据。我正在尝试从此响应中访问newPrice：

Data Loaded: <pre>Array
(
[point] => 86
[claimId] => 3594
[type] => yeh
)
</pre>{"data":{"newPrice":88,"lockedInPrice":86},"errors":[],"success":true,"code":200}

我的代码如下。我特别想只返回 newPrice 值：

var newData = $.ajax({ 
    type: "POST",
    url: takeurl,
    dataType: "html",
    data: { point: point, claimId: id, type: val }
    })
    .success(function(data) { 
        alert("Data Loaded: " + data);
        //newPrice = data.newPrice; -- returned undefined?
        console.log(newPrice);
        })

    .error(function() { alert("not yet"); })
    .complete(function(data) { 
        console.log('complete 1' );
    });

// Set another completion function for the request above
newData.complete(function(data){ 
    console.log("second complete" );
    });


return false;
 });

谢谢！

【问题讨论】：

标签： jquery ajax

【解决方案1】：

您的响应中似乎同时包含 HTML 和 JSON。通常响应只是 JSON，并以内容类型 application/JSON 进行响应。虽然可以使用响应，但这有点不正统。

您可以使用 substring 和 indexof 来剪切 HTML 部分“”，然后使用 JSON 创建一个 javascript 对象。

var data = "<pre>Array\n(\n[point] => 86\n[claimId] => 3594\n[type] => yeh\n)\n</pre>{\"data\":{\"newPrice\":88,\"lockedInPrice\":86},\"errors\":[],\"success\":true,\"code\":200}";

alert("Data Loaded: " + data);
var n = data.indexOf("</pre>{");
data = data.substring(n+6);
var result = JSON.parse(data);
alert("JSON.newPrice:"+result.data.newPrice);

JSON.parse() 方法用于将 JSON 字符串转换为 JSON 对象。

【讨论】：

作为替代方案，您也可以使用正则表达式来删除 HTML，如下所示：data = data.replace(/^.*<\/pre>/, '')。这只有在 HTML 部分总是以 </pre> 标记结尾时才有效。
没错，我确实需要开始使用更多。计算机的速度如此之快，以至于不存在额外的开销，它们有助于解决更复杂的问题。
谢谢两位。 indexof 方法和正则表达式的想法都很好地工作。我使用正则表达式只是因为它最终的代码少了一点，而且我不必要的代码很容易表达......

【解决方案2】：

如果您想以 JSON 格式访问响应，则它必须以 application/json 内容类型返回，并且看起来像一个有效的 JavaScript 普通对象。还将dataType 的jQuery.ajax 调用设置为json。

【讨论】：

【解决方案3】：

为了避免在控制器的 Json 响应中获取带有“pre”标签的 HTML，请使用以下代码 sn-p。

var result= objectData;
return Json(result, "text/html");

【讨论】：