[解決済み】DjangoアプリケーションにAjaxを統合するには？

質問

私はDjangoの初心者であり、Ajaxのかなり初心者です。私は、この2つを統合する必要があるプロジェクトに取り組んでいます。この2つの背後にある原理は理解しているつもりですが、この2つを一緒に説明する良い方法を見つけられませんでした。

この2つを統合することで、コードベースがどのように変化しなければならないか、どなたか簡単に説明していただけませんか？

例えば HttpResponse それとも、Ajaxを使用することによって、レスポンスが変わらなければならないのでしょうか？その場合、リクエストに対するレスポンスがどのように変わらなければならないか、例を挙げて教えていただけませんか？もし違いがあるのなら、私が返しているデータはJSONです。

どのように解決するのですか？

完全にSOの精神に則っているわけではないにせよ、この質問は大好きです！私も始めた頃は同じように困っていたので、簡単にご案内します。明らかにあなたはそれらの背後にある原理を理解していません（悪気はないのですが、理解していれば質問することはないでしょう）。

Djangoは サーバーサイド . つまり、クライアントがあるURLにアクセスしたとすると、その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');
    }
}); 

大まかな流れはこうです。

1. 呼び出しは、URL 127.0.0.1:8000/hello を、あたかも新しいタブを開いて自分でやったかのように表示します。
2. 成功した場合（ステータスコード200）、受信したデータを警告する成功用の関数を実行します。
3. 失敗した場合は、別の関数を実行します。

さて、ここで何が起こるでしょうか？hello world'と書かれたアラートが表示されるでしょう。AJAXでhomeを呼び出すとどうなるでしょうか？同じように、次のような内容のアラートが表示されます。 <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はデータをオブジェクトとして送信し（JSONデータはpythonの辞書のように見えます）、それを反復処理したり、無駄なhtmlを選別する必要がないような他の処理を行うことができるからです。
3. 最後に追加する . ウェブアプリを構築してAJAXを実装したい場合、自分自身のためになることをしましょう。まず、アプリ全体を、AJAXをまったく使わずに構築します。すべてが機能していることを確認します。それから、そしてそのときだけ、AJAXの呼び出しを書き始めましょう。これは、あなたが多くのことを学ぶのに役立つ良いプロセスです。
4. クロームのデベロッパーツールを使用する . AJAXの呼び出しはバックグラウンドで行われるため、デバッグが非常に困難な場合があります。クロームデベロッパーツール（またはfirebugのような類似のツール）を使用する必要があり console.log のものを使ってデバッグします。詳しくは説明しませんので、ググって調べてみてください。そうすれば、とても助かると思います。
5. CSRFの認識 . 最後に、Django のポストリクエストには csrf_token . AJAXの呼び出しでは、多くの場合、ページを更新することなくデータを送信したいと思うでしょう。を送信するのを忘れていたことに気づくまで、おそらくいくつかの問題に直面するでしょう。 csrf_token . これは AJAX と Django の統合における初心者の障害として知られていますが、うまく機能させる方法を学べば、それはとても簡単なことなのです。

以上、思いつくままに書いてみました。膨大なテーマですが、そうですね、事例が少ないのでしょう。ただ、少しずつ、いずれは理解できるようになるはずです。