我正试图在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请求。有人能帮我吗？
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-auth系统，因此不需要model.py，至少目前不需要。另外，看看我添加的渲染图-使用HttpReponse，您的页面将重新加载。使用form.submit()自动保存电子邮件
SignUpForm应该很简单：
class SignUpForm(UserCreationForm):
email = forms.EmailField(max_length=254, help_text='Required.')
您的代码看起来不错，但我想帮助您进行以下更改：我编辑并更新了我的帖子，因为我之前的建议中很少有部分不适用于您的情况(因为ajax contentType在您的情况下是可以的，等等…(，所以我为您的目的清除了我的答案：
1.
在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>
2.
您的AJAX调用应该重新表述为这样(我认为url中缺少尾部斜杠，数据的格式可能比您所做的更简单，点击功能现在在按钮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('')
这种方式现在必须起作用。我希望这对你有帮助。
不确定这个答案的相关性。但没有为您创建"POST"请求的唯一原因是因为您在JS<script type = "text/text/javascript">而不是<script type = "text/javascript">中编写
尝试添加方法="POST"；并且动作＝"；｛%url'url_name'%｝"为html表单添加名称。也为创建用户的url添加名称。