使用Django轻松调用ajax
(26.10.2020)
在我看来，这比正确答案更清晰、更简单。
视图
@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)
urls . py
urlpatterns = [
path('some-view-does-something/', views.some_view, name='doing-something'),
]
ajax调用
ajax调用非常简单，但对于大多数情况来说已经足够了。您可以获取一些值并将它们放入数据对象中，然后在上面描述的视图中，您可以通过它们的名称再次获取它们的值。
你可以在django的文档中找到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);
}
}
});
使用ajax将HTML添加到当前页面
这可能有点离题，但我很少看到这个使用，这是一个伟大的方式来减少窗口重定位以及手动html字符串创建javascript。
这与上面的非常相似，但这一次我们从响应中呈现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)
视图的html创建模板
creation_template.html
{% for model in models %}
<li class="xyz">{{ model.name }}</li>
{% endfor %}
urls . py
urlpatterns = [
path('get-html/', views.create_some_html, name='get-html'),
]
主模板和ajax调用
这就是我们要向其中添加数据的模板。在这个例子中，我们有一个搜索输入和一个将搜索输入值发送到视图的按钮。然后视图返回一个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) {
/* You could also use json here to get multiple html to
render in different places */
console.log(data);
// Add the http response to element
target_element.html(data);
}
}
});
})
</script>
{% endblock %}
