javascript - 如何在 html 元素的 jquery 中使用 Ajax 从 Json 发送数据？

Question

我试图在成功调用 jQuery AJAX 时将数据库 (MySQL) 的 5 行数据显示到表的行中。数据为 JSON 格式。

问题:我无法弄清楚获取所有这些行。我只能得到一行，但 console 向我显示了 JSON 格式的所有行。

$.ajax({
  url: '<?php echo base_url('ads/select_post'); ?>',
   data: {},
   dataType: "json",
   cache: false,
   success: function (data) {
     $.each(data, function (i, val) { 
       console.log(val.name);
       $("#name").html(val.name);
       $("#price").html(val.price);
       $("#addr").html(val.addr);
       $("#des").html(val.des);
       $("#viewed").html(val.viewed);
       $("#status").html(val.status);
    });
 }
});

控制台输出:

[{"name":"dfasdfas","price":"0","addr":"dfasdfas","des":"sadfdfasdfasdf","viewed":"0","img":"","status"
:"1"},{"name":"Heng","price":"0","addr":" dflkas;df","des":"asdfasdf"
,"viewed":"0","img":"","status":"1"},{"name":"asdDasdA","price":"0","addr":"asdADasd","des":"ASDasdASD"
,"viewed":"0","img":"","status":"1"},{"name":"asdfas","price":"0","addr":"fasdfas","des":"dfasdf","viewed"
:"0","img":"","status":"1"},{"name":"asdf","price":"0","addr":"asdfasdfas","des":"asdfasdfasdf","viewed"
:"0","img":"","status":"1"}]

HTML 我正在向其发送数据的表，

<tbody id="items">
 <tr>
  <td>1</td>
  <td><a><div id="name"></div> </a></td> 
  <td><a><div id="price"></div> </a></td> 
  <td><a><div id"addr"></div></a></td> 
  <td><div id="des"></div> </td> 
  <td><a><div id="viewed"></div></a></td> 
  <td><a><div id="status"></div></a></td> 
 </tr>

请指教。

Answer 1

很多好的答案，但由于我已经创建了一个示例，所以我也会发布它。如果不出意外，它可能会为您或其他人提供替代解决方案。我正在使用类而不是 Id，并保留您的原始结构。

既然这被接受为答案，我还应该提及您的代码失败的原因:
您的 each 循环不断覆盖表行数据的内容，而不是创建新行。另一件需要修复的事情是你已经给了列 ID，如果你想重复行，这些列不能保留(因为它们是)，因为页面中的 ID 必须是唯一的。

创建新元素的方法有很多种。我选择了 clone()，因为我认为您总会有一行标题可以轻松用于克隆/复制。我还为每个 tr 添加了一个 unique Id 属性。这些在下面的当前实现中并未真正使用，但稍后在您的项目中作为引用可能会很好。

var data = [{"name":"dfasdfas","price":"0","addr":"dfasdfas","des":"sadfdfasdfasdf","viewed":"0","img":"","status"
:"1"},{"name":"Heng","price":"0","addr":" dflkas;df","des":"asdfasfasdfasdfasdfasdfasfasdfasdfasdfas"
,"viewed":"0","img":"","status":"1"},{"name":"asdDasdA","price":"0","addr":"asdADasd","des":"ASDasdASD"
,"viewed":"0","img":"","status":"1"},{"name":"asdfas","price":"0","addr":"fasdfas","des":"dfasdf","viewed"
:"0","img":"","status":"1"},{"name":"asdf","price":"0","addr":"asdfasdfas","des":"asdfasdfasdf","viewed"
:"0","img":"","status":"1"}];

//place within the Ajax success
$.each(data, function(i, val) {
  var currRow = $("#tr0").clone().appendTo($('#items')).attr('id','tr' + (i + 1));
  currRow.find('td:eq(0)').html(i + 1);
  currRow.find('.name').html(val.name);
  currRow.find('.price').html(val.price);
  currRow.find('.addr').html(val.addr);
  currRow.find('.des').html(val.des);
  currRow.find('.viewed').html(val.viewed);
  currRow.find('.status').html(val.status);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
  <tbody id="items">
    <tr id="tr0">
      <td>Id</td>
      <td><a><div class="name">Name</div></a></td>
      <td><a><div class="price">Price</div></a></td>
      <td><a><div class="addr">Addr</div></a></td>
      <td><div class="des">Des</div></td>
      <td><a><div class="viewed">Viewed</div></a></td>
      <td><a><div class="status">Status</div></a></td>
    </tr>
  </tbody>
</table>