Django Ajax アプリケーション

Ajaxは、ページの負荷量を減らす技術の組み合わせで基本的に統合されています。私たちは通常、Ajaxを使用して最終的なユーザーの体験を緩和します。DjangoでAjaxを使用する場合、jQueryや他のAjaxライブラリを使用して直接使用できます。例えば、jQueryを使用する場合は、ライブラリをダウンロードしてApacheや他のサーバーを通じて提供し、テンプレートでそれを使用します。

DjangoでAjaxを使用するもう一つの方法は、DjangoのAjaxフレームワークを使用することです。最も常用のはdjangoです。-dajaxは、Pythonを使用して逻辑を簡単にアシンクリーノーで表現し、Webアプリケーションの開発を非常に高速に行うことができる強力なツールです。JavaScriptのソースコードはほとんど必要ありません。Prototype、jQuery、Dojo、MooToolsの4つの最も人気のあるjsフレームワークをサポートしています。

Djangoを使用する-dajax

まず最初にすることはdjangoをインストールすることです。-dajaxです。これを実行するにはeasy_installまたはpipを使用します。

#　Filename　:　example.py
#　Copyright　:　2020　By　w3codebox
#　Author　by　:　ja.oldtoolbag.com
#　Date　:　2020-08-08
$ pip install django_dajax
　$ easy_install django_dajax

これにより、djangoが自動的にインストールされます。-dajaxice、djangoに基づいて-dajaxiceを要求します。それから、Ajaxとdajaxiceを設定する必要があります。

settings.pyにdajaxおよびdajaxiceを追加し、INSTALLED_APPSの選択プロジェクトに−を追加してください

#　Filename　:　example.py
#　Copyright　:　2020　By　w3codebox
#　Author　by　:　ja.oldtoolbag.com
#　Date　:　2020-08-08
INSTALLED_APPS　+=　(
　　　　'dajaxice',
　　　　'dajax'
　)

同じsettings.pyファイル内で以下の設定を確認してください　−

#　Filename　:　example.py
#　Copyright　:　2020　By　w3codebox
#　Author　by　:　ja.oldtoolbag.com
#　Date　:　2020-08-08
TEMPLATE_LOADERS　=　(
　　　　'django.template.loaders.filesystem.Loader',
　　　　'django.template.loaders.app_directories.Loader',
　　　　'django.template.loaders.eggs.Loader',
　)
　TEMPLATE_CONTEXT_PROCESSORS　=　(
　　　　'django.contrib.auth.context_processors.auth',
　　　　'django.core.context_processors.debug',
　　　　'django.core.context_processors.i18n',
　　　　'django.core.context_processors.media',
　　　　'django.core.context_processors.static',
　　　　'django.core.context_processors.request',
　　　　'django.contrib.messages.context_processors.messages'
　)
　STATICFILES_FINDERS　=　(
　　　　'django.contrib.staticfiles.finders.FileSystemFinder',
　　　　'django.contrib.staticfiles.finders.AppDirectoriesFinder',
　　　　'dajaxice.finders.DajaxiceFinder',
　)
　DAJAXICE_MEDIA_PREFIX　=　'dajaxice'

今からmyappを開いてください/url.pyファイル、以下の設定を確認してくださいdajax　URLおよびdajax静的jsファイルのロード　−

例

#　Filename　:　example.py
#　Copyright　:　2020　By　w3codebox
#　Author　by　:　ja.oldtoolbag.com
#　Date　:　2020-08-08
from　dajaxice.core　import　dajaxice_autodiscover,　dajaxice_config
　from django.contrib.staticfiles.urls import staticfiles_urlpatterns
　from django.conf import settings
　Then dajax urls:
　urlpatterns　+= patterns('',
　　　　url(r'^%s/' % settings.DAJAXICE_MEDIA_PREFIX, include('dajaxice.urls')),)
　
　urlpatterns　+= staticfiles_urlpatterns()

Dreamrealモデルをベースにして、Ajax（フレッシュレス）を使用して簡単なテーブルを保存するためのフォームを作成します

まず、myapp/form.pyのDreamrealフォーム。

#　Filename　:　example.py
#　Copyright　:　2020　By　w3codebox
#　Author　by　:　ja.oldtoolbag.com
#　Date　:　2020-08-08
class DreamrealForm(forms.Form):
　　　　website = forms.CharField(max_length =　100)
　　　　name = forms.CharField(max_length =　100)
　　　　phonenumber = forms.CharField(max_length =　50)
　　　　email = forms.CharField(max_length =　100)

次に、アプリケーションのajax.pyファイル：myapp/ajax.py. ここには関連するロジックがあり、フォームを保存し、ポップアップで結果を返します -

例

