javascript - jquery 元素与 django 形式

Question

我正在使用用户可以拖放的 jquery 元素。我使用 ajax 将元素的顺序发布到 django。

在 django View 中，我能够处理从 ajax 发布的数据。

Django View :

#this is the view where the jquery elements are being ordered by the user
def inside_exam(request):


    if request.method=='POST':
        form = MyForm(request.POST)
        if form.is_valid():
           #here I am able to retrieve the data from ajax and save it to a django model, code not shown here

           return redirect('exam_results')


#the view redirected to from the inside_exam view
def exam_results(request):

    #here I set the score for the exam and set the context, code not shown here 

    print(“all is set”)
    return render(request, 'quizresults.html', context)

打印(“全部设置”)被执行，我能够在浏览器中打印 quizresults.html 的 html。终端窗口中没有错误，并且显示在终端中:“GET/exam_results/HTTP/1.1”200 8981。

但是仍然显示相同的模板，它没有显示 quizresults.html 模板。知道为什么 render(request, 'quizresults.html', context) 没有按预期工作吗？

顺便说一句:当我使用不带 jquery 的 django 表单时，一切正常，并且显示了 quizresults.html 模板。

由于我想向用户显示另一个模板，但不更新当前模板，在这种情况下，ajax 可能不是发送 jquery 数据的正确方法吗？如果没有，什么是更好的方法？

编辑，ajax代码:

function dataToSend() {
    {% load static %}
     var node2 = document.getElementById('sortable');
     var idsInOrder = $("#sortable").sortable('toArray');
     console.log("the ids");
     console.log(idsInOrder);

     var fd = new FormData();
     for(var i=0; i<idsInOrder.length; i++) {
          j = i+1
          fd.append('a'+j, idsInOrder[i]);
     }

     $.ajax({
       type: 'POST',
       data: fd,
       cache: false,
       processData: false,
       contentType: false
     }).done(function(data) {
       //The data from the quizresults.html template is printed out here, but that template is not shown, the template in the browser is still the insidequiz.html template.
       console.log("the data");
       console.log(data);
     });
 }


 window.onload = function init() {
     function getCookie(name) {
       var cookieValue = null;
       if (document.cookie && document.cookie !== '') {
         var cookies = document.cookie.split(';');
         for (var i = 0; i < cookies.length; i++) {
           var cookie = jQuery.trim(cookies[i]);
           if (cookie.substring(0, name.length + 1) === (name + '=')) {
             cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
             break;
           }
         }
       }
       return cookieValue;
     }

     var csrftoken = getCookie('csrftoken');

     function csrfSafeMethod(method) {
         return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
     }
     $.ajaxSetup({
         beforeSend: function(xhr, settings) {
             if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
                xhr.setRequestHeader("X-CSRFToken", csrftoken);
             }
         }
     });
};

Answer 1

使用 redirect Django 中的快捷方式方法将返回 HttpResponseRedirect对象返回给 AJAX，它将被处理为 302 Found状态代码，然后它将向重定向的资源发出另一个请求并获取内容。这似乎不是正确的方法，即使您获得了内容。

您可以使用方法exam_results做其他工作并返回所需的上下文，它将用于返回 HttpResponse对象使用 render方法。
然后，使用 data你明白了，你可以替换 document使用您收到的模板。

解决方案:

# views

#this is the view where the jquery elements are being ordered by the user
def inside_exam(request):
    if request.method=='POST':
        form = MyForm(request.POST)
        if form.is_valid():
           #here I am able to retrieve the data from ajax and save it to a django model, code not shown here

           context = exam_results(request)

           return render(request, 'quizresults.html', context)


# method to set the score for the exam
# return context from this method
def exam_results(request):

    #here I set the score for the exam and set the context, code not shown here 

    # build context
    return context


 # javascript

     $.ajax({
       type: 'POST',
       data: fd,
       cache: false,
       processData: false,
       contentType: false
     }).done(function(data) {
       //The data from the quizresults.html template is printed out here, but that template is not shown, the template in the browser is still the insidequiz.html template.
       console.log("the data");
       console.log(data);

       // replace the page with the new template
       var newDoc = document.open("text/html", "replace");
       newDoc.write(data);
       newDoc.close();

       // update the url
       window.history.pushState('', 'title', "newurl");
     });

引用:History API MDN