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

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 += .......

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（默认值：Intelligent Guess（xml，json，script或html））类型：字符串您期望从服务器返回的数据类型。如果没有指定，jQuery将尝试根据响应的MIME类型推断它（XML MIME类型将产生XML，在1.4 JSON中将产生一个JavaScript对象，在1.4脚本中将执行脚本，其他任何东西将是以字符串形式返回）。

Answer 3

你应该包括这一行，因为它可能是数据类型为字符串而不是对象

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

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

3 个答案: