Javascript 在HTML中显示格式化的JSON（大对象）

我试图在HTML页面中显示格式化的JSON，但在涉及较大的对象（对象数组）时遇到了一些问题

当前，当我从服务器收到响应时，我正在使用

JSON.stringify（data）

显示JSON对象。我的PHP使用

json\u encode（$response）

以数组形式返回结果，并显示结果

从下面的示例响应中可以看出，对于较小的对象，它会正确显示

如果来自服务器的结果更大，我仍然会收到结果（使用console.log（数据）转储到console，但是当执行

$（'#apireult'）.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": []
}

Javascript

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

函数executeAPI（）{
var method=$（'[name=apiMethod]'）。val（）；
var sendData={}；
如果（方法=='post'| |方法=='put'）{
sendData=$（'[name=apiBody]'）。val（）；
}
$.ajax({
类型：$（'[name=apiMethod]'）。val（），
url:apiObj.baseURL+$（'[name=apiPath]'）。val（），
数据：sendData，
数据类型：“json”，
contentType:“应用程序/json；字符集=utf-8”，
cache:false，
跨域：是的，
beforeSend:function（）{
$（'apireult'）.removeClass（'text-primary-text-danger'）.html（'Request-sent，waiting-response…'）；
$（'btnApiRequest'）.prop（'disabled'，true）.text（'Please wait…'）；
}
})
.done（函数（数据、响应文本、jqXHR）{
$（'#apireult'）.empty（）；
$（'#apiStatus'）.html（'状态：'+jqXHR.Status+'-'+jqXHR.statusText+''）；
如果（数据类型=='object'&&data！==null）{
$（'#apireult'）.append（JSON.stringify（数据，未定义，2））；
}否则{
$（'#apireult'）.html（数据）；
}
})
.fail（函数（jqXHR、textStatus、errorshown）{
$（'#apiStatus'）.html（'状态：'+jqXHR.Status+'-'+jqXHR.statusText+''）；
if（jqXHR.responseJSON==未定义）{
$（'#apireult'）.html（'…'）；
}否则{
$（'apireult'）.html（jqXHR.responseJSON）；
}
})
.always（函数（）{
$（'btnApiRequest'）.removeAttr（'disabled'）.html（'Send Request'）；
});
}

如果您只需要在客户端显示数据（而不需要对其进行操作），则不应解析数据。将其视为纯文本：

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

如果您希望它缩进，服务器端可以使用

json\u encode（$response，json\u PRETTY\u PRINT）；

，但正如@Bravo所提到的，它会使响应更大

一个旁注，如果响应太大以至于浏览器挂起，问题可能不是你发布的那个问题，而是你设计API的方式。结果包含大数组吗？如果是这样，你可能想考虑结果分页。

---

如果您只需要在客户端显示数据（而不需要对其进行操作），则不应解析数据。将其视为纯文本：

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

如果您希望它缩进，服务器端可以使用

json\u encode（$response，json\u PRETTY\u PRINT）；

，但正如@Bravo所提到的，它会使响应更大

一个旁注，如果响应太大以至于浏览器挂起，问题可能不是你发布的那个问题，而是你设计API的方式。结果包含大数组吗？如果是这样，你可能想考虑结果分页。

---

有多大-有多大-有多大-有多大-有多大-有多大-有多大-有多大-有多大-有多大-有多大-有多大-有多大-有多大-有多大-有多大p@Bravo是的，会的\_(ツ)_/“这是一个观察，而不是批评：pI发现：）我做了更多的测试，我相信

JSON.stringify

可以处理的最大数据量。识别服务器端会使大响应更大：p@Bravo是的，会的\_(ツ)_/“这是一个观察，而不是批评：pI发现：）我做了更多的测试，我相信

JSON.stringify

可以处理的最大数据量。