Как интегрировать Ajax с приложениями Django?

Я новичок в Django и довольно новичок в Ajax. Я работаю над проектом, в котором мне нужно интегрировать их. Я полагаю, что понимаю принципы, стоящие за ними обоими, но не нашел хорошего объяснения обоим вместе.

может ли кто-нибудь дать мне краткое объяснение того, как кодовая база должна измениться с их интеграцией вместе?

например, могу ли я использовать HttpResponse с Ajax, или мои ответы должны измениться с использованием Ajax? Если да, то не могли бы вы привести пример того, как должны изменяться ответы на запросы? Если это имеет значение, данные, которые я возвращаю, - JSON.

4 ответов


хотя это не совсем в духе SO, мне нравится этот вопрос, потому что у меня была такая же проблема, когда я начал, поэтому я дам вам краткое руководство. Очевидно, вы не понимаете принципов, стоящих за ними (не воспринимайте это как оскорбление, но если бы вы это сделали, вы бы не спрашивали).

Django на стороне сервера. Это означает, что, скажем, клиент переходит к url-адресу, у вас есть функция внутри представлений, которая отображает то, что он видит, и возвращает ответ в html. давай разберемся. примеры:

views.py

def hello(request):
    return HttpResponse('Hello World!')

def home(request):
    return render_to_response('index.html', {'variable': 'world'})
.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 вернет то же самое, что и если бы вы посетили его. Только на этот раз у вас есть это внутри функции js, и вы можете справиться с этим, как хотите. Давайте рассмотрим простой пример:

$.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. вызов переходит на url 127.0.0.1:8000/hello как будто вы открыли новую вкладку и сделали это сами.
  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. Я не стал вдаваться в подробности, потому что это не важно как чтобы сделать это (есть много объяснений изобилуют) и многое другое важно!--53-->, когда. И ответ на это-данные JSON-это сериализованные данные. То есть данными можно манипулировать. Как я уже упоминал, вызов AJAX будет получать ответ, как если бы пользователь сделал это сам. Теперь скажите, что вы не хотите возиться со всем html, а вместо этого хотите отправить данные (возможно, список объектов). JSON хорош для этого, потому что он отправляет его как объект (данные JSON выглядят как словарь python), а затем вы можете перебирать его или делать что-то еще, что устраняет необходимость просеять бесполезный html.
  3. добавить это в прошлом. Когда вы создаете веб-приложение и хотите реализовать AJAX - сделайте себе одолжение. Во-первых, создайте все приложение, полностью лишенное любого AJAX. Смотри, чтобы все работало. Затем, и только тогда, начните писать вызовы AJAX. Это хороший процесс, который также помогает вам многому научиться.
  4. используйте инструменты разработчика chrome. Поскольку вызовы AJAX выполняются в фоновом режиме, иногда очень сложно отлаживайте их. Вы должны использовать инструменты разработчика chrome (или аналогичные инструменты, такие как firebug) и console.log вещи для отладки. Я не буду объяснять подробно, просто google вокруг и узнать об этом. Это было бы очень полезно для вас.
  5. осведомленность CSRF. Наконец, помните, что запросы post в Django требуют csrf_token. С AJAX-вызовами много раз вы хотите отправлять данные без обновления страницы. Возможно, ты столкнешься с проблемами, прежде чем вспомнишь об этом. - погоди, ты забыл отправить csrf_token. Это известный новичок блокпост в интеграции AJAX-Django, но после того, как вы узнаете, как заставить его играть хорошо, это легко, как пирог.

это все, что приходит в голову. Это обширная тема, Но да, вероятно, недостаточно примеров. Просто двигайся туда, медленно, в конце концов ты получишь это.


далее от отличного ответа Юви, я хотел бы добавить небольшой конкретный пример о том, как справиться с этим в 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, обработка форм с представлениями на основе классов

ссылка на версию 1.6 Django больше не доступна обновлена до версии 1.11


просто и красиво. Вам не нужно менять свои взгляды. Bjax обрабатывает все ваши ссылки. Проверить это: Bjax

использование:

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

наконец, включите это в голову вашего html:

$('a').bjax();

для получения дополнительных настроек, checkout demo здесь: Bjax Demo


Я пробовал использовать AjaxableResponseMixin в моем проекте, но в итоге с следующее сообщение об ошибке:

неправильно сконфигурирован: нет URL для перенаправления. Укажите url-адрес или определите метод get_absolute_url в модели.

это потому, что CreateView вернет редирект ответ вместо возврата HttpResponse при отправке запроса JSON в браузер. Поэтому я внес некоторые изменения к 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