使用 ajax 将来自 web api 的数据显示到表中答案

【问题标题】：Displaying data from web api into tables with ajax使用 ajax 将来自 web api 的数据显示到表中
【发布时间】：2017-12-29 17:56:02
【问题描述】：

我在 url "http://jendela.data.kemdikbud.go.id/api/index.php/ccarisanggar/searchGet" 中有一个 web api，我打算用 jquery ajax 显示并插入到表格中，我一直在寻找教程但很难得到它

【问题讨论】：

我在ajax教程中尝试了很多，但没有成功
请发布您在问题中尝试过的代码，让社区了解您的努力。
@DidiTriawan，您是否使用数据表来显示数据？

标签： php jquery html ajax codeigniter

【解决方案1】：

通过 Jquery 你可以这样做

$.ajax({
  url: 'http://jendela.data.kemdikbud.go.id/api/index.php/ccarisanggar/searchGet',
  type: 'GET',
  success: function (responce) {
  // code to append into your table        
  },
  error: function (jqXHR, textStatus, errorThrown) {          
  }
});

【讨论】：

注意：success 和 error 回调已弃用。尝试改用 Promise。

【解决方案2】：

在您的 HTML 标记中

<table id="data">

</table>

在你的脚本标签中

var url="http://jendela.data.kemdikbud.go.id/api/index.php/ccarisanggar/searchGet";

$.ajax({
    type: "GET",
    url: url,
    cache: false,
    // data: obj_data,
    success: function(res){
        console.log("data",res);
        //if you want to remove some feild then delete from below array
        var feilds =["sanggar_id","kode_pengelolaan","nama","alamat_jalan","desa_kelurahan","kecamatan","kabupaten_kota","propinsi","lintang","bujur","tahun_berdiri","luas_tanah"];
        var html='';
        html+=`<thead>
                <tr>`;
        $.each(feilds,function(key,val){
            html+=`<th class="${val}">${val}</th>`;
        })
        html+=`</tr>
            </thead>
            <tbody>`;

        $.each(res.data,function(key,val){

            html+=`<tr>`;
            $.each(feilds,function(aaa,feild){
                html+=`<th class="${val[feild]}">${val[feild]}</th>`;
            })
            html+=`</tr>`;
        })
        html+=`</tr>
            </tbody>`;
        $("#data").html(html);
    },
});

【讨论】：

【解决方案3】：

我无法向您展示整个代码 sn-p。无论如何，希望这对您有所帮助。

<table id="my_table" border='1'>
    <tr>
        <th>Column 1</th>
        <th>Column 2</th>
        <th>Column 3</th>
    </tr>
</table>

<script>
var response = [{
  "column_1":"90",
  "column_2":"Abc",
  "column_3":"50"
 },
 {
   "column_1":"68",
   "column_2":"Cde",
   "column_3":"90"
}];

$(function() {
    $.each(response, function(i, item) {
        $('<tr>').append(
            $('<td>').text(item.column_1),
            $('<td>').text(item.column_2),
            $('<td>').text(item.column_3)
        ).appendTo('#my_table');
    });
});
</script>

【讨论】：

【解决方案4】：

如前所述，我相信您正在使用 codeigniter 作为您的 php 框架。

要完成您的任务，您需要执行以下步骤：

1.) 在视图文件中，例如。 myview.php 添加这个

<div id="mydata"></div>

<script>
$.ajax({
            type: "GET",
            url: "http://jendela.data.kemdikbud.go.id/api/index.php/ccarisanggar/searchGet",
            beforeSend: function(){ 
                $("#mydata").html('<span style="color:green;tex-align:center;">Connecting....</span>');
            },
            success: function(data){
            if(data!="")
            {
                $("#mydata").html(data);

            }else{

                $("#mydata").html('<span style="color:red;tex-align:center;">No data found !</span>');

                }
            }
        });
</script>

2.)要将数据保存在数据库中，请创建事件处理程序，例如按钮单击，或者您可以尝试使用 setInterval 函数。

<button id="mybt" onclick="save_to_db()">Save to DB</button>

<script>
function save_to_db(){
//code to format data to insert into the table
$.ajax({
type:"POST",
url:"/mycontroller/insert_function" //
data:"data_to_insert",
success:function(data){
if(data=="ok"){
console.log("inserted successfully");
}
}
})
}
</script>

【讨论】：