如何在 jquery 中使用 Ajax 从 Json 发送数据以获取 html 元素？答案

【问题标题】：How to send data from Json using Ajax in jquery for html element?如何在 jquery 中使用 Ajax 从 Json 发送数据以获取 html 元素？
【发布时间】：2015-08-17 04:45:04
【问题描述】：

我正在尝试使用 jQuery AJAX 调用成功时将 5 行数据库 (MySQL) 中的数据显示到表行。数据采用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>

请指教。

【问题讨论】：

我认为你必须动态创建表行
因为您使用 id 选择器 (id="name", id="price"...) 并且您的代码确实附加了任何新的表行，因此不会在表中创建新行.不要在模板中使用 id 选择器，您需要遍历数据并追加新行。

标签： javascript jquery ajax json

【解决方案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>

【讨论】：

@Mackan 那很好。如果柬埔寨频道希望json中的数据只需要在表中，他可以在追加第一个克隆之前删除所有行

【解决方案2】：

你可以试试这个，我在本地测试一下，效果很好：

$.ajax({
    url: '<?php echo base_url('ads/select_post'); ?>',
    data: {},
    dataType: "json",
        cache: false,
        success: function (data) {
        $.each(data, function (i, val) {
            var tr = "<tr>" +
                "<td>"+ (i + 1) + "</td>" +
                "<td>"+ val.name + "</td>" +
                "<td>"+ val.price + "</td>" +
                "<td>"+ val.addr + "</td>" +
                "<td>"+ val.des + "</td>" +
                "<td>"+ val.viewed + "</td>" +
                "<td>"+ val.status + "</td>" +
                "</tr>";
            $(tr).appendTo("tbody");
        });
    }
});

还有你的html table:

<table>
    <tbody id="items">

    </tbody>
</table>

【讨论】：

你用tr来appenTo但是如果我有两个或三个表我应该如何使用ID而不是这个

【解决方案3】：

你需要这样的东西：

DEMO HERE

HTML 结构

<table>
    <thead>
        <th>Sl No.</th>
        <th>Address</th>
        <th>Description</th>
        <th>Image</th>
        <th>Name</th>
        <th>Price</th>
        <th>Status</th>
        <th>Viewed</th>
    </thead>
    <tbody id="items">
    </tbody>
</table>

JS

    $.each(data, function (i, val) { 
           $("tbody#items").append("<tr><td>"+(i+1)+"</td><td><a><div>"+val.addr+"</div></a></td>"
                +"<td><a><div>"+val.des+"</div></a></td>"
                +"<td><a><div>"+val.img+"</div></a></td>"
                +"<td><a><div>"+val.name+"</div></a></td>"
                +"<td><a><div>"+val.price+"</div></a></td>"
                +"<td><a><div>"+val.status+"</div></a></td>"
                +"<td><a><div>"+val.viewed+"</div></a></td></tr>");
    });

【讨论】：

【解决方案4】：

需要在ajax成功创建表rows()。
而且你不应该在 td 标签中使用相同的 id。

var html = "";
$.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);

        html +="<tr>";
        html += "<td>" + val.name + "</td>" ;
        html += "<td>" + val.price + "</td>" ;
        html += "<td>" + val.addr + "</td>" ;
        html += "<td>" + val.des + "</td>" ;
        html += "<td>" + val.viewed + "</td>" ;
        html += "<td>" + val.status + "</td>" ;
        html +="</tr>";
    });
    $("$items").html(html);
  }
});

你的html：

<table>
    <tbody id="items">

    </tbody>
</table>

【讨论】：

你可以像这样使用 appendTo()。 $(html).appendTo("#items");

【解决方案5】：

你可能需要一些这样的代码，这是一个粗略的想法，如果你不明白可以告诉我

this.tableElement = jQuery('<table/>', {
}).appendTo(gridWrapElement);

var tableBody = jQuery('<tbody/>', {
    'class': 'eg-table-body'
});

this.tableBodyRow = jQuery('<tr/>', {
});

var scope = this;
var columns = [{
        name:"Name",
        dataIndex:"name",
        width: "33%"
    },{
        name:"Price",
        dataIndex:"price",
        width: "33%"
    },{
        name:"Address",
        dataIndex:"addr",
        width: "34%"
    }];
