如何使用jQuery Ajax显示JSON数据？

Question

我的代码出现问题，但我不知道原因。请帮助我。

我有一个AJAX调用，返回以下JSON数据，但无法返回json文件中的数据：

  $(function() {
    ajaxJS();
    function ajaxJS(e) {
      if (e) {
        e.preventDefault();
      }
      $.ajax({
        url: "https://raw.githubusercontent.com/RichmondDay/public/master/test_vehicle_inventory_data.json",
        method: "GET",
        success: function(data) {
          console.log(data);
          var html_to_append = '';
          $.each(data, function(i, item) {
            html_to_append +=
            '<div class="col-3 mb-3"><div class="text-uppercase"><p>' +
            item.Name + 
            '<div class="col-3 mb-3"><div class="ext-uppercase"><p>' +
            item.Price +
            '</p></div><img  class="image img-fluid" src="' +
            item.photo +
            '" /><p class="company">' +
            item.Retailer +
            '</p></div>';
          });
          $("#items-container").html(html_to_append);
        },
        error: function() {
          console.log(data);
        }
      });

    }

  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container-fluid">
    <div id="items-container" class="row"></div>
  </div>

Json

- Alan

---

console.log(data);记录了什么？数据已经解析了吗？是否有任何控制台错误？ - Taplar

Answer 1

您似乎缺少将JSON解析为数组的代码行。您的代码应该添加这一行：

...
success: function(data) {
          console.log(data);
          data = jQuery.parseJSON(data); // <-- *** ADD THIS LINE ***
          var html_to_append = '';
          $.each(data, function(i, item) {
            html_to_append += .......

- Bernz

Answer 2

您应该在ajax调用中设置dataType参数，这样您就可以得到一个对象而不是字符串。似乎您的API服务没有设置特定类型的内容类型标头，因此jquery不会根据内容类型尝试解析数据。https://jsfiddle.net/6ygan94m/是您的代码示例。

$.ajax({
        url: "https://raw.githubusercontent.com/RichmondDay/public/master/test_vehicle_inventory_data.json",
        method: "GET",
        dataType: 'json',
        success: function(data) {
          console.log(typeof(data));
          var html_to_append = '';
          $.each(data, function(i, item) {
            html_to_append +=
            '<div class="col-3 mb-3"><div class="text-uppercase"><p>' +
            item.Name + 
            '<div class="col-3 mb-3"><div class="ext-uppercase"><p>' +
            item.Price +
            '</p></div><img  class="image img-fluid" src="' +
            item.photo +
            '" /><p class="company">' +
            item.Retailer +
            '</p></div>';
          });
          $("#items-container").html(html_to_append);
        },
        error: function() {
          console.log(data);
        }
      });

请参阅jquery api文档获取更多信息：http://api.jquery.com/jquery.ajax/

dataType（默认值：智能猜测（xml、json、script或html）） 类型：字符串 你期望从服务器返回的数据类型。如果没有指定，则jQuery将根据响应的MIME类型来推断它（一个XML MIME类型将产生XML，在1.4中JSON将产生JavaScript对象，在1.4中script将执行脚本，任何其他类型将被返回为字符串）。

- scrappedcola

Answer 3

你应该包含这行代码，因为数据可能是字符串类型而不是对象类型。

if (typeof data === "string") // validate if data is json string then parse it 
data = JSON.parseJSON(data)

- Alen.Toma