使用AJAX未定義回應的GET請求-有解無憂

我正在使用它作業的 API，但現在我想顯示我使用 HTML 獲得的資料。原始 JSON 顯示在 http://localhost:8080/top250movies 但現在我想使用 AJAX 獲取此 JSON 原始資料，但我得到“未定義”而不是排名和電影標題。我的代碼在下面。

測驗.html

<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<style>

</style>
<title></title>
</head>
<body>

<div id="demo">
    <p id="rank"></p>
    <p id="title"></p>
</div>


<script>
 $.ajax({
  type: "GET",
  url: "http://localhost:8080/top250movies",
  // Request headers
  beforeSend: function(xhrObj) {
    xhrObj.setRequestHeader("Cache-Control", "no-cache");
    xhrObj.setRequestHeader("Subscription-Key", "my free key");
    },
})

.done(function (items) {
  console.log('Your response', items)
  document.getElementsByName("rank").innerHTML = items.rank;
  document.getElementById("title").innerHTML = items.title;
})
</script>

</body>

這里是 http://localhost:8080/top250movies 上的一小部分資料

[
  {
    "items": [
      {
        "rank": "1",
        "title": "The Shawshank Redemption",
        "fullTitle": "The Shawshank Redemption (1994)",
        "year": "1994",
        "image": "https://m.media-amazon.com/images/M/MV5BMDFkYTc0MGEtZmNhMC00ZDIzLWFmNTEtODM1ZmRlYWMwMWFmXkEyXkFqcGdeQXVyMTMxODk2OTU@._V1_UX128_CR0,3,128,176_AL_.jpg",
        "crew": "Frank Darabont (dir.), Tim Robbins, Morgan Freeman",
        "imDbRating": "9.2",
        "imDbRatingCount": "2596857"
      },
      {
        "rank": "2",
        "title": "The Godfather",
        "fullTitle": "The Godfather (1972)",
        "year": "1972",
        "image": "https://m.media-amazon.com/images/M/MV5BM2MyNjYxNmUtYTAwNi00MTYxLWJmNWYtYzZlODY3ZTk3OTFlXkEyXkFqcGdeQXVyNzkwMjQ5NzM@._V1_UX128_CR0,1,128,176_AL_.jpg",
        "crew": "Francis Ford Coppola (dir.), Marlon Brando, Al Pacino",
        "imDbRating": "9.2",
        "imDbRatingCount": "1792213"
      }.......

這就是我得到的：使用 AJAX 未定義回應的 GET 請求

uj5u.com熱心網友回復：

嘗試這個

document.getElementsByName("rank").innerHTML = items[0].items[0].rank; 
document.getElementById("title").innerHTML = items[0].items[0].title;

或者你可以創建一個表

<script>

function CreateTableFromJSON(items, colNames) {
  // EXTRACT VALUE FOR HTML HEADER.
  var col = [];
  for (var i = 0; i < items.length; i  ) {
    for (var key in items[i]) {
      if (colNames.indexOf(key) >= 0 && col.indexOf(key) === -1) {
        col.push(key);
      }
    }
  }

   // CREATE DYNAMIC TABLE.
  var table = document.createElement("table");

  // CREATE HTML TABLE HEADER ROW USING THE EXTRACTED HEADERS ABOVE.
  var tr = table.insertRow(-1); // TABLE ROW.

  for (var i = 0; i < col.length; i  ) {
    var th = document.createElement("th"); // TABLE HEADER.
    th.innerHTML = col[i];
    tr.appendChild(th);
  }

  // ADD JSON DATA TO THE TABLE AS ROWS.
  for (var i = 0; i < items.length; i  ) {
    tr = table.insertRow(-1);

    for (var j = 0; j < col.length; j  ) {
      var tabCell = tr.insertCell(-1);
      tabCell.innerHTML = items[i][col[j]];
    }
  }

  // FINALLY ADD THE NEWLY CREATED TABLE WITH JSON DATA TO A CONTAINER.
  var divContainer = document.getElementById("showData");
  divContainer.innerHTML = "";
  divContainer.appendChild(table);
}

 $.ajax({
  type: "GET",
  url: "http://localhost:8080/top250movies",
  // Request headers
  beforeSend: function(xhrObj) {
    xhrObj.setRequestHeader("Cache-Control", "no-cache");
    xhrObj.setRequestHeader("Subscription-Key", "my free key");
    },
})
.done(function (items) {
var colNames = ["rank", "title"];
CreateTableFromJSON(items[0].items, colNames);
}
</script>

要顯示表格，您必須將 div 添加到頁面 html

<body>

<div id="showData" class="container"></div>

</body>

轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/488913.html

標籤：html jQuery json 阿贾克斯得到

上一篇：無法訪問另一個腳本上的變數

下一篇：在表單頁面上顯示輸入值而不單擊提交