Why is there another post request after submitting a form?

Question

I am using Django to create a form where users will have to enter their email to get notified in the future. After successfully submitting the form I get a post call that refreshes the page that the form is in:

[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

Below is the relevant code:

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");
                            }
        }
    })}

What I think is happening:

When you click the button or press enter the form gets "submitted", that means the onsubmit function runs. Specifically, in the js script, you get the form and the modal, then there is an ajax post request with the data from the form to /notify-email/add/ .

Based on the urls.py , /notify-email/add/ is connected to the add_notify_email functional view in views.py . This function checks if it is a post request and if the form is valid it saves the data to the database and returns a json response, if the form is not valid it returns also a json response.

If the request is not a post request it renders the specified template.

If add_notify_email returns a json response that gets handled by the js function in coming_soon.js .

That's my understanding of what really is going on.

Answer 1

因为您有一个onsubmit处理程序，该处理程序最终会对/ notify-email / add /进行AJAX调用，然后将表单提交给它自己的处理程序，即/，因为您没有指定处理程序。