提交表單后，為什么還有另一個發布請求？

Question

我正在使用Django創建一個表單，在該表單中，用戶將來必須輸入電子郵件才能收到通知。 成功提交表單后，我得到了一個帖子調用，刷新了表單所在的頁面：

[07/Dec/2017 01:22:41] "POST /notify-email/add/ HTTP/1.1" 200 21
[07/Dec/2017 01:22:42] "POST / HTTP/1.1" 200 23030

下面是相關代碼：

views.py

def add_notify_email(request):
        if request.method == "POST":
            form = NotifyEmailForm(request.POST)
            if form.is_valid():
                form.save(commit=True)
                return JsonResponse({"status": "success"})
            else:
                return JsonResponse({"status": "error"})
        else:
            form = NotifyEmailForm()
        return render(request, "landing/home.html", {"form": form})

html

<form class="form" onsubmit="addNotifyEmailInHero()" method="POST" id="notify_email_form_in_hero">
        {% csrf_token %}
        <div class="form-group row">
            <div class="col-sm-10 input-group" id="email_input_in_hero">
                <div class="input-group-addon" id="coming_soon_email_icon_in_hero"><i class="fa fa-envelope fa fa-2x" aria-hidden="true" id="email_icon_in_hero"></i></div>
                <input class="form-control" type="email" name="email" onkeypress="if(event.keyCode === 13){addNotifyEmailInHero()}" placeholder="If you want to get notified when we go live, please enter your email...." maxlength="255" required id="id_email"/>
            </div>
            <div class="col-sm-2" id="notify_email_button_in_hero">
                <button type="submit" class="btn btn-block btn-primary" id="submit_notify_email_in_hero"><i class="fa fa-bell nav-icon" aria-hidden="true"></i>Notify Me</button>
            </div>
        </div>
    </form>

    <script src="coming_soon.js"></script>

Coming_soon.js

function addNotifyEmailInHero(e){
        var notifyEmailForm = $("#notify_email_form_in_hero");
        var thanksModal = $("#thanks");

        $.ajax({
        type: 'POST',
        url: '/notify-email/add/',
        data: notifyEmailForm.serialize(),
        success: function(res){
                   alert(res.status);
                   if(res.status === "success") {                
                        thanksModal.modal('show');
                            }

                    else {$("#id_email").val("");
                          $("#id_email").attr("placeholder", "Please Enter A Valid Email Address");
                            }
        }
    })}

我認為正在發生的事情：

當您單擊按鈕或按Enter鍵時，表單將被“提交”，這意味着onsubmit功能將運行。 具體來說，在js腳本中，您將獲得表單和模式，然后有一個ajax post請求，其中包含從表單到/notify-email/add/ 。

基於urls.py ， /notify-email/add/被連接到views.py的add_notify_email功能視圖。 此函數檢查它是否為發布請求，並且表單是否有效，它將數據保存到數據庫並返回json響應；如果表單無效，則它還返回json響應。

如果請求不是發布請求，它將呈現指定的模板。

如果add_notify_email返回一個json響應，該響應將由coming_soon.js的js函數處理。

這就是我對實際情況的理解。

Answer 1

因為您有一個onsubmit處理程序，該處理程序最終會對/ notify-email / add /進行AJAX調用，然后將表單提交給它自己的處理程序，即/，因為您沒有指定處理程序。