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

Posted 2023-05-09

【中文标题】如何将 json 从 php 附加到列表视图？

【英文标题】：How to append json from php to a listview?

【发布时间】：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");
        ) 
    ) 
);  

【参考方案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 调用不起作用，也许你应该调查你的后端。