[Ajax Quickstart] Ajax quickstart template #ajax

base.html

<!-- thanks: https://qiita.com/zakiyamaaaaa/items/bdda422db2ccbaea60d9 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<button id="ajax">ajax</button>
<div class="result"></div>

<script type="text/javascript">

  $(function(){
    // Ajax button click
    $('#ajax').on('click',function(){
      $.ajax({
        url: "{% url 'ajax_article_list' %}",
        type:'GET',
        data:{
          'userid':$('#userid').val(),
          'passward':$('#passward').val(),
        }
      })
      // Ajaxリクエストが成功した時発動
        .done( (data) => {
          $('.result').html(data);
          console.log(data);
        })
      // Ajaxリクエストが失敗した時発動
        .fail( (data) => {
          $('.result').html(data);
          console.log(data);
        })
      // Ajaxリクエストが成功・失敗どちらでも発動
        .always( (data) => {
        });
    });
  });

</script>