我正在尝试使用 AJAX 将已呈现的 Django 模板注入我的页面的一部分

Posted 2023-02-23

【中文标题】我正在尝试使用 AJAX 将已呈现的 Django 模板注入我的页面的一部分

【英文标题】：I am trying to inject an already rendered Django template into a section of my page using AJAX

【发布时间】：2021-04-02 05:43:55

【问题描述】：

我正在关注this 教程，了解如何在不刷新页面的情况下在 django 上获取实时更新。 本教程使用烧瓶render_template 来获取呈现的 html，然后将其注入到页面部分。 我正在尝试在 Django 中做同样的事情，但是 django 只是直接在浏览器中呈现它......我不想要那个。我只想让 django 将呈现的 html 响应发送到 AJAX，然后它可以将其注入到我的实时页面上的一个部分。 这是代码：

views.py

class ManageView(LoginRequiredMixin, View):
template_name = "dashboard/manage.html"
context = 

def get(self, request, app_id, folder_id=None):
    app = App.objects.get(pk=int(app_id))
    self.context["app"] = app
    if folder_id:
        try:
            self.context["folder"] = Folder.objects.get(id=folder_id)
        except:
            self.context["folder"] = app.folder
    else:
        self.context["folder"] = app.folder
    return render(request, self.template_name, self.context)

def post(self, request, app_id, folder_id=None):
    try:
        files = request.FILES.getlist('files_to_upload')
        folder_name = request.POST.get("folder")
        master = request.POST.get("master")
        if master:
            master = Folder.objects.get(id=master)
        if folder_name:
            Folder.objects.create(name=folder_name, owner=request.user.customer, folder=master)
        if files:
            for file in files:
                if file.size < settings.MAX_FILE_SIZE:
                    File.objects.create(folder=master, item=file, name=file.name, size=file.size)
        app = App.objects.get(pk=int(app_id))
        self.context["app"] = app
        if folder_id:
            try:
                self.context["folder"] = Folder.objects.get(id=folder_id)
            except:
                self.context["folder"] = app.folder
        else:
            self.context["folder"] = app.folder
        return render(request, 'dashboard/filesection.html', self.context)
    except DatabaseError:
        return render(request, "dashboard/index.html", self.context)

urls.py

urlpatterns = [    url(r'^manage/(?P<app_id>[0-9]+)/(?P<folder_id>.+)', test, name='browse'), ]

dashboard/manage.html

       <div class="modal-body">
            <form id="app-launch" enctype="multipart/form-data" method="post">
                % csrf_token %
              <div class="form-row">
                <div class="input-group mb-3">
                  <div class="custom-file">
                    <input type="hidden" value=" folder.id " name="master">
                    <input type="hidden" value=" app.id " name="file_app_id">
                    <input type="file" class="custom-file-input" name="files_to_upload" id="file_upload" accept=".py,.js,.json,.txt,.css,.html,.pdf,.htm,.doc,.docx,.log,.ppt,.pptx" multiple>
                    <label class="custom-file-label" for="inputGroupFile02">Choose file</label>
                  </div>
                  <div class="input-group-append">
                    <button class="input-group-text btn btn-primary" id="">Upload</button>
                    <button class="input-group-text btn btn-primary fileButton" id="">Upload</button>
                  </div>
                </div>
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-outline-danger" data-dismiss="modal">Cancel</button>
          </div>
        </div>

app.js AJAX 调用

$(document).ready(function() 

    $(document).on('click','fileButton', function(e) 
        e.preventDefault()

    // const axios = require('axios');

    var formData = new FormData();
    var ins = document.getElementById('file_upload').files.length;
    for (var x = 0; x < ins; x++) 
    formData.append("files_to_upload", document.getElementById('file_upload').files[x]);

    const csrftoken = getCookie('csrftoken');
    var app_id = $('input[name="file_app_id"]').val();
    var folder_id = $('input[name="master"]').val();
    formData.append('master', folder_id);

    req = $.ajax(
        type: 'POST',
        url: `/manage/$app_id/$folder_id`,
        data: formData,
        processData: false,
        contentType: false,
        headers: 
            "X-CSRFToken": csrftoken,
        
    );
    req.done(function (data) 
        $('#refreshSection').html(data)
    )
);
);

AJAX POST 并且一切正常，只是 django 正在刷新并在我不想要的浏览器上呈现该部分模板。

【参考方案1】：

[已解决]

这是我的错误。我错过了e.preventDefault() 这真的很愚蠢。