2

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

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

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

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

表格.py

from django.db import forms

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

视图.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})

网址.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>
4

1 回答 1

7

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

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

$.post('/ajaxtest/', serializedData, function(response) {
   alert(response);
});
于 2012-11-16T14:21:23.470 回答