Django 3.2环境下使用AJAX返回的HTML数据替换网页原有内容失败如何解决

解决方案 #

1. 给原页面需要替换的区域添加唯一标识
   在你现有页面中，原本渲染grid-container内容的父容器上，添加唯一的id属性，方便jQuery定位到要更新的区域，示例如下：

<!-- 原页面代码 -->
<div id="device_content_wrapper">
  <!-- 这里原本放你旧的设备列表grid内容 -->
</div>

2. 修改AJAX请求成功后的回调逻辑
   在posting.done的回调函数中，新增代码将返回的HTML内容写入刚才标识的容器内，修改后的完整AJAX代码如下：

<script>
$(function() {
    $("#show_type").submit(function(event) {
        event.preventDefault();
        let friendForm = $(this);
        let posting = $.post( friendForm.attr('action'), friendForm.serialize() );
        posting.done(function(data) {
            console.log(data);
            // 新增内容替换逻辑
            $('#device_content_wrapper').html(data);
            window.alert("success action");
        });
        posting.fail(function(data) {
            window.alert("fail action");
        });
    });
});
</script>

注意事项 #

• 确保你设置的容器id在整个页面中唯一，避免定位错误
• 如果替换内容后，新HTML里的表单、按钮等交互元素的事件不生效，需要改用事件委托的方式绑定事件，不要直接绑定在元素本身，示例如下：

// 以删除设备表单为例，绑定到document或外层固定容器上，新增的元素也能触发事件
$(document).on('submit', 'form[action*="delete_device"]', function(e) {
  e.preventDefault();
  // 这里写你的删除提交逻辑
});

内容的提问来源于stack exchange，提问作者gabriel