我想使用Ajax将json数据显示到html页面中的卡上

Question

我的要求的输出

我已经尝试了很多次，以在html页面中获得所需的结果。

我在html中选中一个框时正在调用一个函数，该函数会返回json数据的结果，并且我想将该json数据动态显示为我的卡片样式。

这是hmtl代码：

    <div id="filter"style="margin-top:100px;margin-left:100px">
  <h2>Filter options</h2>
  <div>
    <input type="checkbox" id="Samsung" checked>
    <label for="Samsung">Samsung</label>
  </div>
  <div>
    <input type="checkbox" id="iPhone" checked>
    <label for="iPhone">iPhone</label>
  </div>
  <div>
    <input type="checkbox" id="HTC" checked>
    <label for="HTC">HTC</label>
  </div>
  <div>
    <input type="checkbox" id="LG" checked>
    <label for="LG">LG</label>
  </div>
  <div>
    <input type="checkbox" id="Nokia" checked>
    <label for="Nokia">Nokia</label>
  </div>
</div>


<table id="phones" >
  <thead>

  </thead>
  <tbody >

   <div style="margin-top:100px;margin-left:100px;margin-right:100px" >
   <div> 
  <label style="margin-bottom:50px;margin-left:80px"><h2>Find your best hotel</h2></label>
  </div>

    <div class="col-xs-12 col-sm-4"  style="background-color:lavender;height:310px;width:310px"><label id="hotel_image"></label></div>
    <div class="col-xs-12 col-sm-6" style="background-color:lavenderblush;"><label id="hotel_name"></label></div><br>
    <div class="col-xs-12 col-sm-3"   style="background-color:lavender;margin-left:100px;margin-top:10px"><label id="hotel_price"></label></div>
    <div class="col-xs-12 col-sm-3"   style="background-color:#ccc;margin-top:220px;margin-left:300px"><label id="book_me"></label></div>

    </div>

  </tbody>
</table>

这是JavaScript代码：

    <script>

  function getPhoneFilterOptions(){
    var opts = [];
    $checkboxes.each(function(){
      if(this.checked){
        opts.push(this.id);
      }
    });

    return opts;
  }

  function updatePhones(opts){
    $.ajax({
      type: "POST",
      url: "submit.php",
      dataType : 'json',
      cache: false,
      data: {filterOpts: opts},
      success: function(data){



        $.each(data, function() {

        $.each(this, function(k , v) {

         if(k==='img_path'){
          v = "<a href='image_description.html'><image src='img_path' height='300px' width='300px' ></a>";

            ("#hotel_image").html(v);

        } else if (k==='price'){

          ("#hotel_price").html(v);

        } else if (k==='brand'){

            ("#hotel_name").html(v);

        }

      })

    });

  }
  })
  }

  var $checkboxes = $("input:checkbox");
  $checkboxes.on("change", function(){
    var opts = getPhoneFilterOptions();
    updatePhones(opts);
  });

  $checkboxes.trigger("change");
</script>

正在像这样从commit.php收集数据json数据：

[
   {
     "img_path":"photo1.jpg",
     "price":"2000",
     "brand":"AAMSOTO"
   },

   {
     "img_path":"photo4.jpg",
     "price":"2500",
     "brand":"AfMSOTO"
   },

   {
     "img_path":"photo2.jpg",
     "price":"3000",
     "brand":"CAMSOTO"
   },
   {
     "img_path":"photo3.jpg",
     "price":"4000",
     "brand":"BAMSOTO"
   }
]

Answer 1

假设data是一个javascript对象，则您的成功方法中的以下内容应该起作用：

确保数据是一个javascript对象，如果不是，则必须使用JSON.parse()将JSON数据转换为一个。

$.each(data, function() {
           var imageUrl = this['img_path']
           var price = this['price']
           var brand = this['brand']

           const img = document.createElement('img');
           img.src = imgUrl;
           document.getElementById('#hotel_image').appendChild(img);
     document.getElementById('#hotel_price').appendChild(document.createTextNode(price));

                    document.getElementById('#hotel_name').appendChild(document.createTextNode(brand));
        }