jquery - JSON数据不显示在网页上

Question

我第一次尝试连接到 Blackbaud API、检索 JSON 对象并将其显示在网页上。当我将其直接放入浏览器时，我正在使用的 request.open 链接(下面未显示，因为它包含用户数据)返回信息，没有错误。

JSON 数据返回的示例如下:

{"getConsTransactionsResponse":{"transaction":{"amount":{"formatted":"$50.00","decimal":"50.00"},"timestamp":"2016-02-01T09:43:54.458-06:00","pay_method":"ONLINE","billing_name":{"title":null,"last":"Smith","suffix":null,"middle":null,"first":"John","prof_suffix":null},"transaction_type":"DONATION","tender_type":"INVALID","confirmation_code":{},"donation_detail":{"value_of_goods":{"formatted":"$0.00","decimal":"0.00"},"tax_deductible_amount":{"formatted":"$0.00","decimal":"0.00"},"level":{"id":"9921","title":"API Donation Level"},"form":{"id":"9999","title":"API Form","description":"Sample form for API documentation."},"campaign":{"id":"9901","title":"API Campaign","description":"Sample campaign for API documentation."}},"billing_address":{"street2":null,"zip":null,"street1":null,"county":null,"state":null,"street3":null,"country":null,"city":null}}}}

我用来检索然后显示数据的脚本位于此处:

<script type="text/javascript">
$(document).ready(function() {
    "use strict";

    var donHistory = "";
    var request = new XMLHttpRequest();
    request.open('GET', 'JSON LINK', true);
    request.onload = function () {
        // begin accessing JSON data here
        var data = JSON.parse(this.response);
        donHistory += '<div>';
        for (var i=0; i<data.length; i++) {
            donHistory += data[i].transaction.amount + '<br>';
        }
        donHistory += '</div>';         
        var divHistory = document.createElement("div");
        var divHistoryText = document.createTextNode(donHistory); 
        divHistory.appendChild(divHistoryText);
        var divElement = document.getElementById("col-content-box");
        divElement.appendChild(divHistory);
    };      
    request.send();
});

我的网页上显示的只是一个开始和结束的 div。

它被放置在正确的区域，只是没有 JSON 数据。控制台没有显示任何错误。显然，我对此很陌生并且犯了一些简单的错误。

我需要帮助的是:

1) 为什么我知道存在的 JSON 数据没有显示在屏幕上？

2)如果/当我确实做到了这一点，我做错了什么，使显示为文本而不是嵌入为代码？

Answer 1

请查看以下代码片段，它类似于您最近的屏幕截图中的代码。您应该能够在此网站上运行该代码片段以查看其是否有效。我改变了一些事情:

• 我使用 renderTransactions 将 AJAX 调用与生成用于显示的 HTML 的代码分离。
• 我用过renderTransactions显示我自己的一些测试数据，用于演示目的
• 我写了renderTransactions使用名为 Template Literals 的 ES2015 功能这使我能够简洁地将数据值与 HTML 合并
• 我将您的数据呈现到表格中(使用 bootstrap 样式)。我的选择<table>是任意的；您可以使用任何您想要的 HTML 元素。

希望您能够了解如何扩展我在这里为您的应用程序开始的内容。 代码片段中有一条注释描述了如何重新连接 AJAX 调用，出于演示目的，我已禁用该调用。

祝你好运!

$(document).ready(function() {

  /* Since I do not have access to your HTTP endpoint, 
   ** I've used my own test data that resembles your data.
   ** When you're ready to run this code against your endpoint,
   ** remove the block up to and including the `return` statement.
   */

  renderTransactions([
    {amount: {formatted: '$1.00'},credit_card_type: 'VISA'},
    {amount: {formatted: '$2.00'},credit_card_type: 'MASTERCARD'},
    {amount: {formatted: '$3.00'},credit_card_type: 'MASTERCARD'},
    {amount: {formatted: '$4.00'},credit_card_type: 'MASTERCARD'},
    {amount: {formatted: '$5.00'},credit_card_type: 'VISA'}
  ]);

  return;

  $.ajax({
    dataType: 'json',
    url: 'INSERT YOUR URL HERE',
    method: 'GET',
    /* I think this should be GET but in your screenshot it appeared that you had something much longer here, not sure why. */
    success: function(data) {
      renderTransactions(data.getConsTransactionsResponse.transaction);
    }
  });
});

function renderTransactions(transactions) {
  let $transactionTable = $(`
    <table class="table table-bordered table-sm">
      <thead>
        <tr>
          <th>Amount</th>
          <th>Credit Card Type</th>
        </tr>
      </thead>
      <tbody></tbody>
    </table>`).appendTo('#col-content-box');

  let $transactionTableBody = $transactionTable.find('tbody');

  transactions.forEach(t => {
    $transactionTableBody.append($(`
      <tr>
        <td>${t.amount.formatted}</td>
        <td>${t.credit_card_type}</td>
      </tr>
    `));
  });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div id="col-content-box"></div>