※この記事の続きです。
onclickイベントをトリガーにアラート出してみる。
非同期で何か情報を取ってくる足がかりを作りたいので、以下の処理を作りたいと思います。
- onclickイベントをトリガーにAjaxでサーバーに問い合わせる。
- 問い合わせた結果、文字列を返してアラート表示をさせる。
Ajaxを試すためにボタンを一つ追加します。
<a id="try-ajax" href="#" class="btn btn-lg btn-info">Try Ajax</a>
続いて、javascript側の処理を書きたいと思いますが、ここからjQueryをダウンロードして前回作成したstaticフォルダ配下に配置しておきます。cssとjsが同じフォルダ内にいるのは、違和感があるのでフォルダ構成も見直しています。
- staic
- css
- edinet.css
- js
- jquery-3.4.1.min.js
- css
フォルダ構成の見直しに対応して、cssの読み込み宣言も修正しています。
{% block extrahead %}
<link href="{% static 'css/edinet.css' %}" rel="stylesheet">
{% endblock %}
続いて、jsフォルダ配下にedinet.jsというファイルを作ります。
中身は、ボタンのonclickイベント発火するか確認するため、こんな処理です。
$(document).ready(function(){
$("#try-ajax").click(function() {
alert( "Click!" );
});
});
HTMLにjs読み込ませる設定を追加して試してみます。
{% block extrahead %}
<link href="{% static 'css/edinet.css' %}" rel="stylesheet">
<script type="text/javascript" src="{% static 'js/jquery-3.4.1.min.js' %}"></script>
<script type="text/javascript" src="{% static 'js/edinet.js' %}"></script>
{% endblock %}
javascriptの読み込み方は、こちらの記事を参考にさせていただきました。
Try Ajaxボタンを押すと「Click!」というアラートが表示されました。
お試しでAjax通信をさせる
続いて、Ajax呼び出しに対応するメソッドを準備します。
JSONで文字列を返したいと思います。こちらの記事を参考にさせていただきました。
def try_ajax(request):
data = {"message" : "Success"}
return JsonResponse(data)
無事通信出来た際には、「Success」と表示されます。
続いてURLマッピングをします。
urlpatterns = [
# 省略
path('try-ajax', views.try_ajax, name='try_ajax'), #追加
]
できれば、URLマッピングが修正された際に追随させたいのでname要素に相対URLを仕込んでおきます。
<a id="try-ajax" name="{% url 'try_ajax' %}" href="" class="btn btn-lg btn-info">Try Ajax</a>
そして、onclickイベント発火時にAjax通信されるようにjsを修正です。
$(document).ready(function(){
$("#try-ajax").click(function() {
targetUrl = window.location.href + this.name.replace("/","");
$.ajax({
type: "GET",
url: targetUrl,
dataType: "json"
}).done(function(data) {
alert(data.message);
});
});
});
これで実行すると、無事「Success」の文言が確認できました。
※「部分ViewをAjaxで差し替える。」については、Windows環境だと起こるバグに出くわし、さっぱり上手く行きませんでした。。すぐにbugfixしそうにないので、いったんAjaxテーマの投稿はここまでとしたいと思います。