【Django × Ajax】ページの更新せずに内容を変える

from django.urls import path

from . import views

urlpatterns = [
    # ... 略 ...
    path('book-title/', views.BookTitleView.as_view(), name="book_title"), 
]

from django import forms

class BookTitleForm(forms.Form):
    keyword = forms.CharField(label='キーワードを入力してください')

<h2>書籍を調べよう</h2>
<form action="" method="post">
    {% csrf_token %}

    {% for field in form %}
    <div class="formContent">
        <p>{{ field.label_tag }}</p>
        {{ field }}
        {{ field.errors }}
    </div>
    {% endfor %}
    <button type="submit">送 信</button>
</form>

<div id="result">
    <!-- 取得した書籍情報をここに追加していく -->
</div>

<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script>
    // 送信ボタンにイベントリスナーを設置。内部にAjax処理を追加。
    $('form').submit(function(event) {
        // submitイベントの発生元のフォームが持つデフォルトの動作をキャンセルできる。
        // これを記述することで、送信ボタンを押した際にリロードされてしまうのを妨げる（prevent）ことができる。
        event.preventDefault();

        var form = $(this);
        $.ajax({
            url: form.prop('action'), 
            method: form.prop('method'), 
            data: form.serialize(), 
            timeout: 10000, 
            dataType: 'json', 
        })
        .done(function(data) {
            $.each(data.title, function(index, value) {
                $('#result').append('<p>' + value + '</p>');
            });
            $('#result').append('<p><br><br></p>');
        });
    });
</script>

import json
import requests
from django.urls import reverse_lazy
from django.views import generic
from django.http import HttpResponse

from .forms import BookTitleForm

class BookTitleView(generic.FormView):
    template_name = 'book_title.html'
    form_class = BookTitleForm
    success_url = reverse_lazy('cafe_app:ajax')

def get_title(self, keyword):
    """ APIを叩いて書籍情報を取得する """

    # エンドポイントURL
    url = "https://www.googleapis.com/books/v1/volumes?q={}"

    # データ取得
    res = requests.get(url.format(keyword))
    res_json = json.loads(res.content)

    # 取得したデータからタイトルのみをリスト化
    title_list = [item['volumeInfo']['title'] for item in res_json['items']]
    
    return title_list

def post(self, request, *args, **kwargs):
    form = self.get_form(self.form_class)
    if form.is_valid():
        if request.headers.get('x-requested-with') == 'XMLHttpRequest':
            """ Ajax処理を別メソッドに切り離す """

            return self.ajax_response(form)
        
        # Ajax以外のPOSTメソッドの処理
        return super().form_valid(form)
    else:
        # フォームバリデーション通過できなかった場合
        return super().form_invalid(form)

def ajax_response(self, form):
    # フォーム入力した「キーワード」を取得する
    keyword = form.cleaned_data['keyword']
    
    # 「キーワード」をもとに、書籍情報を取得する
    title_list = self.get_title(keyword)

    # JSON形式にして渡す
    return HttpResponse(json.dumps({
        "title": title_list
    }))

# タイトルの配列
title_list = ['さるかに合戦', '桃太郎', '浦島太郎']

# こうではなくて
return HttpResponse(json.dumps({
    "title": title_list
}))

# こうしてた
return HttpResponse(title_list)