Question

我在网址＆＃34; http://jendela.data.kemdikbud.go.id/api/index.php/ccarisanggar/searchGet＆＃34;中有一个网络API，我打算用jquery ajax显示并插入到表中，我一直试图找到一个教程但它很难得到它

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

Answer 2

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

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

Answer 3

如上所述，我相信你使用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>

Answer 4

在您的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将web api中的数据显示到表中

4 个答案: