私はDjangoは初めてで、Ajaxはかなり新しいです。2つを統合する必要があるプロジェクトに取り組んでいます。私はそれらの両方の背後にある原則を理解していると信じていますが、2つを一緒にうまく説明できていません。
誰かがコードベースを2つに統合してどのように変更する必要があるかを簡単に説明してもらえますか？
たとえば、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とおりにすべての変数を置き換えます（おそらく、これまでにすべてを知っています）。
次に、AJAXについて説明します。AJAX呼び出しは、非同期要求を実行するクライアント側コードです。それは複雑に聞こえますが、それは単にバックグラウンドで要求を実行してから応答を処理することを意味します。したがって、ある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');
}
}); 一般的なプロセスは次のとおりです。
127.0.0.1:8000/hello新しいタブを開いて自分で行ったかのように、呼び出しはURLに移動します。ここで何が起こるでしょうか？「hello world」が入ったアラートが表示されます。自宅にAJAX呼び出しを行うとどうなりますか？同じことで、アラートが表示され<h1>Hello world, welcome to my awesome site</h1>ます。
言い換えれば、AJAX呼び出しについては何も新しいことはありません。これらは、ユーザーがページを離れることなくデータや情報を取得できるようにするための方法であり、スムーズで非常にきちんとしたWebサイトのデザインを実現します。注意すべきいくつかのガイドライン：
console.logデバッグするには、Chrome開発者ツール（またはfirebugなどの同様のツール）を使用する必要があります。詳細は説明せず、ググってみてください。それはあなたにとても役立つでしょう。csrf_token。AJAX呼び出しでは、ページを更新せずにデータを送信したい場合がよくあります。最終的にそれを思い出す前に、おそらくいくつかの問題に直面するでしょう-待って、あなたはを送るのを忘れましたcsrf_token。これは、AJAXとDjangoの統合における既知の初心者向けロードブロッキングですが、見栄えを良くする方法を学んだ後は、簡単です。それが私の頭に浮かぶすべてです。それは広大な主題ですが、ええ、おそらくそこには十分な例がありません。ゆっくりと、そこに向かって作業するだけで、最終的にはそれが得られます。
csrf_tokenこの方法を回避できますか？サンプル関数がある場合ajaxCall()、のような従来の方法を使用でき<form onsubmit='ajaxCall();return false;'>ますよね？
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の助けを借りて、特定のユーザー名が存在するかどうかを知りたいとします。
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に置き換えられたrender_to_responseも、HttpResponseの代わりにDjango 1.7以降では、ajax応答にJsonResponseを使用しています。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 Demo
AJAXは非同期タスクを実行する最良の方法です。非同期呼び出しを行うことは、どのWebサイト構築でも一般的に使用されています。DjangoにAJAXを実装する方法を学ぶために短い例をとります。JavaScriptを少なくするために、jQueryを使用する必要があります。
これは最も簡単な例であるContactの例です。AJAXの基本とDjangoでの実装の説明に使用しています。この例ではPOSTリクエストを作成します。私はこの投稿の例の1つに従っています：https : //djangopy.org/learn/step-up-guide-to-implement-ajax-in-django
models.py
まず、基本的な詳細を備えた連絡先のモデルを作成しましょう。
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.nameforms.py
上記のモデルのフォームを作成します。
from django import forms
from .models import Contact
class ContactForm(forms.ModelForm):
class Meta:
model = Contact
exclude = ["timestamp", ]views.py
ビューは基本的な関数ベースの作成ビューに似ていますが、レンダリングで戻る代わりに、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および送信ボタンとともに、囲みフォームタグの上に作成されたフォームをレンダリングします。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
プロジェクトでAjaxableResponseMixinを使用しようとしましたが、次のエラーメッセージが表示されていました。
ImproperlyConfigured：リダイレクト先の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 = ProductAddFormDjangoを使用する場合：
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を使用したい場合。最初にデータを含むページを初期化する必要がある場合は、AjaxでDjangoを使用できます。しかし、場合によっては、サーバーから何もない静的ページが必要なだけで、Djangoテンプレートを使用する必要はありません。
Ajaxがベストプラクティスと思わない場合。Djangoテンプレートを使用して、アニメなどのすべてを行うことができます。
（私の英語は下手です）