单击按钮时未发送 Django Post 请求答案

【问题标题】：Django Post request not sent on button click单击按钮时未发送 Django Post 请求
【发布时间】：2019-04-12 02:44:46
【问题描述】：

我正在尝试在 Django 中创建一个简单的 Web 应用程序并尝试使用 Ajax，因此页面不会刷新。这个应用程序的唯一目标是让表单接受一些用户输入，并且在提交表单时不会刷新。但是，由于某种原因，当我单击按钮时不会发生这种情况。这是索引页面：

<!DOCTYPE html>
<html>
<body>
<h2>Create product here</h2>
<div>
<form id="new_user_form">
  <div>
  <label for="name" > Name:<br></label>
  <input type="text" id="name"/>
  </div>
  <br/>
  <div>
  <label for="email"> email:<br></label>
  <input type="text" id="email"/>
  </div>
  <div>
  <label for="password" > password:<br></label>
  <input type="text" id="password"/>
  </div>
  <div>
    <input type="submit" value="submitme"/>
  </div>
</form>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type = "text/text/javascript">
  $(document).on('submitme', '#new_user_form', function(e)){
    e.preventDefault()
    $.ajax({
      type: 'POST',
      url:'/user/create',
      data:{
        name:$('#name').val(),
        email:$('#email').val(),
        password:$('#password').val(),
      }
      success.function(){
        alert('created')
      }
    })
  }
</script>
</html>

这是我的主要 urls.py 文件：

from django.contrib import admin
from django.urls import path
from django.conf.urls import include, url
from testapp import views
import testapp
from django.views.decorators.csrf import csrf_exempt

urlpatterns = [
    path('admin/', admin.site.urls),
    url(r'^$', testapp.views.index),
    url(r'^user/create/$', csrf_exempt(testapp.views.create_user))
]

我的views.py文件：

from django.shortcuts import render
from testapp.models import User
from django.http import HttpResponse

# Create your views here.
def index(request):
    return render(request, 'index.html')

def create_user(request):
    if request.method == 'POST':
        name = request.POST['name']
        email = request.POST['email']
        password = request.POST['password']

        User.objects.create(
            name = name,
            email = email,
            password = password
        )

        return HttpResponse('')

最后是 models.py 文件：

from django.db import models

# Create your models here.
class User(models.Model):
    name = models.CharField(max_length = 32)
    email = models.EmailField()
    password = models.CharField(max_length = 128)

这样做的目的是当单击按钮时，它应该向后端发送一个 POST 请求，该请求创建一个 User 类型的对象并将其保存到数据库中。但是，由于某种原因，当我单击提交时，根据 Chrome 上的网络工具，没有发送任何 POST 请求。有人可以帮我吗？

【问题讨论】：

$(document).on('submitme', '#new_user_form', function(e)){- 这看起来不对，第一个参数肯定应该是'click'？
您好尝试过这个：$('#submit').click(function()) 而不是以前的标头，但它没有任何区别，也没有发送 POST 请求
只有在您提供提交按钮id="submit"时才有效
是的，但仍然没有发送帖子请求。

标签： python jquery django post web-applications

【解决方案1】：

def create_user(request):
    if request.method == 'POST':
        form = SignUpForm(request.POST)
        if form.is_valid():
            form.save()
            username = form.cleaned_data.get('username')
            raw_password = form.cleaned_data.get('password')
            user = authenticate(username=username, password=raw_password)
            auth_login(request, user)
            return render(request, 'accounts/index.html')
    else:
        form = SignUpForm()
    return render(request, 'accounts/signup.html', {'form': form})

您的代码应该看起来更像这样。在这里，我使用默认的 django 身份验证系统，因此不需要您的model.py，至少现在不需要。另请查看我添加的渲染 - 使用 HttpReponse 您的页面将重新加载。电子邮件会自动保存为form.submit()

SignUpForm 应该很简单：

class SignUpForm(UserCreationForm):
    email = forms.EmailField(max_length=254, help_text='Required.')

【讨论】：

刚刚试过这个解决方案，仍然没有从提交按钮发送POST请求。我也不明白你不需要 Models.py 是什么意思 - 如果没有数据库，数据将保存在哪里？
docs.djangoproject.com/en/2.1/topics/auth/default 看看 django 文档，我认为它会更清楚它在 Django 世界中的工作原理
另外，models.py 与数据库不同。这就像解释数据库中表的列应该是什么。
Models.py 在运行迁移命令时在数据库中创建表是我的理解。但是，我的主要问题是单击按钮时没有发送 Post 命令，并且没有明显的原因为什么要这样做，并且此处建议的解决方案到目前为止对我没有用

【解决方案2】：

您的代码看起来不错，但 我想帮助您进行以下更改： 我编辑并更新了我的帖子，因为我之前的建议中的一些部分不适用于您的情况（因为 ajax contentType 在您的情况下是可以的等等......），所以我清除了我的答案目的：

在HTML表单中，输入名称应该在输入字段中给出，因为这样更容易使用AJAX提交输入的HTML表单值：

<input type="text" name="name" id="name"/>

<input type="email" name="email" id="email"/>

<input type="password" name="password" id="password"/>

提交按钮应该改成这样：

<button type="button" name="submitme" id="submitme">Submit</button>

您的 AJAX 调用 应该像这样重新制定（我认为您的 url 中缺少尾部斜杠，并且 data 可能更简单格式比你做的，现在点击功能在按钮ID上。代码上的右括号被清除：

<script type = "text/text/javascript">
var $ = jQuery.noConflict();
$( document ).ready(function() {
  $('#submitme').on('click', function(e){
    e.preventDefault();
    $.ajax({
        type: 'POST',
        url:'/user/create/',
        data: $('form').serialize(),
        success: function(){
            alert('created');
        }
    })
  })
});
</script>

并且您的视图应该如下所示，以获取 ajax 提交的数据并保存为新用户（只需进行非常小的修改）：

def create_user(request):
    if request.method == 'POST':
        name = request.POST.get('name')
        email = request.POST.get('email')
        password = request.POST.get('password')

        new_user = User.objects.create(
            name = name,
            email = email,
            password = password
        )

        new_user.save()

        return HttpResponse('')

这样它现在必须工作。我希望这会对你有所帮助。

【讨论】：

【解决方案3】：

不确定此答案的相关性。但是没有为您创建“POST”请求的唯一原因是因为您在 JS 中编写了 <script type = "text/text/javascript"> 而不是 <script type = "text/javascript">

【讨论】：

【解决方案4】：

尝试将 method="POST" 和 action="{% url 'url_name' %}" 添加到 html 表单。还将名称添加到 url 以创建用户。

【讨论】：