在 HTML 中显示格式化的 JSON(大对象)

Question

我正在尝试在HTML页面中显示格式化的JSON，但是当涉及到较大的对象(对象数组(时遇到了一些麻烦。

目前，当我收到来自服务器的响应时，我正在使用JSON.stringify(data)显示 JSON 对象。我的 PHP 将结果作为带有json_encode($response)的数组返回，我正在显示结果。

从下面的示例响应中可以看出，当涉及到较小的对象时，它会正确显示。

如果来自服务器的结果更大，我仍然会收到结果(使用控制台转储到控制台.log(数据(，但是当$('#apiResult').append(JSON.stringify(data, undefined, 2));被执行时，需要很长时间，或者大多数情况下浏览器只是挂起。

我想我的问题是是否有更有效的方法可以做到这一点，或者我做错了什么？

我想在浏览器中显示它的原因是因为我正在为本地应用程序创建一个 API 测试器工具。

提前感谢您的帮助。

示例响应：

{
"posted_data": {
"anything sent": "",
"etc...": ""
},
"server_datetime": "2019-10-19 19:05:36",
"ip_address": "7.28.185.248",
"cookies": []
}

爪哇语

function executeAPI() {
var method = $('[name=apiMethod]').val();
var sendData = {};
if(method == 'post' || method == 'put') {
sendData = $('[name=apiBody]').val();
}
$.ajax({
type: $('[name=apiMethod]').val(),
url: apiObj.baseURL + $('[name=apiPath]').val(),
data: sendData,
dataType: "json",
contentType: "application/json; charset=utf-8",
cache: false,
crossDomain: true,
beforeSend: function(){
$('#apiResult').removeClass('text-primary text-danger').html('Request sent, waiting for response...');
$('#btnApiRequest').prop('disabled', true).text('Please wait...');
}
})
.done(function(data,responseText,jqXHR) {
$('#apiResult').empty();
$('#apiStatus').html('<b>Status:&nbsp;<span class="text-success">'+jqXHR.status+' - '+jqXHR.statusText+'</span></b>');    
if(typeof data === 'object' && data !== null) {
$('#apiResult').append(JSON.stringify(data, undefined, 2));
} else {
$('#apiResult').html(data);
}
})
.fail(function(jqXHR,textStatus,errorThrown) {
$('#apiStatus').html('<b>Status:&nbsp;<span class="text-danger">'+jqXHR.status+' - '+jqXHR.statusText+'</span></b>');
if(jqXHR.responseJSON === undefined) {
$('#apiResult').html('...');
} else {
$('#apiResult').html(jqXHR.responseJSON);
}
})
.always(function() {
$('#btnApiRequest').removeAttr('disabled').html('Send Request&nbsp;<i class="fa fa-send"></i>');
});
}

Answer 1

如果您只需要在客户端显示数据(并且不需要操作它(，则根本不应该解析它。将其视为纯文本：

$.ajax({
// ...
dataType: "text", // replace "json" with "text"
// ...
}).done(function(data,responseText,jqXHR) {
// ...
$('#apiResult').append(data);
// ...
})

如果你想缩进，服务器端你可以使用json_encode($response, JSON_PRETTY_PRINT);，但正如@Bravo提到的，它会使响应更大。

附带说明一下，如果响应太大以至于导致浏览器挂起，则问题可能不是您发布的问题，而是您设计 API 的方式。结果是否包含大型数组？如果是这样，您可能需要考虑结果分页。