如何将php中的json附加到listview？

我从一个php页面加载了一个json函数，并将其附加到一个UL，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");
        }) 
    }) 
});  

$（document）.on（'pageinit'，'two'，函数（）{
变量url=”http://localhost/budget/items_list.php";
$.getJSON（url、函数（结果）{
控制台日志（结果）；
$.each（结果、函数（i、字段）{
var budgeted_id=field.budgeted_id；
var name=field.name；
var预算金额=field.budget\u amount；
var交易金额=field.trans\u amount；
var余额=field.balance；
$（“#listview”）.append（“
”）.listview（“刷新”）；
});
}); 
$（document）.on（“click”，'.del'，function（）{
$（“#listview”）.empty（）；
预算的_id=（this.id）；
$.post（'delete_item.php'，{postprodgeted_id:budgeted_id}）；
变量url=”http://localhost/budget/items_list.php";
$.getJSON（url、函数（结果）{
控制台日志（结果）；
$.each（结果、函数（i、字段）{
var budgeted_id=field.budgeted_id；
var name=field.name；
var预算金额=field.budget\u amount；
var交易金额=field.trans\u amount；
var余额=field.balance；
$（“#listview”）.append（“
”）.listview（“刷新”）；
}) 
}) 
});  

IMHO，重复使用相同的功能不是一个坏主意，您将确保始终获得服务器端的实际数据

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

下面是一个如何做到这一点的示例，改编自：

函数createList（结果）{
$.each（结果、函数（i、字段）{
var budgeted_id=field.budgeted_id；
var name=field.name；
var预算金额=field.budget\u amount；
var交易金额=field.trans\u amount；
var余额=field.balance；
$（“#listview”）.empty（）.append（'
）.listview（“刷新”）；
});
}
函数getListData（）{
$.ajax({
url:“http://localhost/budget/items_list.php",
方法：“获取”，
数据类型：“json”，
成功：功能（结果）{
创建列表（结果）；
}
});
}
$（document）.on（“pageinit”，“#two”，函数（）{
getListData（）；
}); 
$（document）.on（“click”，“.del”，function（）{
var预算_id=（this.id）；
var请求=$.ajax({
url:“delete_item.php”
方法：“张贴”，
数据：{postbudgeted_id:budgeted_id}
});
var chained=request.then（函数（）{
getListData（）；
});
});

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

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

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();
  });
});