Javascript 如何在jquery for html元素中使用Ajax从Json发送数据？

我试图使用

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);
    });
 }
});

将数据发送到的表的

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>

1.

---

请告知。

您将所有5个数据行分配给同一模板，以便只看到返回的最后一个数据集。 您应该使用createElement或jQuery动态创建这5行；

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);

对于（var i=0；i您可能需要一些这样的代码，这是一个粗略的想法，如果您不明白，可以告诉我

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);

this.tableElement=jQuery（“”{
}).附录（网格包裹）；
var tableBody=jQuery（“”{
“类”：“例如表体”
});
this.tableBodyRow=jQuery（“”{
});
var范围=此；
变量列=[{
姓名：“姓名”，
数据索引：“名称”，
宽度：“33%。”
},{
名称：“价格”，
数据索引：“价格”，
宽度：“33%。”
},{
姓名：“地址”，
数据索引：“地址”，
宽度：“34%。”
}];
$.each（this.columns，函数（索引，列）{
var tableBody=jQuery（“”{
宽度：column.width，
columnDataIndex:column.dataIndex，
columnIndex:索引
});
jQuery（“”{
html:“+column.name+”，
类别：“例如，表体分区”
}).附录（表体）；
tableBody.appendTo（scope.tableBodyRow）；
范围。床体项目。推（床体）；
});
jQuery（this.tableBodyRow）.appendTo（tableBody）；
jQuery（tableBody）.appendTo（this.tableElement）；

您可以试试这个，我在本地测试它，它可以工作：

$.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>
    <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>

Sl号。
地址
描述
形象
名称
价格
地位
观看

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>");
    });

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 */

$。每个（数据，函数（i，val）{
$（“tbody#items”）.append（“+（i+1）+”“+val.addr+”）
+“”+val.des+“”
+“”+val.img+“”
+“”+val.name+“”
+“”+val.price+“”
+“”+val.status+“”
+“+val.view+”）；
});

var body=''；
$。每个（val，函数（i，j）{
主体=主体+i+1+；
body=body+''+j.name+''；
主体=主体+价格+价格；
正文=正文+“”+j.addr+“”；
主体=主体+“”+j.des+“”；
主体=主体+“”+j.被观察+“”；
身体=身体+''+j.状态+''；
});
$（'#items'）.html（正文）；

---

这将为您提供具有值的表

如果您可以动态地创建行，则效果更好。然后将生成的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>

不
名称
价格
地址
des
观看
地位

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>");
    });

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 */

var数据=[{
“名称”：“dfasdfas”，
“价格”：“0”，
“地址”：“dfasdfas”，
“des”：“sadfdffasdfasdf”，
“已查看”：“0”，
“img”：“，
“状态”：“1”
}, {
“名称”：“asdDasdA”，
“价格”：“0”，
“地址”：“asdADasd”，
“des”：“ASDasdASD”，
“已查看”：“0”，
“img”：“，
“状态”：“1”
}];
/************将其放入ajax成功块中*/
var输出；
$。每个（数据、函数（i、val）{
输出+=''+i+''+
“
试试这个。
它会显示表中的所有数据。
您需要在ajax成功中创建表行（）
您不应该在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);
  }
});

var html=”“；
$.ajax({
url:“”，
数据：{}，
数据类型：“json”，
cache:false，
成功：功能（数据）{
$.each（数据，函数（i，val）{
console.log（val.name）；
html+=“”；
html+=“”+val.name+“”；
html+=“”+val.price+“”；
html+=“”+val.addr+“”；
html+=“”+val.des+“”；
html+=“”+val.view+“”；
html+=“”+val.status+“”；
html+=“”；
});
$（“$items”）.html（html）；
}
});

您的html：

<table>
    <tbody id="items">

    </tbody>
</table>


有很多很好的答案，但既然我已经创建了一个示例，我也会发布它。如果没有其他东西，它可能会为您或其他人提供另一种解决方案。我使用类而不是Id，并保留您的原始结构

既然这被接受为答案，我还应该提到代码失败的原因：

您的
每个
循环都在不断覆盖表行数据的内容，而不是创建新行。另一件需要修复的事情是，您已经给出了列Id，如果您想重复这些行，这些列就不能保留下来，因为页面中的Id必须是唯一的

有很多方法可以创建新元素

正如我所想，您总是会有一行标题，可以轻松地用于克隆/复制。此外，我还为每个

tr

添加了一个唯一的Id属性。这些属性在下面的当前实现中并没有真正使用，但在以后的项目中作为参考可能会更好

var data=[{“name”：“dfasdfas”，“price”：“0”，“addr”：“dfasdfas”，“des”：“sadfdffasdfasdf”，“view”：“0”，“img”：“status”
：“1”}，{“name”：“Heng”，“price”：“0”，“addr”：“dflkas；df”，“des”：“asdfasfasdfasdfasdfasdfasdfasdfasdfas”
，“已查看”：“0”，“img”：“状态”：“1”}，{“名称”：“asdDasdA”，“价格”：“0”，“地址”：“ASDADASDD”，“des”：“ASDasdASD”
，“已查看”：“0”，“img”：“状态”：“1”}，{“名称”：“asdfas”，“价格”：“0”，“地址”：“fasdfas”，“des”：“dfasdf”，“已查看”
<table>
    <tbody id="items">

    </tbody>
</table>