如何将json从php附加到列表视图? [英] How to append json from php to a listview?

问题描述

我从php页面加载了json函数，并将其附加到创建列表的UL上.删除行时，我重复使用相同的功能重新添加列表；它可以正常工作，但是有时我必须单击两次，才能删除选定的行.

I loaded a json fuction from a php page and I append it to an UL, Which creates a list.When I delete a row, I reuse the same function to re-append the list; it works, but sometime I have to click twice before it removes theselected row.

有没有一种方法可以简化此过程，因为我是jquery新手?

Is there a way to simplify this process as i am new to jquery?

$(document).on('pageinit', '#two', function () {
    var url="http://localhost/budget/items_list.php";
    $.getJSON(url,function(result){
    console.log(result);
    $.each(result, function(i, field){
        var budgeted_id=field.budgeted_id;
        var name=field.name;
        var budget_amount=field.budget_amount;
        var trans_amount=field.trans_amount;
        var balance=field.balance;
        $("#listview").append('<li  data-icon="delete"><a href="#">'+name+'<span class="ui-li-count">Bal: $'+balance+'</span></a><a class="del" id="'+budgeted_id+'" href="#"></a></li>').listview("refresh");
    });
}); 

$(document).on("click",'.del',function(){ 
    $("#listview").empty();      
    budgeted_id = (this.id);
    $.post('delete_item.php',{postbudgeted_id:budgeted_id});
    var url="http://localhost/budget/items_list.php";
    $.getJSON(url,function(result){
        console.log(result);
        $.each(result, function(i, field){
           var budgeted_id=field.budgeted_id;
           var name=field.name;
           var budget_amount=field.budget_amount;
           var trans_amount=field.trans_amount;
           var balance=field.balance;
           $("#listview").append('<li data-icon="delete"><a href="#">'+name+'<span class="ui-li-count">Bal: $'+balance+'</span></a><a class="del" id="'+budgeted_id+'" href="#"></a></li>').listview("refresh");
        }) 
    }) 
});  

推荐答案

恕我直言，重用相同的功能不是一个坏主意，您将确保始终获得服务器端的实际数据.

IMHO, it isn't a bad idea to reuse the same function, you will be sure to get always the actual data you have on server-side.

从对问题的描述来看，我相信您只需要链接两个ajax调用即可.

From your description of the issue, I believe you just only need to chain the two ajax calls.

下面是一个示例，该示例是从 jQuery文档即时修改而来的:

Here an example how to do that, adapted on the fly from jQuery documentation:

function createList(result){
  $.each(result, function(i, field){
    var budgeted_id=field.budgeted_id;
    var name=field.name;
    var budget_amount=field.budget_amount;
    var trans_amount=field.trans_amount;
    var balance=field.balance;
    $("#listview").empty().append('<li  data-icon="delete"><a href="#">'+name+'<span class="ui-li-count">Bal: $'+balance+'</span></a><a class="del" id="'+budgeted_id+'" href="#"></a></li>').listview("refresh");
  });
}

function getListData(){
  $.ajax({
    url: "http://localhost/budget/items_list.php",
    method: "GET",
    dataType: "json",
    success: function (result) {
      createList(result);
    }
  });
}

$(document).on("pageinit", "#two", function () {
  getListData();
}); 

$(document).on("click", ".del",function(){  
  var budgeted_id = (this.id);
  var request = $.ajax({
    url: "delete_item.php"
    method: "POST",
    data: {postbudgeted_id:budgeted_id}
  });
  var chained = request.then(function() {
    getListData();
  });
});

请注意，这未经测试，但是您明白了.如果出现Ajax错误，您的列表将保持不变，由您自己来捕获这些错误并在网页上显示烤面包机通知.

Please, note this is untested, but you got the idea. If there is an ajax error, your list will remain untouched, up to you to trap these errors and display in your web page a toaster notification.

如果链接ajax调用不起作用，也许您应该调查后端.

If chaining the ajax calls won't work, maybe you should investigate your backend.

这篇关于如何将json从php附加到列表视图?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！