javascript - Ajax can only add and display data obtained immediately through append()

Question

function longPolling() {
        $.ajax({
            url:'data.json',
            type:'POST',
            dataType: "json",            
            success:function(data){
                if (data){
                    var date_len = data.length;
                    for (var i=0;i<date_len;i++){
                        var dom = '<li><p id="'+i+'"><p class="num">'+data[i].Num+'</p><p class="a">'+data[i].Time+'<p class="C">'+data[i].Description+'</p></p></p></li>';
                        var tag = '#'+i;
                        console.log(!$(tag).length);
                        if(!$(tag).length){
                            $('.tb-con ul').append(dom);
                        }
                    }
                }
            }
        });
    }
    
window.setInterval('longPolling()',1000);   

Adding data to json can be displayed immediately, but it cannot be updated immediately after deletion.

Answer 1

Wouldn’t it be better if you clear the content in ul before requesting? Wouldn’t it be the latest one every time?
$('.tb-con ul').html("")

Answer 2

First of all, it’s timely. You made a typo.
ajax is used to request background data. append is to dynamically recover the requested data back to the page.
Generally, when deleting, you also request the background first and ask the background if it can be done. Delete, it reminds you that it cannot be deleted. If you can delete it, delete it directly. Then just delete the dom on the page.

Answer 3

ajax is only available when requesting data asynchronously. The data format defaults to json string during transmission. Ajax is used directly between the server and the client. It is not used to fetch json data. You can use JSON.parse to convert it locally. It should No need to be so complicated as ajax