Php 使用ajax将web api中的数据显示到表中

我在url中有一个web api，我打算用jQueryAjax显示并插入到表中，我一直在尝试查找教程，但很难通过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) {          
  }
});

---

我无法向您展示整个代码片段。无论如何，希望这对你有帮助

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

---

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

要完成任务，您需要遵循以下步骤：

一,。在例如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>

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

---

我在ajax教程中做了很多尝试，但没有成功。请发布您在问题中尝试过的代码，让社区了解您的努力。@DidiTriawan，您是否使用datatable显示数据？注意：不推荐使用成功和错误回调。试着用承诺代替。