如何使用 AJAX 发送 Django 表单
本文同时发布于OnePublish。
DEV Network，你们好吗？
在本快速教程中，我将向您展示如何使用AJAX在不刷新页面的情况下 POST Django 表单。
我假设你已经创建了项目。让我们从在models.py中创建一个非常简单的 Post 模型开始。
from django.db import models
class Post (models.Model):
title = models.CharField(max_length=50)
description = models.TextField()
def __str__(self):
return self.title
创建完成后，打开views.py文件并插入以下代码：
from django.shortcuts import render
from django.http import JsonResponse
from .models import Post
def create_post(request):
posts = Post.objects.all()
response_data = {}
if request.POST.get('action') == 'post':
title = request.POST.get('title')
description = request.POST.get('description')
response_data['title'] = title
response_data['description'] = description
Post.objects.create(
title = title,
description = description,
)
return JsonResponse(response_data)
return render(request, 'create_post.html', {'posts':posts})
如您所见，我们导入了JsonResponse 类，它是 HttpResponse 的子类，用于创建 JSON 编码的响应。其默认的 Content-Type 标头设置为 application/json。第一个参数 data 应该是一个字典实例。我们将使用 JSON 数据立即显示创建的帖子。
我强烈建议您查看以下 StackOverflow 问题，以便更好地理解request.POST[]和request.POST.get()之间的区别。
两者之间有什么区别？
request.POST.get('sth')
和
request.POST['sth']
我没找到类似的问题，这两个方法对我来说效果一样，我猜可以分开使用，但也许我错了，所以才来问问。有什么想法吗？
如果你的页面中有多个表单，你可以使用action将它们分开，这样你的视图就不会同时收到多个请求。
为了一步创建并保存对象，我们使用create()方法。
现在我们来看一下我们的 HTML 表单。
<form method="POST" id="post-form">
{% csrf_token %}
<div class="form-group">
<label>Title</label>
<input type="text" class="form-control" id="title" placeholder="Title">
</div>
<div class="form-group">
<label>Description</label>
<textarea class="form-control" id="description" placeholder="Description"></textarea>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
如您所知，我们使用 csrf_token 发送 POST 请求，这是一个简单的 Bootstrap 表单。我们为每个输入框指定一个 id，以便通过 AJAX 请求 id 值。
$(document).on('submit', '#post-form',function(e){
$.ajax({
type:'POST',
url:'{% url "create" %}',
data:{
title:$('#title').val(),
description:$('#description').val(),
csrfmiddlewaretoken:$('input[name=csrfmiddlewaretoken]').val(),
action: 'post'
},
success:function(json){
document.getElementById("post-form").reset();
$(".posts").prepend('<div class="col-md-6">'+
'<div class="row no-gutters border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative">' +
'<div class="col p-4 d-flex flex-column position-static">' +
'<h3 class="mb-0">' + json.title + '</h3>' +
'<p class="mb-auto">' + json.description + '</p>' +
'</div>' +
'</div>' +
'</div>'
)
},
error : function(xhr,errmsg,err) {
console.log(xhr.status + ": " + xhr.responseText); // provide a bit more info about the error to the console
}
});
});
请注意，您必须将 jquery-2.2.4.min.js 添加到您的静态文件中，您可以从我的git 仓库中获取它。
好了！这里发生了什么？首先，给表单添加 id 属性很重要，这样 jQuery 才能检测到表单提交。AJAX type指定请求类型，这里是 POST，因为我们要将数据发送到数据库，url指定请求发送到的 URL。然后，我们使用 val() 方法根据 id 获取表单元素的值，并将其与data 参数一起发送，data参数指定要发送到服务器的数据。必须获取 csrf_token 的值，否则会返回 403 Forbidden 错误。如您所见，我们指定了 action，以便视图能够检测到哪个表单正在提交。
请求发送成功后，我们会清理表单，并将新帖子立即添加到帖子行中。
.prepend() 方法将指定的内容插入到 jQuery 集合中每个元素的第一个子元素中（要将其插入到最后一个子元素中，请使用 .append()）。
如果在发送请求时发生错误（希望不会😅），最后一个函数会将错误信息添加到控制台，这样你就能看到导致这个棘手错误的原因。我想你已经知道如何友好地向用户显示错误信息了。
最后你会得到以下结果
任务完成！
你刚刚学会了如何使用 AJAX 向 Django 表单发送 POST 请求🚀🚀
你可以从我的Git 仓库克隆或下载这个项目，别忘了在Twitter和Instagram上关注并支持我，加入 Reverse Astronauts 社区！👨🚀 下个教程见！