#　Filename　:　example.py
#　Copyright　:　2020　By　w3codebox
#　Author　by　:　ja.oldtoolbag.com
#　Date　:　2020-08-08
from dajaxice.utils import deserialize_form
　from myapp.form import DreamrealForm
　from dajax.core import Dajax
　from myapp.models import Dreamreal
　@dajaxice_register
　def send_form(request, form):
　　　　dajax = Dajax()
　　　　form = DreamrealForm(deserialize_form(form))
　　　　if form.is_valid():
　　　　　　　dajax.remove_css_class('#my_form input', 'error')
　　　　　　　dr = Dreamreal()
　　　　　　　dr.website = form.cleaned_data.get('website')
　　　　　　　dr.name = form.cleaned_data.get('name')}
　　　　　　　dr.phonenumber = form.cleaned_data.get('phonenumber')
　　　　　　　dr.save()
　　　　　　　dajax.alert("Dreamreal Entry %s が成功して保存されました." %　
　　　　　　　　　　form.cleaned_data.get('phonenumber'))
　　　　else:
　　　　　　　dajax.remove_css_class('#my_form input', 'error')
　　　　　　　for error in form.errors:
　　　　　　　　　　dajax.add_css_class('#id_%s' % error, 'error')
　
　　　　return dajax.json()

さて、dreamreal.htmlテンプレートを作成しましょう。必要なフォームが含まれています -

#　Filename　:　example.py
#　Copyright　:　2020　By　w3codebox
#　Author　by　:　ja.oldtoolbag.com
#　Date　:　2020-08-08
<html>
　　　　<head></head>
　　　　<body>
　　　　　　　<form action = "" method = "post" id = "my_form" accept-charset = "utf-8">
　　　　　　　　　　{{ form.as_p }}
　　　　　　　　　　<p><input type = "button" value = "Send" onclick = "send_form();"></p>
　　　　　　　</form>
　　　　</body>
　</html>

補足として、テンプレートビュー：myappに追加します/views.py −

#　Filename　:　example.py
#　Copyright　:　2020　By　w3codebox
#　Author　by　:　ja.oldtoolbag.com
#　Date　:　2020-08-08
def dreamreal(request):
　　　　form = DreamrealForm()
　　　　return render(request, 'dreamreal.html', locals())

対応するURLを追加します：myapp/urls.py −

#　Filename　:　example.py
#　Copyright　:　2020　By　w3codebox
#　Author　by　:　ja.oldtoolbag.com
#　Date　:　2020-08-08
url(r'^dreamreal',/', 'dreamreal', name = 'dreamreal'),

Ajaxが動作するように、テンプレートに必要なコードを追加します

ファイルの上部に追加します -

#　Filename　:　example.py
#　Copyright　:　2020　By　w3codebox
#　Author　by　:　ja.oldtoolbag.com
#　Date　:　2020-08-08
{% load static %}
　{% load dajaxice_templatetags %}

dreamreal.htmlテンプレートの<head>部分に追加します　-

JQueryライブラリを使用してこのサンプルのため、以下のコードを追加します

#　Filename　:　example.py
#　Copyright　:　2020　By　w3codebox
#　Author　by　:　ja.oldtoolbag.com
#　Date　:　2020-08-08
<script　src　=　"{%　static　'/static/jquery-1.11.3.min.js'　%}"　
　　　　type　=　"text/javascript"　charset　=　"utf-8></script>
　<script　src　=　"{%　static　'/static/dajax/jquery.dajax.core.js'　%}"></script>

クリックすると Ajax 函数が呼び出されます−

#　Filename　:　example.py
#　Copyright　:　2020　By　w3codebox
#　Author　by　:　ja.oldtoolbag.com
#　Date　:　2020-08-08
<script>
　　　　function　send_form(){
　　　　　　　Dajaxice.myapp.send_form(Dajax.process,{'form':$('#my_form').serialize(true)});
　　　　}
　</script>

注意してください、静的ファイルディレクトリに「jquery」を追加する必要があります。-1.11.3.min.js”，もしくは　jquery.dajax.core.js。すべての dajax 静的ファイルが静的ディレクトリでサービスを提供されることを確保するために、以下を実行してください　-

#　Filename　:　example.py
#　Copyright　:　2020　By　w3codebox
#　Author　by　:　ja.oldtoolbag.com
#　Date　:　2020-08-08
$python　manage.py　collectstatic

注　-　時には jquery.dajax.core.js が欠けていることがあります。その場合、ソースコードをダウンロードしてそれを静的フォルダーに配置してください。

アクセスすると以下の画面が見られます，　/myapp/dreamreal/ −

提出後、以下の表示画面が得られます　−

Django ファーストステップ Django RSS

Djangoチュートリアル

Django Ajax アプリケーション

Djangoを使用する-dajax