代码之家 › 专栏 › 技术社区 › Alan

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

ajax json jquery

Alan · 技术社区 · 7 年前

我的代码不起作用,也不知道为什么。请帮忙

我有一个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

3 回复 | 直到 7 年前

Bernz 7 年前

您似乎缺少一行代码来解析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 += .......

scrappedcola 7 年前

您应该在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/

数据类型(默认值:智能猜测(xml、json、脚本或html)) 类型:字符串期望从服务器返回的数据类型。如果未指定任何值,jQuery将根据响应的MIME类型尝试推断它(XML MIME类型将生成XML,在1.4中JSON将生成JavaScript对象,在1.4中脚本将执行脚本,其他任何内容都将作为字符串返回)。

Alen.Toma 7 年前

您应该包括此行,因为它的数据类型可能是string而不是object

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