如何在 jquery 自动保存中使用 django 视图？

Question

我有一个很长的表单集显示在页面上。它目前是这样保存的：

if request.method == 'POST':

    survey_formset = SurveyFormset(request.POST)

    if survey_formset.is_valid():
        ss = SurveySet()
        ss.user=request.user
        ss.save()
        for form in survey_formset.forms:
            saved = form.save(commit=False)
            saved.surveyset = ss
            saved.save()
        return HttpResponseRedirect('/')

我怎样才能让整个调查集在每次用户填写另一个输入时保存在后台？

到目前为止，这就是我迄今为止所拥有的。如何使用回调通过 AJAX 向服务器发送内容？

    <form action="" method="POST" id="surveyset">{% csrf_token %}
        {{ survey_formset.management_form|crispy }}

        <!--  A lot of inputs!  -->

          {% for form in survey_formset.forms %}
              <hr>
              <div id="survey-{{ forloop.counter }}" class='content'>
                {% crispy form %}
              </div>
          {% endfor %}

        <input id='save_set' type="submit" value="Submit" class='button' />
    </form>

<!-- Time to autosave! -->

<script type="text/javascript" src="{% static "js/jquery.autosave.js" %}"></script>
<script> 
    $(document).ready( function() {

      $("form").autosave({
        callbacks: {
          trigger: ["change", function() {
            var self = this;

            $("#save_set").click(function() {
              self.save();
            });

          }],
          save: {
            method: "ajax",

            // What do I tell the django view? 
            // How do I silently save in the background?

            options: {
              success: function() {
                console.log("saved!");
              }
            }
          }
        }
      });

    }); 
</script>

我正在使用这个家伙的代码：

https://github.com/nervetattoo/jquery-autosave

Answer 1

Django 在其HttpRequest 对象上提供了一个方便的is_ajax 方法，该方法告诉您是否设置了HTTP_X_REQUESTED_WITH 标头。由于自动保存插件使用jQuery.ajax()，默认会发送。

只要确保你：

• Set the correct CSRF token in JavaScript

或：

• 在您的视图上使用csrf_exempt 装饰器。 （通常不建议这样做，应谨慎使用。）

您可以在您的视图中使用它来创建将适当处理 AJAX 请求的一部分：

if request.is_ajax():
    # TODO: Handle autosave plugin save requests
    pass
 else:
    # this is where the normal stuff you already have happens
    ...

使用自动保存插件，save callback 采用与 jQuery 的 AJAX 方法相同的选项。典型的设置如下所示：

{ url: "http://yourdomain.com/your-view",
  data: {"key_for_server1": var1, "key_for_server2": var2},
  success: function() { 
            // pop up a nice green 'Saved!' message 
  },
  error: function() { 
            // alert "Oh, no! It didn't work!" 
  }
}

您可以在我上面链接的文档中详细设置大量选项，并且自动保存插件会直接传递它们，因此您可以告诉它所有相同的事情。

上面的主要是要发送数据的url（您可以查看urls.py 中的内容），data 这是您将发送的实际POST 数据（稍后在@ 987654334@ dict)，以及 success、complete 和 error 回调，它们是处理这些相应条件的函数。

注意，它会根据服务器响应的 HTTP 状态码来判断是成功还是失败。所以，例如，如果你 raise Http404（不要——只是一个例子）它会调用 error，但如果你返回一个普通的 HttpResponse（通常是 JSON）它会调用 success。