DjangoとjQueryでAjaxする

最近、フロントエンドもやるようになり、~~いまさら~~jQueryでAjaxを使うことに。。

右も左も分からないので、その際の備忘録。

コードはこんなかんじ

formで入力を受け付けて、submitの際に、Ajaxでの通信に切り替える感じ

成功するとdiv配下に、帰ってきたHTMLを挿入する。

<div id="contents"></div>

<form class="form-horizontal" method="post" action="...">
  {% csrf_token %}
  <button type="submit" class="btn">Submit</button>
</form>

$("from").submit(function(event){
    // HTMLでの送信をキャンセル
    event.preventDefault();

    var $form = $(this);
    $.ajax({
        url: $form.attr('action'),
        type: $form.attr('method'),
        data: $form.serialize(),
        timeout: 10000,
        beforeSend: function(xhr, settings) {
           xhr.setRequestHeader("X-CSRFToken", $("input[name='csrfmiddlewaretoken']").val());
        },
    }).done(function(data, textStatus, jqXHR){
        // 成功したときの処理

        var $data = $(data);
        var $root = $('#contents');
        $root.empty();
        $root.append($data);
        $data.ready(function(){
            // DOMを操作をし終えた後にする処理
        });
    }).fail(function(jqXHR, textStatus, errorThrown){
       // 失敗したときの処理
    });
});