表单提交后弹出窗口Django

Question

如何在有人提交表单后弹出一个弹出框？例如，在提交表单后，我希望出现一个弹出框，显示“Successfully submitted”。我现在的观点是，它只是重定向到一个页面，上面写着“成功提交”。而不是这个，我希望弹出窗口与窗体在背景中出现。在

def addDog(request):
  if request.method == "POST":
    form = DogForm(request.POST)
    if form.is_valid():
      post = form.save(commit=False)
      post.save()
      return HttpResponse("Successfully submitted")
    else:
      print("Unable to save. Form is not valid")
      print(form.errors)
  else:
    form = DogForm()
  return render(request, "app/addDog.html", {"form":form})

Answer 1

您需要在模板中的表单提交事件中添加Javascript

<form method="post" id="DogForm">
    {% csrf_token %}
    <table>
      {{ form.as_table }}     

    </table>
    <button type="submit">Save</button>

  </form>
<script>
$("#DogForm").on('submit', function(event) {
      alert("New Dog Added");
</script>

Answer 2

您需要在JavaScript中实现这一点。在较高的层次上，对您曾经使用过的同一端点发出AJAX POST请求。成功后，使用window.alert("Successfully submitted!")。在

如果这是您的JS在您的站点上的范围，那么jQuery有点过头了，但是最简单的方法是使用jQuery给出一个示例：

$("#submit-button").on("click", function() {
    $.post("http://some/endpoint/here", $("#my-form").serialize())
        .done(function() { window.alert("Successfully submitted!"); })
        .fail(function() { window.alert("Submission failed!"); });
});

其中使用的函数是：$.post$().on和$().serialize。在

这可以在普通JavaScript中实现而不会有太多问题，但是它更详细，所以我不打算在这个例子中这样做。在