2009-09-18 15 views
46

私はDjangoとApacheを使ってWebページを提供しています。私のJavaScriptコードには、現在、選択肢のメニューからのユーザーの選択に基づいて、さまざまなHTMLウィジェットに表示される値を持つデータオブジェクトが含まれています。私はこれらのデータをPython辞書から派生させたいと思います。私はHTMLにJavaScriptコードを埋め込む方法を知っていると思いますが、そのスクリプトにデータオブジェクトを埋め込み(その場で)するために、スクリプトの関数で使用できるようにするにはどうすればいいですか?Django経由でPythonデータをJavaScriptに渡す

別の言い方をすれば、私はPython辞書からJavaScriptオブジェクトまたは配列を作成し、そのオブジェクトをJavaScriptコードに挿入し、そのJavaScriptコードをHTMLに挿入したいと考えています。

この構造(JavaScriptコード内の変数に埋め込まれたデータなど)は最適ではないと思われますが、初心者として私はその選択肢を知らないのです。私はDjangoのシリアライズ関数の書き方を見たことがありますが、最初はJavaScriptコードにデータを渡すまでは役に立ちません。

私は(まだ)jQueryのようなJavaScriptライブラリを使用していません。

+0

可能な複製(http://stackoverflow.com/questions/298772/django-template-variables-and-javascript) –

答えて

69

あなたのDjangoテンプレートにはたくさんのJavaScriptを入れないことをお勧めします。特に、プロジェクトが拡大するにつれて、書き込みやデバッグが難しい傾向があります。代わりに、テンプレートをロードする別のスクリプトファイルにすべてのJavaScriptを記述し、単にテンプレートにJSONデータオブジェクトだけを含めてみてください。これにより、JavaScriptアプリケーション全体をJSLintなどで実行したり、縮小したりするなどの作業を行うことができ、Djangoアプリケーションに依存することなくスタティックなHTMLファイルでテストすることができます。 simplejsonのようなライブラリを使用すると、面倒なシリアライゼーションコードの作成に費やす時間も節約できます。

あなたはAJAXアプリケーションを構築している、これは単にこのように行われる可能性があることを想定していない場合は、次の

ビューで:

テンプレートで
from django.utils import simplejson 


def view(request, …): 
    js_data = simplejson.dumps(my_dict) 
    … 
    render_template_to_response("my_template.html", {"my_data": js_data, …}) 

<script type="text/javascript"> 
    data_from_django = {{ my_data }}; 
    widget.init(data_from_django); 
</script> 

データの種類が重要であることに注意してください。my_dataが単純な番号であるか、フォーマットされた日付などのHTMLを含まない制御されたソースの文字列である場合、特別な処理は必要ありませんd。ユーザーが信頼できないデータを提供する可能性がある場合は、escapeまたはescapejsフィルターを使用して衛生的に処理し、cross-site scriptingの攻撃を防ぐためにJavaScriptがデータを安全に処理する必要があります。

日付については、どのように日付を渡すか考えてみることもできます。

:あなたは上記のスニペットの結果と time_t = {{ time_t }}ような何かをやったと仮定すると、JavaScriptで

time_t = time.mktime(my_date.timetuple()) 

ジャンゴでは:私はほとんどのUnixのタイムスタンプとして渡すすることが最も簡単な見つけました

my_date = new Date(); 
my_date.setTime(time_t*1000); 

最後に、UTCに注意してください。PythonとDjangoの日付関数がUTCでデータを交換し、ユーザーの現地時間からの煩わしさを避けることができます。

EDIT:javascriptのsetTimeはミリ秒単位で、time.mktimeの出力は秒単位であることに注意してください。だから私たちは1000倍にする必要があります

+0

ありがとうございます。私はCSSスタイルシートに似た、メディアファイルとしてjavascriptを提供する予定でした。これはjsにデータを埋め込むよりも良い解決策のようですが、私はいくつかのJSONを学び、データ要求を扱うためのサーバー側のコードを書く必要があります。 – chernevik

+0

良いアイデアのように聞こえますが、私が本当に気に入っている方法の1つは、JSONを返すDjangoビューを書くのは簡単です(これを頻繁に行う場合は、REST APIを作成するためにdjango-pistonを見てください)。そのように孤立した部品をテストしてください –

+0

私はこれを無視していません!私はちょうど私が実際にそれを使用するポイントにJavaScriptを書いて、提供することの私の知識を構築しています。私は現在、JSONを使用してメニュー選択の影響を受けるウィジェットを駆動するためにメタデータを渡すことを計画していますが、これはjavascriptデータ構造の作成とアクセスについてもっと学ぶ必要があります。 – chernevik

2

準最適です。 djangoのシリアライザを使ってJSONとしてデータを渡すことを検討しましたか?

+0

のようにこれを設定することができます頭字語に入る前にいくつかの基本を学びます。しかし、私はいくつかのJSONを学ぶことができますか、基本的な要素からソリューションを構築することができます。 – chernevik

3

.htmlテンプレート内に<script>タグを含めて、データ構造を構築することは便利ですが、テンプレート言語はHTMLだけでなく、Javascriptのオブジェクトリテラルも行うことができます。

ポールが正しい場合:jsonモジュールを使用してJSON文字列を作成し、その文字列をテンプレートに挿入するのが最善の方法です。それは引用の問題を最もよく扱い、深い構造を簡単に処理します。

1

this questionへの関連リンクを参照してください。 1つのオプションは、jsonpickleを使用して、PythonオブジェクトとJSON/Javascriptオブジェクトをシリアル化することです。それはsimplejsonをラップし、simplejsonによって受け入れられないものを処理します。

1

JavaスクリプトをDjangoテンプレートに埋め込むことは、ではなく、常に悪い考えです。

むしろ、このルールからいくつかの例外があるためです。

すべては、Java Scriptコードのサイトと機能によって異なります。

JSのような静的なファイルを持つ方がよいですが、問題は、別のすべてのファイルが別の接続/ GET /要求/応答メカニズムを必要とすることです。時には小さなもののために、2つのライナーは、コードをos JSは、これをテンプレートに入れて、バンはdjango templatetagsのメカニズムを使用する - あなたは他のテンプレートで使用することができます;)

オブジェクトについて - 同じ。あなたのサイトにAJAXの構築/ web2.0の好意があるなら、クライアント側にいくつかの数え上げ/数学演算を入れることができます。オブジェクトが小さい - テンプレートに埋め込まれている場合は、大きい応答の場合は別の接続で応答し、ユーザーのハング・ページを回避します。

+0

はい、djangoにjsonを組み込んでいます;)xml:Pを忘れてしまった – bluszcz

34

これに問題がある人は、jsonオブジェクトをテンプレートのセーフモードでレンダリングしていることを確認してください。手動で、私は私と思った[Djangoのテンプレート変数とJavascript]のこの

<script type="text/javascript"> 
    data_from_django = {{ my_data|safe }}; 
    widget.init(data_from_django); 
</script> 
関連する問題