如何将 json 从 php 附加到列表视图？答案

【问题标题】：How to append json from php to a listview?如何将 json 从 php 附加到列表视图？
【发布时间】：2017-12-10 19:44:57
【问题描述】：

我从一个 php 页面加载了一个 json 函数并将它附加到一个 UL，它创建了一个列表。当我删除一行时，我重用相同的函数来重新附加列表；它可以工作，但有时我必须单击两次才能删除选定的行。

有没有办法简化这个过程，因为我是 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");
        }) 
    }) 
});

【问题讨论】：

标签： php jquery mysql json jquery-mobile

【解决方案1】：

恕我直言，重复使用相同的功能并不是一个坏主意，您一定会始终获得服务器端的实际数据。

根据您对问题的描述，我相信您只需要链接两个 ajax 调用即可。

这里有一个如何做到这一点的例子，从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 错误，您的列表将保持不变，由您自行捕获这些错误并在您的网页中显示烤面包机通知。

如果链接 ajax 调用不起作用，也许你应该调查你的后端。

【讨论】：