Question

我正在使用ajax请求将新消息发布到数据库。页面自动加载数据库onload中的元素。我想删除这些元素并在用户发帖时重新添加它们，以便将当前最多的帖子添加到列表顶部并且不起作用。我不知道为什么。没有控制台错误，但它不会删除它们。

onload ajax call

                            $.ajax({
                            url : "/getposts/", 
                            type : "POST",
                            dataType: "json", 
                            data : {
                                csrfmiddlewaretoken: '{{ csrf_token }}',
                                },
                                success : function(json) {
                                    document.getElementById('output').innerHTML = (json['message']);
                                    for (var index = 0; index < json['user_posts'].length; index++) { 
                                        var div_make_badassness = document.createElement('div');
                                        div_make_badassness.id = json['user_posts'][index][3];
                                        document.getElementById('post_section').appendChild(div_make_badassness);
                                        document.getElementById(json['user_posts'][index][3]).innerHTML = "<div id=" + json['user_posts'][index][3] + ">" + "Title:" + json['user_posts'][index][1] + "<br>" + json['user_posts'][index][0] + " Chomps: " + json['user_posts'][index][2] + "</div>" ;
                                    }

                                },
                                error : function(xhr,errmsg,err) {
                                    console.log(xhr.status + ": " + xhr.responseText);
                                    document.getElementById('output').innerHTML = "Request Failed.";
                                }

                        });

提交ajax电话

                        $.ajax({
                            url : "/makepost/", 
                            type : "POST",
                            dataType: "json", 
                            data : {
                                csrfmiddlewaretoken: '{{ csrf_token }}',
                                username: username,
                                post_title: post_title,
                                post_text: post_text,
                                },
                                success : function(json) {
                                    document.getElementById('output').innerHTML = (json['message']);

                                     var post_section = document.getElementById("post_section");

                                     for (var index = 0; index < post_section.length; index++) {
                                        post_section.removeChild(post_section.childNodes[index]);
                                     }

div tag

 <div id ='post_section'>

 </div>
                                    for (var index = 0; index < json['user_posts'].length; index++) { 

                                        console.log(json['user_posts'][index][3] + json['user_posts'][index][1] + json['user_posts'][index][2]);
                                        var div_make_badassness = document.createElement('div');
                                        div_make_badassness.id = json['user_posts'][index][3];
                                        document.getElementById('post_section').appendChild(div_make_badassness);
                                        document.getElementById(json['user_posts'][index][3]).innerHTML = "<div id=" + json['user_posts'][index][3] + ">" + "Title:" + json['user_posts'][index][1] + "<br>" + json['user_posts'][index][0] + " Chomps: " + json['user_posts'][index][2] + "</div>" ;
                                    }

Answer 1

因为你正在使用jQuery，我只会在jQuery中使用它。

// Will remove any html in "post_section" and add in the new posts
function updatePostSection(user_posts) {
  var post_section = $('#post_section');
  post_section.html(''); // Remove all html contents inside

  for(var i = 0; i < user_posts.length; i++) {
    var div = $('<div>');
    div.attr('id', user_posts[i][3]);
    div.html("Title:" + user_posts[i][1]);
    post_section.append(div);
  }
}

在成功的ajax功能中你可以做类似......

// ...
success : function(json) {
  updatePostSection(json['user_posts']);
},
// ...

然后，您应该可以将它用于getposts和makepost ajax调用，假设json是相同的结构。

更新：有一些方法可以优化这个，所以你只需要写一次dom，但这只是一个例子。

Ajax删除所有子元素并读取更新的值

1 个答案: