我的 Django 和 jQuery AJAX 表单提交设置有什么问题？答案

【问题标题】：What is wrong in my Django & jQuery AJAX form submission setup?我的 Django 和 jQuery AJAX 表单提交设置有什么问题？
【发布时间】：2012-11-16 14:05:04
【问题描述】：

我知道，您已经阅读过这样的问题一千次甚至更多次，我也阅读过这些问题及其答案，但我根本无法让我的 AJAX 表单在客户端使用 jQuery 和 Django 正常工作在服务器端。此外，我无法为像我这样的 Python 人和 JavaScript 新手找到一个愚蠢的简单分步教程，该教程易于理解且详细到足以让我获得急切等待的惊喜时刻。

我在 HTML 页面上有一个表单，当单击提交按钮时，应该使用 JavaScript 的 alert() 函数简单地提醒相应的 HttpResponse，但它不起作用。当我提交表单时，我在 Django 的开发服务器控制台中找到以下条目：

"POST /ajaxtest/%5Bobject%20Object%5D HTTP/1.1" 404 2381

请告诉我我的代码有什么问题。非常感谢您！

forms.py

from django.db import forms

class AjaxTestForm(forms.Form):
    first_name = forms.CharField()
    last_name = forms.CharField()

views.py

from django.http import HttpResponse
from django.shortcuts import render
from my_app.forms import AjaxTestForm

def ajax_test(request):
    if request.is_ajax() and request.method == 'POST':
        form = AjaxTestForm(request.POST)
        if form.is_valid():
            print request.POST
            # I want this to be alerted
            return HttpResponse('Your AJAX form test was successful!')
        else:
            return HttpResponse('Your AJAX form test failed miserably!')
    else:
        form = AjaxTestForm()

    return render(request, 'ajaxtest.html', {'form': form})

urls.py

from django.conf.urls import patterns, url
from my_app.views import ajax_test

urlpatterns = patterns('',
    url(r'^ajaxtest/$', ajax_test, name='ajax-test-page')
)

ajaxtest.html

<!DOCTYPE html>
<html>
<head>
    <script src="{{ STATIC_URL }}js/jquery-1.8.2.min.js"></script>

    <script>

        $(document).ready(function() {

            $('#ajaxform').submit(function(event) {

                var $form = $(this);
                var serializedData = $form.serialize();

                $.post({
                    url: '/ajaxtest/',
                    data: serializedData,
                    success: function(response) {
                        alert(response);
                    }
                });

                event.preventDefault();

            });
        });

    </script>
</head>

<body>
    <form id="ajaxform" method="post" accept-charset="UTF-8" action="">{% csrf_token %}

        <fieldset>
            {% for field in form %}
                <label for="{{ field.label }}">{{ field.label }}</label>
                <input id="{{ field.label }}" type="text" name="{{ field.html_name }}" />
            {% endfor %}

            <button type="submit">Submit</button>
        </fieldset>

    </form>
</body>
</html>

【问题讨论】：

标签： javascript jquery python ajax django

【解决方案1】：

线索在控制台中：它显示它正在将[object Object] 附加到它要发布到的 URL 中。我怀疑这是您传递给 $.post 函数的整个对象的表示。

这是因为与 $.ajax 函数不同，$.post 不接受对象，它接受单独的参数。所以你的代码应该是：

$.post('/ajaxtest/', serializedData, function(response) {
   alert(response);
});

【讨论】：

天哪……我很确定这一定是一些愚蠢的错误，但我没想到会这么愚蠢。当您还不习惯 JavaScript 语法时，就会发生类似的事情。你拯救了我的一天。非常感谢！ :)