AJAX 调用以检索 JSON - 如何将结果格式化为屏幕
Posted
技术标签:
【中文标题】AJAX 调用以检索 JSON - 如何将结果格式化为屏幕【英文标题】：AJAX Call to Retrieve JSON - How to format results to screen 【发布时间】：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 响应的问题。您尝试过哪些，为什么它们在这里不适用？ 【参考方案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 拆分为一个数组。您可以在此处放置要拆分的任何参数。然后将数组中的每个元素附加一个换行符。
【讨论】：
以上是关于AJAX 调用以检索 JSON - 如何将结果格式化为屏幕的主要内容，如果未能解决你的问题，请参考以下文章
需要帮助使用 Alamofire 进行 POST 调用以检索 XML
SwiftUI：如何在搜索栏的文本更改时触发 api 调用以检索数据源