知識の枝

"All is well"

Django&Ajax 出力内容にCSSを反映させる

約110日前 2021年7月10日17:15
デジタル
Django HTML CSS JavaScript

改訂履歴


2021/7/10 投稿

1. 背景


Djangoのアプリを開発する中でAjaxを使うようになりました。

Ajaxからのリクエストをviews.pyが受け取り、再びhtmlにレスポンスを返します。

返したデータを加工してhtml上に表示させる際、CSSを反映させたいと考える人は多いと思います。

今回はAjaxでviewsから受け取ったデータにCSSを反映させる方法を解説します。


2. ゴール


非同期通信で更新された内容にCSSが適用されるようにする。


3. はじめに


皆さんはどのようにviews.pyから返ってきたデータを処理していますか?

下記のような例を考えてみましょう。

「受け取ったデータ配列をfor文で抜き出し、pタグで囲んで表示する」

スクリプト内ではこのように書きます。

Ajax処理の後半(views.pyからデータを受け取った後)
done(response => {
for (const data of response.data_lists) {
const item = $('<p>', { text: data });
$('#add_space').append(item);
}
});
「data_lists」という配列をviewsからresponseで受け取り、for文で1つずつ取り出し「data」という変数に格納しています。

その「data」を<p>タグで囲い、その要素を「id=add_space」となっているタグの中に append で追加します。

<p>タグで囲った中身は文字列ですので、そのままhtmlに出力されます。


例えば下記のように<span>タグで文字列を囲ったとします。
const item = $('<p>', { text: '<span>' + data + '</span>' });
この場合、波括弧{}の中身が全て「文字列」として扱われる為、html上では波括弧の中身がそのまま表示されてしまいます。



この<span>タグの文字色を赤くしたい場合、「style="color: red;"」「class="●●"」として装飾を施したいところですが、文字列と認識されていてはダメですね。

次項でスタイルやCSSの適用方法を解説します。


4. CSSやstyleを適用する


解決策は簡単です。

波括弧{}の中身を「文字列」として認識させず、「html文」として認識させれば良いのです。


先ほどのスクリプトを下記のように書き換えてみましょう。
const item = $('<p>', { html: '<span>' + data + '</span>' });
「text」の部分を「html」に書き換えただけです。

ついでに書き換えた効果が分かり易いようにスタイルで文字色を赤色にします。
const item = $('<p>', { html: '<span style="color: red;">' + data + '</span>' });
さてどうなったでしょうか?



思惑通り文字にスタイルが適用されています!

同様にclassを指定しても良いですし、idを付けても良いと思います。


htmlに追加するタグを作成する部分は色々な書き方があります。

googleで「jQuery タグ 追加」と検索すると出てきます。

例えば下記のようにスクリプトを書き換えても同じ動作をします。
done(response => {
for (const data of response.data_lists) {
$('#add_space').append($('<p>').append('<span style="color: red;">' + data + '</span>'));
}
(動作確認済)



5. さいごに


とても簡単にスタイルを適用させることができましたね!

Javascriptについてもっと勉強すれば、より良い方法や応用が見つかるかもしれません。

私もJavascriptの学習に着手してみたいと思います。

お疲れ様でした。