DjangoとjQueryをAjaxで連携させたいのですが

[satat...@gmail.com]

DjangoとjQueryの連携方法が分かりません。
実装したいことは以下の通りです。
1. データベースに接続してデータを取得
2. ページをレンダリング
3. そのページ内にあるテキストボックスにデータベースから得た情報を利用してオートコンプリート機能を実装

コードは以下のように書きました。
view.py
http://codepad.org/TSXHfVDs
tameshi.html
http://codepad.org/F7y0BSmT

ここで分からないことが数点あります。
まずview.pyですが、レンダリング時にJSONデータも送らなければ自分のやりたいことは出来ないと思います。
しかし、def tameshi()内にdef ajax()の内容を記述してしまうとreturn文が2つになってしまいます。
どのようにすればレンダリングしつつもJSONデータをAjaxで渡せるのでしょうか?

次にtameshi.htmlですが、jQueryの部分の書き方が分かりません。
まずは$.ajax()のurlと$.getJSON()の第一引数に関してですが、何を入れていいのか分かりませんでした。
何か別ファイル(sample.json)にJSONデータを格納していれば、{{STATIC}}sample.jsonのように指定するだけで出来ます。
しかし今回はview.py内からreturn HttpResponse(json.dumps(data), content_type = "application/json")のように直接データを送っています。
フレームワークDjangoの場合は自ページであってもurlの指定方法が分かりにくいです。
以前悩んだことがあったのですが、Djangoでは相対リンクはHTML内に書くことは不可能だと思います。

そして、$.ajax()のdataにいったい何を指定すればいいのかが見当も付きませんでした。


疑問点は以上なのですが、アドバイス頂けましたら幸いです。
よろしくお願い致します。

Django: 1.6.2
Python: 2.6
jQuery: 1.11.1

[Hiroki Kiyohara]

こんにちは、清原です。

オートコンプリートに対応した入力欄を作りたいということでよろしいですかね。
よくある内容で私も何度か作ったことがあるので協力できればと思います。

今回のようなオートコンプリートの入力欄を作る場合、jqueryUIのautocompleteや、select2.jsなどのライブラリの利用をおすすめします

* jqueryUI autocomplete: http://jqueryui.com/autocomplete/
* select2.js: http://ivaynberg.github.io/select2/

これをうまく使えばオートコンプリート側の実装は必要なくなります。
あとは「どのようにして候補のデータを上記ライブラリに渡すか」という問題になりますね。
おそらくそこが疑問の点かと思いますが、2通りほど方法があります

* Ajaxで取得する
* テンプレートで直接渡す

Ajaxで取得する場合は、javascript側からjqueryの$.ajaxなどを使って動的に取得させます。
Django側では必要なデータをJSONで返すViewを別に用意してあげれば良いと思います。
(jqueryのajaxの使い方についてはこちらが参考になります。 http://api.jquery.com/jquery.ajax/)

テンプレートで直接渡す場合、HTML内にオートコンプリート用のライブラリを呼び出す処理を書いて、そのJavaScriptに直接テンプレートからデータを置くこともできます。
DjangoとのFormライブラリとの連携をうまくやろうとするとDjangoのFormやWidgetの拡張が必要になります。

あと余談ですが利用されているライブラリ等のバージョンが古いようですので、最新のものをおすすめします。

[satat...@gmail.com]

清原さん、ご回答ありがとうございました。

自分が一番苦労したのが、Ajax用のレンダリングはどのようにするかということでした。

これはAjaxにてデータを発するページと取得したいページを分けて、取得したいページに送るだけだったようで、それで解決致しました。

しかし、JSONデータを取得する際に色々と不都合が出てきてしまっていて、それを解決できずにいます。

別の問題となってしまったため、別の質問として投稿させていただきたいと思います。

申し訳ございません。

ご回答まことにありがとうございました。

2014年10月3日金曜日 17時30分18秒 UTC+9 Hiroki Kiyohara: