ajax - AJAX 成功的 Django 渲染模板

Question

我正在尝试制作一个基于 Django 的 Web 应用程序，该应用程序接受用户输入并执行繁重的后台任务，大约需要五到十分钟即可完成。当后台任务完成时，很少有参数提供给模板进行渲染。一切正常，然后页面加载。

但是当我尝试为此使用 AJAX 时，由于后台处理繁重，页面加载了这么长时间似乎不太好，我无法弄清楚如何重新加载页面(虽然我是能够在完成时显示警报，但我想重新呈现页面而不是这个)

这是我的 views.py 代码:

def index(request):
    #All Background process code goes here
    return render(request, 'form.html', {'scanResults' : scanResults, 'context_list' : context_list, 'scanSummary' : scanSummary})

这是我的 AJAX 调用

<script type="text/javascript">
$(document).on('submit','#scanForm', function(e){
    e.preventDefault();
    $.ajax({
        type: 'POST',
        url: '/scanner/',
        data: {
            email: $('#email').val(),
            context: $('#context').val(),
            csrfmiddlewaretoken:$('input[name=csrfmiddlewaretoken]').val(),
        },
        success:function(response){
            alert('Scan Completed');
            location.reload();
        }
    });
});

我想不通，我应该在 success 函数中写些什么来重新加载索引函数返回到模板的页面。

我的主要动机是显示一个进度条，告诉后台进程的进度(我还没有实现代码)，一旦进程完成，刷新页面响应。

谢谢

Answer 1

如果你想检查进程的进度你可能需要一个轮询机制作为解决方案。
这需要你有一个模型，它有一个状态来确定你的扫描是否仍在进行中或已经成功。

由于您将重新加载页面以显示结果，因此您应该index View 中返回不同模板或上下文的逻辑用于用户尚未开始扫描和扫描成功的时间。

from django.http import JsonResponse

def index(request):

    if status == 'success':
        # `status` may come from a Model which has a state .
        # If `status` is 'success' this means that your scanning has 
        # finished so you can have a different page or update context_list
        # based on success data.

    # Display input form
    form = scannerForm()

    return render(request, 'form.html', {
        'form': form,
        'context_list' : context_list,
        'scanSummary' : scanSummary
    })

您需要一个 View 来持续检查扫描状态并返回 JSON 响应。

def scanner(request):
    #All Background process code goes here

    form = scannerForm(request.POST)
    status = form.perform_task()
    # During the task, your Model state should also be 
    # updated and return the status whether it is success, pending or failed etc..

    return JsonResponse({
        'status': status,
    })

运行 ajax 轮询以检查 scanner View 。

<script type="text/javascript">

$(document).on('submit','#scanForm', function(e){
  e.preventDefault();
  checkScanStatus();
});

function checkScanStatus () {
  $.ajax({
    type: 'POST',
    url: '/scanner/',
    data: {
      email: $('#email').val(),
      context: $('#context').val(),
      csrfmiddlewaretoken: $('input[name=csrfmiddlewaretoken]').val(),
    },
    success: handleCheckScanStatus,
    error: handleScanError
  });
}


function handleCheckScanStatus (result) {
    if (result.status == 'success') {
      // Reload the page and display the condition you set for 'success' state
      // on the `index` view.
      location.reload();
    } else {
      // Show progress bar indicating that the process running in the background
      const interval = 5000; // Five seconds
      window.setTimeout(checkScanStatus, interval);
    }
}


function handleScanError (response) {
  console.error(response)
}
</script>

我建议查看 django celery用于异步任务和 django-fsm用于转换模型状态。

如果你只是想要一个简单的加载器而不需要检查后台任务的具体状态，你可以使用 jQuery AJAX 的 beforeSend在 AJAX 请求完成之前显示进度条的方法。