通过 AJAX 成功方法在 html 中显示数据答案

【问题标题】：display data in html through an AJAX success method通过 AJAX 成功方法在 html 中显示数据
【发布时间】：2023-11-09 05:02:01
【问题描述】：

我正在编写以下代码，用于以 json 格式从数据库返回的 html 表中显示数据

success : function(data){
            alert("declaring variable");
            var output="<table id=tableStyle>";
            alert("creating output");
            output+="<tr>" + "<th>" + "REPORTSUITE_ID" + "</th>" + "<th>" + "REPORTSUITE_NAME" + "</th>" + "<th>" + "STAGING_DATABASE" + "</th>" + "<th>" + "DWH_DATABASE" + "</th>" + "</tr>";
            alert("starting for loop"); 
            for (var i in data)
            {
                output+="<tr>" + "<td>" + data[i].REPORTSUITE_ID + "</td>" + "<td>" + 
      "<button>"+data[i].REPORTSUITE_NAME + "</button>" +
      "</td>" + "<td>" + data[i].STAGING_DATABASE + "</td>" + "<td>" + data[i].DWH_DATABASE + "</td>" + "</tr>";
            }
            output+="</table>";
            alert ("displaying now ");
            document.getElementById("placeholder").innerHTML=output;
          }

JSON中的数据格式如下：

[{"DWH_DATABASE": "abc", "REPORTSUITE_ID": 51, "REPORTSUITE_NAME": "C1","STAGING_DATABASE": "def", "TRANS_TABLE": "T1"}, 
{"DWH_DATABASE": "abc", "REPORTSUITE_ID": 49, "REPORTSUITE_NAME": "C2", "STAGING_DATABASE": "def", "TRANS_TABLE": "T2"}, 
{"DWH_DATABASE":"abc", "REPORTSUITE_ID": 40, "REPORTSUITE_NAME": "C3", "STAGING_DATABASE": "def", "TRANS_TABLE": "T3"}]

当我执行上面的代码时，我得到的结果如下：

REPORTSUITE_ID  REPORTSUITE_NAME    STAGING_DATABASE    DWH_DATABASE
undefined         undefined          undefined         undefined
undefined         undefined          undefined         undefined
undefined         undefined          undefined         undefined

请告诉我如何正确显示数据

【问题讨论】：

您的 data 参数是 JSON 字符串还是已经解析为 Javascript 对象？
我认为在循环中你应该通过i 访问数据，比如i.DWH_DATABASE 而不是data[i].DWH_DATABASE
如果您不在这里及时回答我们提出的问题，很难为您提供帮助。
我试过 i.DWH_DATABASE，还是一样的输出。 .我做了“警报（数据）”，它以 JSON 格式显示。我在警报中查看的输出如上面问题中给出的那样，但是当我尝试解析它时，我得到所有未定义的
我得到了正确的输出。我做了 data = JSON.parse(data);然后，为了显示我做了 data[i].REPORTSUITE_ID。它工作..

标签： jquery python html ajax flask

【解决方案1】：

代码是正确的，但要确保数据变量实际包含数据。事先通过控制台打印出来，你会看到里面有什么：

console.log("data:" + data);

【讨论】：

我确实对数据发出了警报，它用正确的数据发出警报，因此正在返回数据

【解决方案2】：

您必须先解析 json，以便您可以将其作为对象而不是文本使用以下代码作为成功方法的第一行来处理：

data = JSON.parse(data);

【讨论】：

我已经尝试过这个东西，但我仍然得到相同的输出