如何在 Django 中使用 AJAX 和 JsonResponse 创建新用户？

Question

任务很简单，一个人要能够输入姓名、电子邮件和密码，然后按“提交”并在表单下方显示他的帐户信息，而无需刷新页面。
我不知道我哪里出错了，即使当我检查管理员时我已经设法进入 ajax 成功功能，但我发现没有创建新用户。
无论如何，提前谢谢。另外，也许有人可以提供一些 ajax 相关的教程或一些关于 djangorestframework 的信息。

models.py

class User(models.Model):
  name = models.CharField(max_length=255)
  email = models.EmailField()
  password = models.CharField(max_length=255)

urls.py

from django.conf.urls import url, include
from ajaxtest import views
urlpatterns = [
  url(r'$', views.home, name='home'),
  url(r'user/create/$', views.userCreate, name='create'),
]

views.py

def home(request):
users = User.objects.all()
return render(request, 'ajaxtest/index.html', {'users': users})

def userCreate(request):
  if request.method == 'POST':
    name = request.POST.get('ajaxName', '')
    email = request.POST.get('ajaxEmail', '')
    password = request.POST.get('ajaxPassword', '')

    User.objects.create(
        name = name,
        email = email,
        password = password,
    )
    response_data = {}
    return JsonResponse(response_data)

index.html

{% extends 'ajaxtest/base.html' %} {% load staticfiles %} {% block content %}
<div class="container-fluid">
    <div class="row">
        <div class="col-md-4"></div>
        <div class="col-md-4 text-center bg-info">
            <h3>Form</h3>
        <form id="user_form">
            {% csrf_token %}
            <label for="labelName">Name</label>
            <input type="text" class="form-control" id="inputName" placeholder="Enter name">
            <label for="labelEmail">Email address</label>
            <input type="email" class="form-control" id="inputEmail" placeholder="Enter email">
            <label for="labelPassword">Password</label>
            <input type="password" class="form-control" id="inputPassword" placeholder="Enter password">
            <br>
            <button type="submit" class="btn btn-primary btn-block">Submit</button>
        </form>
        <br>
        <div id="allUsers">
            <ol>
                {% for user in users %}
                <li>{{user.name}} - {{user.email}} - {{user.password}}</li>
                {% endfor %}
            </ol>
        </div>
    </div>
    <div class="col-md-4"></div>
</div>

<script type="text/javascript">
$(document).on('submit', '#user_form', function(event) {
    event.preventDefault();
    $.ajaxSettings.traditional = true;
    $.ajax({
    type: 'POST',
    url: '{% url "create" %}',
    dataType: 'json'
    data: {
        ajaxName: $('#inputName').val(),
        ajaxEmail: $('#inputEmail').val(),
        ajaxPassword: $('#inputPassword').val(),
        csrfmiddlewaretoken: $('input[name=csrfmiddlewaretoken]').val()
    },
    success: function(response) {
        alert($('#inputName').val() +" Account Created!");
    }
    });
})

{% endblock content %}

Answer 1

将主页网址中的“$”更改为“^$”。在 ajax 调用中，在 dataType: 'json' 之后添加逗号。然后这对我有用。让我知道这是否适合您。确保在主 urls 文件中包含您的 ajaxtest url。

urlpatterns = [
    url(r'^', include('ajaxtest.urls')),
]