如何将Ajax与Django应用程序集成?

2020/10/31 14:31 · python ·  · 0评论

我是Django的新手,而Ajax的新手。我正在一个需要将两者整合的项目中。我相信我理解它们背后的原理,但是还没有找到对两者的良好解释。

有人可以给我一个简短的解释,说明如何将两者集成在一起才能更改代码库?

例如,我仍然可以将HttpResponseAjax与一起使用,还是必须随着Ajax的使用而改变我的回答?如果是这样,请您举例说明如何更改请求的响应?如果有什么不同,我返回的数据是JSON。

即使这不完全符合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并按要求替换所有变量(您现在可能已经知道了所有这些)。

现在让我们谈谈AJAXAJAX调用是执行异步请求的客户端代码。这听起来很复杂,但这仅意味着它会在后台为您提出请求,然后处理响应。因此,当您对某个URL进行AJAX调用时,您将获得与访问该位置的用户相同的数据。

例如,对的AJAX调用127.0.0.1:8000/hello将返回与您访问它相同的内容。只有这一次,您才将其包含在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');
    }
}); 

一般过程是这样的:

  1. 127.0.0.1:8000/hello就像您打开一个新标签页并自己完成一样,呼叫将转到URL
  2. 如果成功(状态码200),请执行成功功能,这将提醒收到的数据。
  3. 如果失败,请执行其他功能。

现在在这里会发生什么?您会收到有关“ hello world”的警报。如果您拨打AJAX到家里怎么办?同样,您会收到警告,说明<h1>Hello world, welcome to my awesome site</h1>

换句话说-AJAX调用没有新内容。它们只是让您在不离开页面的情况下让用户获取数据和信息的一种方法,它使您的网站设计流畅而整洁。您应该注意一些准则:

  1. 学习jQuery我不能太强调这一点。您将需要稍微了解一下才能知道如何处理收到的数据。您还需要了解一些基本的JavaScript语法(与python相距不远,您将习惯它)。我强烈推荐Envato的jQuery视频教程,它们很棒,可以使您走上正确的道路。
  2. 何时使用JSON?您将看到很多示例,其中Django视图发送的数据使用JSON。我没有进入细节上,因为它不是重要的是如何做到这一点(有很多的解释,比比皆是)和很多更重要的时候答案是-JSON数据是序列化数据。也就是说,您可以操纵的数据。就像我提到的那样,AJAX调用将获取响应,就好像用户自己做了一样。现在说您不想弄乱所有html,而是想发送数据(也许是对象列表)。JSON对此很有好处,因为它作为对象发送(JSON数据看起来像python字典),然后您可以对其进行迭代或执行其他操作,从而无需筛选无用的html。
  3. 最后添加当您构建Web应用程序并想要实现AJAX时-帮个忙。首先,构建完全没有任何AJAX的整个应用程序。看到一切正常。然后,直到那时,才开始编写AJAX调用。这是一个很好的过程,可以帮助您学习很多东西。
  4. 使用chrome的开发人员工具由于AJAX调用是在后台完成的,因此有时很难调试它们。您应该使用chrome开发人员工具(或类似的工具,例如firebug)和console.log要调试的东西。我不会详细解释,只是在Google周围寻找它。这将对您非常有帮助。
  5. CSRF意识最后,请记住Django中的发布请求需要csrf_token通过AJAX调用,很多时候您想发送数据而不刷新页面。您可能会遇到一些麻烦,最后才想起那个-等待,您忘记了发送csrf_token这是AJAX-Django集成中已知的初学者障碍,但是在您了解了如何使其发挥出色后,这就像馅饼一样容易。

这就是我想到的一切。这是一个广泛的主题,但是,是的,可能没有足够的例子。只要在那里工作,就慢慢地,最终会成功。

除了yuvi的出色回答之外,我想添加一个有关如何在Django中处理此问题的小例子(除了将要使用的所有js)。该示例使用AjaxableResponseMixin并假设一个Author模型。

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文档,具有基于类的视图的表单处理

Django 1.6版的链接不再可用,已更新至1.11版

我写这封信是因为可接受的答案很旧,需要复习。

所以这就是我在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>   

阿贾克斯:

$('#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不建议使用。

简单而漂亮。您不必更改视图。Bjax处理所有链接。看看这个:
Bjax

用法:

<script src="bjax.min.js" type="text/javascript"></script>
<link href="bjax.min.css" rel="stylesheet" type="text/css" />

最后,将其包含在html的HEAD中:

$('a').bjax();

有关更多设置,请在此处签出演示:
Bjax演示

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

表格

创建上述模型的表单。

from django import forms
from .models import Contact

class ContactForm(forms.ModelForm):
    class Meta:
        model = Contact
        exclude = ["timestamp", ]

views.py

这些视图看起来类似于基于函数的基本创建视图,但是我们不使用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>

Java脚本

现在让我们谈谈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-在Django中实现ajax

我试图在项目中使用AjaxableResponseMixin,但最终出现以下错误消息:

配置不正确:没有要重定向到的URL。在模型上提供一个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

当我们使用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,则必须执行以下操作:

  1. 使用URL1初始化HTML页面(我们通常通过Django模板初始化页面)。然后服务器向客户端发送一个html页面。
  2. 使用Ajax通过URL2与服务器通信。然后服务器向客户端发送数据结构。

Django与Ajax不同。原因如下:

  • 返回给客户的东西是不同的。Django的情况是HTML页面。Ajax的情况是数据结构。 
  • Django擅长创建某些东西,但是只能创建一次,不能更改任何东西。Django就像动漫,由许多图片组成。相比之下,Ajax并不擅长在已有的html页面中创建某事,但擅长于更改某事。

我认为,如果您想在任何地方使用ajax。当您首先需要使用数据初始化页面时,可以将Django与Ajax结合使用。但是在某些情况下,您只需要一个静态页面,而服务器上没有任何内容,则不需要使用Django模板。

如果您不认为Ajax是最佳实践。您可以使用Django模板来完成所有操作,例如动漫。

(我英文不太好)

使用Django轻松进行Ajax调用

(26.10.2020)

在我看来,这比正确的答案更干净,更简单。
这一节还包括如何添加csrftoken以及如何在ajax中使用login_required方法。

风景

@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添加到当前页面

这可能是一个话题,但我很少见到使用它,这是一种最小化窗口重定位以及在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)

用于视图的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) {
                        console.log(data);
                        // Add the http response to element
                        target_element.html(data);
                    }
                }
            });
        })
    </script>
{% endblock %}
本文地址:http://python.askforanswer.com/ruhejiangajaxyudjangoyingyongchengxujicheng.html
文章标签: ,   ,  
版权声明:本文为原创文章,版权归 admin 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!