我正在尝试在 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()
注册表单应该很简单:
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中缺少尾部斜线,并且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('')
这样现在一定可以了。我希望这对你有帮助。
不确定这个答案有多相关。但是没有为您创建“POST”请求的唯一原因是您在 JS 中编写了
<script type = "text/text/javascript">
而不是 <script type = "text/javascript">
尝试将 method="POST" 和 action="{% url 'url_name' %}" 添加到 html 表单。还要将名称添加到创建用户的 url 中。