Django 表单未使用 Javascript 提交

Posted 2023-02-24

【中文标题】Django 表单未使用 Javascript 提交

【英文标题】：Django form not submitting using Javascript

【发布时间】：2017-05-13 19:44:22

【问题描述】：

我在尝试使用 Jquery-Ajax 提交的页面之一上有一个 Django 表单。

以下是我的代码：

我使用 Jinja 模板在页面上呈现表单。

 <form action='' method='post' name='ContactForm' id='ContactForm'> 
                        % csrf_token %
                            % for field in form %
                                <div class="input-group"> <span class="input-group-addon">@</span>
                                    field 
                                </div>
                            % endfor %
                            <div class="input-group form-buttons"> <span class="input-group-btn">
                                <button class="btn btn-default" type='submit' value='Submit' name='submitf' id="submitf">SAY HELLO</button>
                                </span> 
                            </div>
                            <div id='message_post'></div>
 </form>
 <script type="text/javascript" src="% static 'personal/js/contact/contact-form.js' %"></script> 

contact-form.js

$(function()
$("#ContactForm").submit(function()
    $("#submitf").value='Please wait...';
    alert("Control reached the script.");
    $.post("/contact/add/", $("#ContactForm").serialize(),
    function(data) 
        alert("Alert entered function.");
        if(data.status == 'error') 
                $("#message_post").html("<div class='errorMessage'>ERROR: " + data.msg + "!</div>"); 
                document.ContactForm.submitf.value='Resend >>';
                document.ContactForm.submitf.disabled=false;
         else 
            $("#message_post").html("<div class='successMessage'>Hi! Glad to meet you. I'll definitely contact you shortly.</div>"); 
            $("#submitf").value='Send >>';
            
    , "json");
    return false;   
);
);

urls.py

from django.conf.urls import url, include
from . import views

urlpatterns = [
    url(r'^$', views.index, name='index'),
    url(r'^contact/add/$', views.add, name='add')
]

views.py

def add(request):
    if request.method=='POST' and request.is_ajax():
        form=ContactForm(request.POST)
        if form.is_valid():
            try:
                form.save()

            except Exception as e:
                print ('%s' % str(e))
                msg = 'That\'s embarrassing. Will you please Say Hello again?'
                status = "Error"

            else:
                msg = 'Connected'
                status = "Success"

        print('status %s' % status)
        request.write('message':msg, 'status':status)

但是每次我点击提交按钮时都会出现以下错误：

POST /contact/add/ HTTP/1.1" 404 2043

我打算在单击按钮时将表单中的数据插入到数据库中。

参考了以下链接和 SO 问题，但无法解决问题：

How to POST a django form with AJAX & jQuery

Django Project Docs

submitting a django form using javascript

目前处于 Python 和 Django 的学习阶段。非常感谢任何帮助。

【问题讨论】：

如果您想检查 API 端点，可以尝试使用 Postman，以确保错误不是服务器端的

@Randy Postman 可能用于电子邮件服务和 AWS，我在简单的应用程序中都没有使用它们。我在解释你的建议时可能是错误的。如果你能详细解释一下。

实际上，Postman 是一个非常简单的解决方案，可以使用相关数据对任何 API 进行任何调用（POST、GET 等）。这样你可以确保错误在请求中或在后端，这样你就知道从哪里开始调试

【参考方案1】：

你能提供视图来检查一下吗？

不过，请查看有关使用 CSRF 和 ajax 的文档：https://docs.djangoproject.com/en/1.10/ref/csrf/

您之前可能需要添加一些 AJAX 设置。我提供给你一个可以帮助你的小要点：https://gist.github.com/silviomoreto/485b6a294b40f06011946d8be09c6e1f

【讨论】：

我在问题中提供了我的 views.py 中的相关功能。