Question

我有一个下拉列表，我想让用户在停留在同一页面上的同时为其添加新选项。我正在尝试使用模式。流程如下：

用户单击主表单上的按钮，然后弹出一个带有“添加奖励”表单的模式
用户输入数据并提交匹配数据
成功->使用新添加的项目进行模式关闭和下拉更新
失败->模式显示类似于常规表单的表单错误，并允许用户重新提交

edit_goals.html

{% load crispy_forms_tags %}

<form method="post" novalidate>
    {% crispy form %}
</form>

<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-body">
        <form method="post" id="addRewardForm" novalidate 
            data-addreward-url="{% url 'wakemeup:ajax_add_reward' %}" 
            >
            {% crispy addRewardForm %}
        </form>
      </div>
    </div>
  </div>
</div>

<script>
    $("#addRewardForm").submit(function() {
        var url = $("#addRewardForm").attr("data-addreward-url");

        $.post(
            {
                url:url,
                data: {
                    CSRF: getCSRFTokenValue()
                },
                success: function(data, status){
                    alert("Data: " + data + "\nStatus: " + status);
                }
            }
        );

        return false // Ignore original submit button
    });
</script>

views.py

def addreward(request):
    if request.method == 'POST':

        # Create form instance and bind data
        form = RewardForm(request.POST)

        if form.is_valid():

            # Create / save new reward
            myreward = Reward(
                rewardid = form.cleaned_data.get('rewardid'),
                rewardname = form.cleaned_data.get('rewardname'),
            )

            myreward.save()

            # Return nothing
            return HttpResponse('Added Successfully')

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

问题

未调用回调。当您在模式窗体上单击提交时，它将处理新的奖励并将其保存起来。但是，它不是将视图的返回数据存储到data回调的success()变量中，而是仅显示视图的渲染输出并重定向到另一个页面。

我想要的是将呈现的输出捕获到data调用的$.post()变量中，这样我就可以根据需要在模式内显示HTML。

我尝试将$.post()转换为$.ajax()并包含error回调，但是什么也没有。成功回调甚至都不返回简单的alert()。

我正在对GET请求进行类似的处理，并且回调在这里可以正常工作。我在这里想念什么？

Answer 1

在声明form.submit之后，在html文件中，您应该传递

$("#addRewardForm").submit(function(e) // <== Add this (e) {
   e.preventDefault(); // <== Add this

因此，提交表单后，它将在重新加载之前触发结果。

Answer 2

（代表问题作者发布的解决方案）。

事实证明CSRF: getCSRFTokenValue()从未在其他任何地方定义，从而导致JavaScript失败。我用这篇文章中的csrfmiddlewaretoken建议取代了它：

Jquery and Django CSRF Token

jQuery成功/错误回调未触发

问题

2 个答案: