javascript - 在Django 3.2上用ajax返回数据替换html网页

问题描述

我设法使用 ajax 更改我的网页的内容而不更新它，但唯一的问题是我不能用我返回的新内容替换旧内容，当我console.log (data)有新的 html 时，但我不能为用户更改它

用于发送表单的 Ajax：

<script>
$(function() {
    $("#show_type").submit(function(event) {
        // Stop form from submitting normally
        event.preventDefault();
        let friendForm = $(this);
        // Send the data using post
        let posting = $.post( friendForm.attr('action'), friendForm.serialize() );
        // if success:
        posting.done(function(data) {
            console.log(data) <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< new html
            window.alert("success action");
            // success actions, maybe change submit button to 'friend added' or whatever
        });
        // if failure:
        posting.fail(function(data) {
            window.alert("fail action");
            // 4xx or 5xx response, alert user about failure
        });
    });
});
</script>

控制台日志中的 Google chrome 新 html：这是我想在浏览器中显示的 html，但我不知道如何：

<div class="grid-container">
         
         <div class="grid-item" start_at="10 août 2021 12:46" end_at="10 août 2021 17:45">
            <span class="device-title">Dispositif nostart [ID]: C23</span>
            <div class="device-info">
               <span class="left-text-icon map">Lieu: HIDE</span>
               <span class="left-text-icon start">Début: 10 août 2021 12:46</span>
               <span class="left-text-icon end">Fin: 10 août 2021 17:45</span>
               <span class="left-text-icon chief-go">Chef GO: cdcd chieffunc</span>
               <span class="left-text-icon dchief-go">Adjoin-Chef GO: did azda</span>
               <span class="left-text-icon dso">DSO: Souris azd</span>
               <div class="resume">
                   <div class="resume title">Résumé des unités</div>
                   <div class="resume content left-resume-icon hurt">bléssés 0</div>
                   <div class="resume content left-resume-icon arrest">interpellations</div>
                   <div class="resume content left-resume-icon grenade">grenades tirées</div>
                   <div class="resume content left-resume-icon water">litres d’eau tirés</div>
                   <div class="resume content">UUID </div>
               </div>
            </div>
        <form action="/home/delete_device/9/" method="post">
            <input type="hidden" name="csrfmiddlewaretoken" value="HIDE">
            <input type="submit" value="Delete device">
         </form>
      </div>
      
</div>

谢谢你的帮助！

标签： javascriptdjangoajax

javascript - 在Django 3.2上用ajax返回数据替换html网页

问题描述

解决方案

推荐阅读