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/与add_notify_email中的views.py功能视图相关联。此函数检查它是否为post请求，如果表单有效，则将数据保存到数据库并返回json响应，如果表单无效，则返回json响应。

如果请求不是发布请求，则会呈现指定的模板。

如果add_notify_email返回由coming_soon.js中的js函数处理的json响应。

这是我对真实情况的理解。

Answer 1

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

为什么提交表格后还有另一个帖子请求？

1 个答案: