AJAX 调用以检索 JSON - 如何将结果格式化为屏幕答案

【问题标题】：AJAX Call to Retrieve JSON - How to format results to screenAJAX 调用以检索 JSON - 如何将结果格式化为屏幕
【发布时间】：2019-06-01 13:58:45
【问题描述】：

我创建了一个文件，该文件自动发布 3 个标识字段（用于身份验证）以检索 JSON 结果。它工作正常（现在开发为概念证明，因此 id 是硬编码的）。成功后，JSON 作为警报返回给浏览器。

如何在屏幕上返回和格式化 JSON 结果？

这是工作网址：https://www.advantageengagement.com/REST/js_yes.html

<!DOCTYPE html>
<html>
<head>
     <title>Javascript POST Form</title>
     <meta charset="utf-8">
</head>
<body>
    <script type="text/javascript">
        var http = new XMLHttpRequest();
        var postdata= "id_eap=999&id_company=&password=AAA111BBB2";              
        http.open("POST", "https://www.advantageengagement.com/REST/content/read.php", true);
        //Send the proper header information along with the request
        http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        http.onreadystatechange = function() {
             if(http.readyState == 4 && http.status == 200) {
                 alert(http.responseText);    
             }
        }
        http.send(postdata);
     </script>
</body>
</html>

【问题讨论】：

JSON.stringify output to div in pretty print way的可能重复
Stack Overflow 上有很多很多关于如何在浏览器中显示 API 响应的问题。您尝试过哪些，为什么它们在这里不适用？

标签： javascript json ajax

【解决方案1】：

如果我理解你的问题，

根据您希望显示数据的方式，您可以将警报中显示的数据拆分为“，”，并将这些新的单个项目中的每一个用作带有 JavaScript DOM 操作的编号/无序列表的数据。

以下是有关拆分数据的信息：句法拆分（分隔符，限制）

Parameter
separator:  The character to separate the string. The separator itself is 
a string. If the separator is not present it returns the entire string. in 
your case you could use ",". 

limit : An integer specifying a limit on the number of substrings to be 
found. Make it big if you don't know how many individual items are in the 
object showing in your alert.

以下是有关 javascript 的信息： https://www.w3schools.com/js/js_htmldom_html.asp

【讨论】：

【解决方案2】：

您没有具体说明您希望如何格式化 JSON，但我试了一下并做了相应的操作。

您可以使用以下代码。

http.onreadystatechange = function() {
             if(http.readyState == 4 && http.status == 200) {
             var a=http.responseText.split(" ");
            a.forEach((e)=> $('body').append(e + "<br>"))

             }
        }

split 函数在每个(" ") 上将JSON 拆分为一个数组。您可以在此处放置要拆分的任何参数。然后将数组中的每个元素附加一个换行符。

【讨论】：