使用Flask开发时Ajax表单提交后响应追加而非替换如何解决

问题根因 #

• 变量未重置：每次请求触发的回调中没有把html变量重置为空字符串，之前拼接的旧内容会一直累积在该变量中，即使使用替换逻辑也会携带旧内容
• replaceWith用法错误：该方法会直接把选中的.show-data元素本身替换为传入的HTML内容，第一次执行完成后页面中就不存在类为show-data的节点了，后续所有操作找不到目标元素自然无法生效
• 附加细节问题：代码拼接p标签时尾标签写错，应该是</p>而非<p>，会导致DOM结构渲染异常

修复方案 #

将对应代码段修改为以下内容即可：

response = response.result;
// 每次重置html变量，避免旧内容累积
let html = '';
$.each(response,function(key,val){
    console.log(val);
    // 修正p标签闭合写法
    html += "<p>"+val+"</p>"
});
html += "<br>";
// 使用html()方法仅替换元素内部内容，保留.show-data节点本身
$(".show-data").html(html);

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