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

Ajax removing all childelemets and readding the updated values

本文关键字：更新 读取 元素 删除 Ajax      更新时间：2023-09-26

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

加载ajax调用

                            $.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标签

 <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>" ;
                                    }

因为您使用的是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']);
},
// ...

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

更新：有一些方法可以优化这一点，所以您只向dom写入一次，但这只是一个例子。

相关文章：