如何將json從php附加到列表視圖？

Question

我從一個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"); 
     }) 
    }) 
}); 

Answer 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調用不起作用，也許你應該調查你的後端。