Ajax を Django アプリケーションに統合するにはどうすればいいですか? 質問する

Question

これは完全に SO の精神に沿ったものではないですが、私はこの質問が大好きです。なぜなら、私も始めたときに同じ問題を抱えていたからです。そこで、簡単なガイドを差し上げます。明らかに、あなたはその背後にある原理を理解していません (これを侮辱と受け取らないでください。もし理解していたら、こんな質問をしないでしょう)。

Django はサーバーサイドです。つまり、クライアントが URL にアクセスすると、viewsその 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 呼び出しを実行すると、その場所にアクセスしたユーザーと同じデータが取得されます。

たとえば、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 への呼び出しが行われます。
成功した場合 (ステータスコード 200)、成功のための関数を実行し、受信したデータを通知します。
失敗した場合は、別の機能を実行します。

ここで何が起こるでしょうか? 「hello world」という警告が表示されます。 home に AJAX 呼び出しを行うとどうなるでしょうか? 同じで、という警告が表示されます<h1>Hello world, welcome to my awesome site</h1>。

言い換えれば、AJAX 呼び出しに新しい点は何もありません。これは、ユーザーがページを離れることなくデータや情報を取得できるようにする方法にすぎず、Web サイトのスムーズで非常にすっきりしたデザインを実現します。注意すべきガイドラインがいくつかあります。

jQuery を学びましょう。これはいくら強調しても足りません。受け取ったデータの処理方法を知るには、少し理解する必要があります。また、基本的な JavaScript 構文も理解する必要があります (Python とそれほど変わらないので、すぐに慣れます)。強くお勧めします。Envato の jQuery のビデオチュートリアル彼らは素晴らしいので、あなたを正しい道に導いてくれるでしょう。
JSON はいつ使うのでしょうか? Django ビューによって送信されるデータが JSON 形式である例を多数目にすることになるでしょう。その方法については詳しく説明しませんでした。どのように行うかは重要ではなく(説明は山ほどあります)、いつ行うかの方がはるかに重要だからです。その答えは、JSON データはシリアル化されたデータであるということです。つまり、操作可能なデータです。前述したように、AJAX 呼び出しは、ユーザーが自分で行ったかのように応答を取得します。ここで、HTML 全体をいじりたくないので、代わりにデータ (おそらくオブジェクトのリスト) を送信したいとします。JSON はこれに適しています。JSON はデータをオブジェクトとして送信するため (JSON データは Python 辞書のように見えます)、反復処理したり、役に立たない HTML をふるいにかける必要がなくなる他の操作を実行したりできます。
最後に追加します。Web アプリを構築して AJAX を実装したい場合は、まず、アプリ全体を AJAX なしで構築します。すべてが機能していることを確認します。その後、AJAX 呼び出しの記述を開始します。これは、多くのことを学ぶのに役立つ優れたプロセスです。
Chrome の開発者ツールを使用します。AJAX 呼び出しはバックグラウンドで行われるため、デバッグが非常に難しい場合があります。Chrome 開発者ツール (または Firebug などの類似ツール) などを使用してconsole.logデバッグする必要があります。詳細は説明しません。Google で検索して調べてください。非常に役立つと思います。
CSRF の認識。最後に、Django の post リクエストにはが必要であることを覚えておいてくださいcsrf_token。AJAX 呼び出しでは、多くの場合、ページを更新せずにデータを送信する必要があります。おそらく、を送信するのを忘れていたことにようやく気づくまでに、何らかの問題に直面するでしょう。csrf_tokenこれは、AJAX と Django の統合における初心者にとっての既知の障害ですが、うまく機能させる方法を学べば、簡単です。

頭に浮かぶのは以上です。これは非常に幅広いテーマですが、確かに、十分な例がないかもしれません。ゆっくりと進んでいけば、いつかは理解できるようになります。

Answer 1