$.each(this.columns, function(index, column) {
    var tableBody = jQuery('<td/>', {
        width: column.width,
        columnDataIndex: column.dataIndex,
        columnIndex: index
    });

    jQuery('<div/>', {
        html: "<a>" + column.name + "</a>",
        class: "eg-table-Body-div"
    }).appendTo(tableBody);

    tableBody.appendTo(scope.tableBodyRow);
    scope.tableBodyItems.push(tableBody);
});

jQuery(this.tableBodyRow).appendTo(tableBody);
jQuery(tableBody).appendTo(this.tableElement);

【讨论】：

不知道怎么发送到html

【解决方案6】：

var body = '';
$.each(val,function(i,j){
  body = body + '<tr><td>'+i+1+'</td>';
  body = body + '<td>'+j.name+'</td>';
  body = body + '<td>'+j.price+'</td>';
  body = body + '<td>'+j.addr+'</td>';
  body = body + '<td>'+j.des+'</td>';
  body = body + '<td>'+j.viewed+'</td>';
  body = body + '<td>'+j.status+'</td></tr>';
});
$('#items').html(body);

这将为您提供带有值的表格

【讨论】：

【解决方案7】：

如果您可以动态行的话会更好。然后将生成的 html 附加到 tbody 表中，如下例所示：

HTML

<table>
<tbody id="items">
    <tr>
        <td>No.</td>
        <td>name</td>
        <td>price</td>
        <td>addr</td>
        <td>des</td>
        <td>viewed</td>
        <td>status</td>
    </tr>
</tbody>

JS

var data = [{
"name": "dfasdfas",
    "price": "0",
    "addr": "dfasdfas",
    "des": "sadfdfasdfasdf",
    "viewed": "0",
    "img": "",
    "status": "1"
}, {
"name": "asdDasdA",
    "price": "0",
    "addr": "asdADasd",
    "des": "ASDasdASD",
    "viewed": "0",
    "img": "",
    "status": "1"
}];

/************ put this inside ajax success block*/
var output;
$.each(data, function (i, val) {
output += '<tr><td>' + i + '</td>' +
    '<td><a><div id="name">' + val.name + '</div> </a></td>' +
    '<td><a><div id="price">' + val.price + '</div> </a></td>' +
    '<td><a><div id"addr">'+ val.addr +'</div></a></td>' +
    '<td><div id="des">' + val.des + '</div> </td>' +
    '<td><a><div id="viewed">' + val.viewed + '</div></a></td>' +
    '<td><a><div id="status">'+
val.status+'</div></a></td></tr>';
});

$('#items').append(output);
/************ end */

DEMO

【讨论】：

【解决方案8】：

试试这个。 Its shows all data in table. http://jsfiddle.net/Navneethk/zcpp51tc/2/

【讨论】：

这可以进入 cmets。那里有很多可用的土地.. :)

【解决方案9】：

var html = '<tr>';
 for(var i = 0 ;i < data.length;i++){ 
  var val = data[i];
  html += '<td>'+i+'</td>'+
            '<td><a><div id="name'+id+'">'+ val.name +'</div> </a></td>'+ 
            '<td><a><div id="price'+id+'">'+ val.price +'</div> </a></td>'+ 
            '<td><a><div id"addr'+id+'">+ val.addr +</div></a></td>'+ 
            '<td><div id="des'+id+'">' +val.des+ '</div> </td>'+ 
            '<td><a><div id="viewed'+id+'">'+ val.viewed +'</div></a></td>'+ 
            '<td><a><div id="status'+id+'">' val.status '</div></a></td>';
}

 $("#items").html(html);

【讨论】：

for循环中不应该有div的id，因为它根本没有意义，因为您只能将单个id分配给单个项目。
@ParagBhayani 我将单个 id 分配给单个项目。
如果数据数组中有 15 个项目，那么它将创建 15 个具有 '
' 的 div，因此 15 个具有单个 id 的 div 不是应该的......我希望你得到这个......
@ParagBhayani 是的，数据数组中的 15 个项目将创建 15 个不同的行，并且每行都有与之关联的 id。
@ParagBhayani 请参考我在 for 循环中的第二行。