我是Django的新手，也是Ajax的新手。我正在开展一个项目，我需要整合这两个项目。我相信我理解他们背后的原则，但没有找到两者的良好解释。
有人可以快速解释一下代码库如何随着两者集成在一起而改变吗？
例如，我是否仍然可以将HttpResponse与Ajax一起使用，或者我的响应是否必须使用Ajax进行更改？如果是这样，请您提供一个示例，说明请求的响应必须如何变化？如果它有任何区别，我返回的数据是JSON。
答案 0 :(得分：580)
虽然这并非完全符合SO精神，但我喜欢这个问题，因为我开始时遇到了同样的麻烦，所以我会给你一个快速指南。显然你不理解他们背后的原则（不要把它作为一种冒犯，但如果你这样做，你就不会问）。
Django 服务器端。这意味着，比如客户端转到URL，您在views内部有一个函数可以呈现他看到的内容并以HTML格式返回响应。让我们把它分解成例子：
<强> views.py：
def hello(request):
return HttpResponse('Hello World!')
def home(request):
return render_to_response('index.html', {'variable': 'world'})
<强>的index.html：
<h1>Hello {{ variable }}, welcome to my awesome site</h1>
<强> urls.py：
url(r'^hello/', 'myapp.views.hello'),
url(r'^home/', 'myapp.views.home'),
这是最简单用法的一个例子。转到127.0.0.1:8000/hello表示对hello()函数的请求，转到127.0.0.1:8000/home将返回index.html并替换所有变量（您可能现在知道所有这些）
现在让我们谈谈 AJAX 。 AJAX调用是执行异步请求的客户端代码。这听起来很复杂，但它只是意味着它在后台为您提出请求，然后处理响应。因此，当您对某个URL执行AJAX调用时，您将获得与用户前往该位置时相同的数据。
例如，对127.0.0.1:8000/hello的AJAX调用将返回与访问它时相同的内容。只有这一次，你有一个JavaScript函数，你可以随意处理它。让我们看一个简单的用例：
$.ajax({
url: '127.0.0.1:8000/hello',
type: 'get', // This is the default though, you don't actually need to always mention it
success: function(data) {
alert(data);
},
failure: function(data) {
alert('Got an error dude');
}
});
一般过程如下：
127.0.0.1:8000/hello，就好像您打开了一个新标签并自行完成。现在会发生什么？你会收到一个警告“hello world”。如果您在家进行AJAX通话会发生什么？同样的事情，你会收到一条警告，说明<h1>Hello world, welcome to my awesome site</h1>。
换句话说 - AJAX调用并没有什么新鲜事。它们只是让您在不离开页面的情况下让用户获取数据和信息的一种方式，它使您的网站设计流畅，非常整洁。您应该注意的一些指导原则：
console.log来调试。我不会详细解释，只是google并了解它。这对你很有帮助。csrf_token。使用AJAX调用时，很多时候您希望在不刷新页面的情况下发送数据。在你终于记住之前，你可能会遇到一些麻烦 - 等等，你忘了发送csrf_token。这是AJAX-Django集成中的一个已知的初学者障碍，但是在你学会如何使它发挥得很好之后，它很容易就像馅饼一样。这就是我头脑中的一切。这是一个广泛的主题，但是，可能没有足够的例子。只要按照自己的方式工作，慢慢地，你最终会得到它。
答案 1 :(得分：19)
此外，根据yuvi的优秀答案，我想在Django中添加一个关于如何处理这个问题的一个小例子（超出任何将要使用的js）。该示例使用AjaxableResponseMixin并假设作者模型。
import json
from django.http import HttpResponse
from django.views.generic.edit import CreateView
from myapp.models import Author
class AjaxableResponseMixin(object):
"""
Mixin to add AJAX support to a form.
Must be used with an object-based FormView (e.g. CreateView)
"""
def render_to_json_response(self, context, **response_kwargs):
data = json.dumps(context)
response_kwargs['content_type'] = 'application/json'
return HttpResponse(data, **response_kwargs)
def form_invalid(self, form):
response = super(AjaxableResponseMixin, self).form_invalid(form)
if self.request.is_ajax():
return self.render_to_json_response(form.errors, status=400)
else:
return response
def form_valid(self, form):
# We make sure to call the parent's form_valid() method because
# it might do some processing (in the case of CreateView, it will
# call form.save() for example).
response = super(AjaxableResponseMixin, self).form_valid(form)
if self.request.is_ajax():
data = {
'pk': self.object.pk,
}
return self.render_to_json_response(data)
else:
return response
class AuthorCreate(AjaxableResponseMixin, CreateView):
model = Author
fields = ['name']
来源：Django documentation, Form handling with class-based views
Django 1.6版的链接已不再更新至版本1.11
答案 2 :(得分：2)
我尝试在我的项目中使用AjaxableResponseMixin，但最终出现以下错误消息：
NotperlyConfigured：没有要重定向到的网址。在模型上提供URL或定义get_absolute_url方法。
这是因为当您向浏览器发送JSON请求时，CreateView将返回重定向响应，而不是返回HttpResponse。所以我对AjaxableResponseMixin进行了一些更改。如果请求是ajax请求，则不会调用super.form_valid方法，只需直接调用form.save()。
from django.http import JsonResponse
from django import forms
from django.db import models
class AjaxableResponseMixin(object):
success_return_code = 1
error_return_code = 0
"""
Mixin to add AJAX support to a form.
Must be used with an object-based FormView (e.g. CreateView)
"""
def form_invalid(self, form):
response = super(AjaxableResponseMixin, self).form_invalid(form)
if self.request.is_ajax():
form.errors.update({'result': self.error_return_code})
return JsonResponse(form.errors, status=400)
else:
return response
def form_valid(self, form):
# We make sure to call the parent's form_valid() method because
# it might do some processing (in the case of CreateView, it will
# call form.save() for example).
if self.request.is_ajax():
self.object = form.save()
data = {
'result': self.success_return_code
}
return JsonResponse(data)
else:
response = super(AjaxableResponseMixin, self).form_valid(form)
return response
class Product(models.Model):
name = models.CharField('product name', max_length=255)
class ProductAddForm(forms.ModelForm):
'''
Product add form
'''
class Meta:
model = Product
exclude = ['id']
class PriceUnitAddView(AjaxableResponseMixin, CreateView):
'''
Product add view
'''
model = Product
form_class = ProductAddForm
答案 3 :(得分：2)
我写这个是因为接受的答案很旧，需要复习。
这就是我在2019年将Ajax与Django集成的方式:)让我们举一个实际的例子说明何时需要Ajax：-
让我们说我有一个带有注册用户名的模型，并且借助于Ajax，我想知道给定的用户名是否存在。
html：
<p id="response_msg"></p>
<form id="username_exists_form" method='GET'>
Name: <input type="username" name="username" />
<button type='submit'> Check </button>
</form>
ajax：
$('#username_exists_form').on('submit',function(e){
e.preventDefault();
var username = $(this).find('input').val();
$.get('/exists/',
{'username': username},
function(response){ $('#response_msg').text(response.msg); }
);
});
urls.py：
from django.contrib import admin
from django.urls import path
from . import views
urlpatterns = [
path('admin/', admin.site.urls),
path('exists/', views.username_exists, name='exists'),
]
views.py：
def username_exists(request):
data = {'msg':''}
if request.method == 'GET':
username = request.GET.get('username').lower()
exists = Usernames.objects.filter(name=username).exists()
if exists:
data['msg'] = username + ' already exists.'
else:
data['msg'] = username + ' does not exists.'
return JsonResponse(data)
还弃用了render_to_response，并已将其替换为render，从Django 1.7开始，而不是HttpResponse，我们使用JsonResponse进行ajax响应。因为它带有JSON编码器，所以您不需要在返回响应对象之前对数据进行序列化，但是HttpResponse并不被弃用。
答案 4 :(得分：1)
AJAX是执行异步任务的最佳方法。在任何网站建设中，进行异步调用都是很常见的事情。我们将以一个简短的例子来学习如何在Django中实现AJAX。我们需要使用jQuery，以便减少JavaScript。
这是 Contact 的示例，这是最简单的示例，我用它来解释AJAX的基础知识及其在Django中的实现。在此示例中，我们将发出POST请求。我正在关注本文的示例之一：https://djangopy.org/learn/step-up-guide-to-implement-ajax-in-django
models.py
让我们首先创建具有基本细节的Contact模型。
from django.db import models
class Contact(models.Model):
name = models.CharField(max_length = 100)
email = models.EmailField()
message = models.TextField()
timestamp = models.DateTimeField(auto_now_add = True)
def __str__(self):
return self.name
forms.py
为上述模型创建表单。
from django import forms
from .models import Contact
class ContactForm(forms.ModelForm):
class Meta:
model = Contact
exclude = ["timestamp", ]
views.py
这些视图看起来类似于基于基本功能的create视图，但是我们没有使用render来返回，而是使用了JsonResponse响应。
from django.http import JsonResponse
from .forms import ContactForm
def postContact(request):
if request.method == "POST" and request.is_ajax():
form = ContactForm(request.POST)
form.save()
return JsonResponse({"success":True}, status=200)
return JsonResponse({"success":False}, status=400)
urls.py
让我们创建以上视图的路线。
from django.contrib import admin
from django.urls import path
from app_1 import views as app1
urlpatterns = [
path('ajax/contact', app1.postContact, name ='contact_submit'),
]
模板
移动到前端部分，呈现在封闭表单标签上方创建的表单以及csrf_token和Submit按钮。请注意，我们已经包含了jquery库。
<form id = "contactForm" method= "POST">{% csrf_token %}
{{ contactForm.as_p }}
<input type="submit" name="contact-submit" class="btn btn-primary" />
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
JavaScript
现在让我们讨论javascript部分，在表单提交上，我们发出POST类型的ajax请求，获取表单数据并发送到服务器端。
$("#contactForm").submit(function(e){
// prevent from normal form behaviour
e.preventDefault();
// serialize the form data
var serializedData = $(this).serialize();
$.ajax({
type : 'POST',
url : "{% url 'contact_submit' %}",
data : serializedData,
success : function(response){
//reset the form after successful submit
$("#contactForm")[0].reset();
},
error : function(response){
console.log(response)
}
});
});
这只是使用Django进行AJAX入门的基本示例，如果您想了解更多示例，可以阅读本文：https://djangopy.org/learn/step-up-guide-to-implement-ajax-in-django
答案 5 :(得分：1)
（2020年10月26日）
在我看来，这比正确的答案更干净，更简单。这还包括如何添加csrftoken以及如何将login_required方法与ajax一起使用。
@login_required
def some_view(request):
"""Returns a json response to an ajax call. (request.user is available in view)"""
# Fetch the attributes from the request body
data_attribute = request.GET.get('some_attribute') # Make sure to use POST/GET correctly
# DO SOMETHING...
return JsonResponse(data={}, status=200)
urlpatterns = [
path('some-view-does-something/', views.some_view, name='doing-something'),
]
ajax调用非常简单，但是在大多数情况下就足够了。您可以获取一些值并将其放入数据对象中，然后在上述视图中通过其名称再次获取它们的值。
您可以在django's documentation中找到csrftoken函数。基本上，只需复制它并确保在您的Ajax调用之前将其渲染，以便定义 csrftoken变量。
$.ajax({
url: "{% url 'doing-something' %}",
headers: {'X-CSRFToken': csrftoken},
data: {'some_attribute': some_value},
type: "GET",
dataType: 'json',
success: function (data) {
if (data) {
console.log(data);
// call function to do something with data
process_data_function(data);
}
}
});
这可能是个话题，但我很少见到使用它，这是一种最小化窗口重定位以及在javascript中手动创建html字符串的好方法。
这与上面的非常相似，但是这次我们从响应中渲染html，而无需重新加载当前窗口。
如果您打算从作为对Ajax调用的响应而接收的数据中呈现某种html，则从视图发送回HttpResponse（而不是JsonResponse）可能会更容易。这样一来，您就可以轻松创建html，然后可以将其插入到元素中。
# The login required part is of course optional
@login_required
def create_some_html(request):
"""In this particular example we are filtering some model by a constraint sent in by
ajax and creating html to send back for those models who match the search"""
# Fetch the attributes from the request body (sent in ajax data)
search_input = request.GET.get('search_input')
# Get some data that we want to render to the template
if search_input:
data = MyModel.objects.filter(name__contains=search_input) # Example
else:
data = []
# Creating an html string using template and some data
html_response = render_to_string('path/to/creation_template.html', context = {'models': data})
return HttpResponse(html_response, status=200)
creation_template.html
{% for model in models %}
<li class="xyz">{{ model.name }}</li>
{% endfor %}
urlpatterns = [
path('get-html/', views.create_some_html, name='get-html'),
]
这是我们要将数据添加到的模板。特别是在此示例中，我们有一个搜索输入和一个按钮，该按钮将搜索输入的值发送到视图。然后该视图发送一个HttpResponse返回，显示与我们可以在元素内呈现的搜索匹配的数据。
{% extends 'base.html' %}
{% load static %}
{% block content %}
<input id="search-input" placeholder="Type something..." value="">
<button id="add-html-button" class="btn btn-primary">Add Html</button>
<ul id="add-html-here">
<!-- This is where we want to render new html -->
</ul>
{% end block %}
{% block extra_js %}
<script>
// When button is pressed fetch inner html of ul
$("#add-html-button").on('click', function (e){
e.preventDefault();
let search_input = $('#search-input').val();
let target_element = $('#add-html-here');
$.ajax({
url: "{% url 'get-html' %}",
headers: {'X-CSRFToken': csrftoken},
data: {'search_input': search_input},
type: "GET",
dataType: 'html',
success: function (data) {
if (data) {
console.log(data);
// Add the http response to element
target_element.html(data);
}
}
});
})
</script>
{% endblock %}
答案 6 :(得分：0)
当我们使用Django时：
Server ===> Client(Browser)
Send a page
When you click button and send the form,
----------------------------
Server <=== Client(Browser)
Give data back. (data in form will be lost)
Server ===> Client(Browser)
Send a page after doing sth with these data
----------------------------
如果要保留旧数据，则可以在没有Ajax的情况下进行。 （页面将刷新）
Server ===> Client(Browser)
Send a page
Server <=== Client(Browser)
Give data back. (data in form will be lost)
Server ===> Client(Browser)
1. Send a page after doing sth with data
2. Insert data into form and make it like before.
After these thing, server will send a html page to client. It means that server do more work, however, the way to work is same.
或者您可以使用Ajax（页面不会刷新）
--------------------------
<Initialization>
Server ===> Client(Browser) [from URL1]
Give a page
--------------------------
<Communication>
Server <=== Client(Browser)
Give data struct back but not to refresh the page.
Server ===> Client(Browser) [from URL2]
Give a data struct(such as JSON)
---------------------------------
如果使用Ajax，则必须执行以下操作：
Django与Ajax不同。原因如下：
我认为，如果您想在所有地方使用ajax。当您首先需要使用数据初始化页面时，可以将Django与Ajax结合使用。但是在某些情况下，您只需要一个静态页面，而服务器中没有任何内容，则不需要使用Django模板。
如果您不认为Ajax是最佳实践。您可以使用Django模板来完成所有操作，例如动漫。
（我的英语不好）