Django+Ajax通信でブラウザの一部を更新しようとしたら、JSONの生データが表示される

Question

前提

Djangoで、Ajax通信でページの一部を更新したいと考えています。

Ajaxでデータを送ってDjangoで処理したあとに、ページの一部（includeタグで取り込んだテンプレート）を更新したいのですが、とりあえずコンソールに送られてきたデータを表示させようと思っていました。
しかし、ブラウザには元のページではなく送られてきたJSONの生データが表示されてしまいます。
エラーがある場合はコンソールにエラーを表示させるようにしているのですが、コンソールにはエラー等は表示されません。

JSONのerror:falseは、Djangoに送られたデータにバリデーションエラーがある場合にはerror:trueを表示させるようにしているため。

ブラウザにJSONデータが表示されるということは、Djangoで処理後に一応はデータを送っているのだとは思います。
表示されるJSONのデータには処理後の値が入っています。

初学者故、コード自体が拙いところが多いと思いますが、お願いいたします。

実現したいこと

• ブラウザ上にJSONの生データを表示させないようにしたい
• ページの一分の更新を実現させたい

発生している問題・エラーメッセージ

エラーは表示されていません。
jqXHR : {"readyState":0,"status":0,"statusText":"error"}
errorThrown : undefined

該当のソースコード

from django.db import models
import uuid

class Clients(models.Model):
    """顧客情報"""
    id = models.UUIDField(primary_key=True, editable=False, default=uuid.uuid4)

    name = models.CharField(verbose_name="名前", max_length=50, blank=False, null=False)

    name_kana = models.CharField(verbose_name="ナマエ", max_length=50, blank=False, null=False)

class Records(models.Model):
    """来店情報"""
    id = models.UUIDField(primary_key=True, editable=False, default=uuid.uuid4)

    client = models.ForeignKey(Clients, on_delete=models.CASCADE, related_name="related_client")

    visit_date = models.DateField(verbose_name="日付", null=False, default=timezone.now)

    staff = models.ForeignKey(CustomUser, null=True, on_delete=models.SET_NULL, related_name="related_records_store")

class CreateRecordFrom(forms.ModelForm):
    class Meta():
        model = models.Records
        exclude = ["client", "staff"]

    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        """bootstrapのclass付与"""
        self.fields["visit_date"].widget.attrs.update({"class": "form-control", "id": "datepicker_current_record"})

class VisitedDateForm(forms.Form):
    Visited_date = forms.CharField(
        widget=forms.TextInput(
            attrs={
                "class": "form-control col-4 mb-2",
                "id": "txt_visitedDate",
                "readonly": "readonly"}),
        label="",
    )

class TabView(LoginRequiredMixin, generic.edit.ModelFormMixin, generic.View):
    def get(self, request, *args, **kwargs):
        ~省略~

    def post(self, request, *args, **kwargs):
        if "btn_register_record" in request.POST:
            ~省略~

        if "add_tabs" in request.POST:
            json = {"error": True}
            form_date = forms.VisitedDateForm(request.POST)

            if not form_date.is_valid():
                print("Validation Error")
                return JsonResponse(json)

            json["error"] = False

            # URLからPKを取得して顧客のモデルをフィルタリング
            client_info = models.Clients.objects.get(pk=self.kwargs['pk'])

            # 取得したデータを変数にし、日付をdate型に変換
            visited_date = date.fromisoformat(
                form_date.cleaned_data["Visited_date"])

            # 過去の来店履歴を取得
            post_rec = models.Records.objects.select_related("client", "staff").get(
                client__exact=client_info, visit_date__exact=visited_date)

            context = {"post_record": post_rec}
            content = render_to_string(
                "app_records/tab_post_record.html", context, request
            )
            json["content"] = content

            return JsonResponse(json)

{% extends 'base.html' %}
{% load static %}
{% block header %}
<!--Bootstrap、JQuery、JQueryUI、Popper、Javascript Cookie library、Javascript CSRFトークンの読み込み-->
    ~省略~
{% endblock %}

{% block main %}
<!--BootstrapのタブUIを使用-->
<!--ボタンクリックでタブを追加できるようにした-->

<div class="container">
  <div class="card mb-3">
    <div>
      <main class="p-3">
        <!-- BootstrapタブUI -->
        <ul id="tab_elements" class="nav nav-tabs" role="tablist">
          <li class="nav-item" role="presentation">
            <a href="#tab_info" id="a_tab_info" class="nav-link active" role="tab" data-bs-toggle="tab" aria-selected="true">来店情報</a>
          </li>
          <li class="nav-item">
            <a href="#tab_today" id="a_tab_today" class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="true">当日来店情報</a>
          </li>
          <li class="nav-item">
            <a href="#tab_today" id="a_tab_today" class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="true">過去の来店情報</a>
          </li>
        </ul>
        <!-- タブの中身 -->
        <div id ="tab_contents" class="tab-content">
          <!--初回来店情報-->
          <div id="tab_info" class="tab-pane active" role="tabpanel" aria-labelledby="a_tab_info">
            <div class="container">
              {% include "app_records/tab_firstvisit.html" with object=client_info %}
            </div>
          </div>
          <!--当日来店情報-->
          <div id="tab_today" class="tab-pane" role="tabpanel" aria-labelledby="a_tab_today">
            <div class="container">
              {% include "app_records/tab_record_create.html" %}
            </div>
          </div>
          <!--過去の来店情報-->
          <div id="tab_post" class="tab-pane" role="tabpanel" aria-labelledby="a_tab_post">
            <div class="container">
              {% include "app_records/tab_post_record.html" %}
            </div>
          </div>
        </div>
      </main>
    </div>
  </div>
</div>
{% endblock %}

{% block js%}
<script>
  //DatePicker_post_recordの設定
  //過去の来店日をDatePicker上に色付けして表示
  ~省略~

  //過去の来店情報の参照機能
  //日付を取得しajaxでviews.pyに送って処理する
  //返ってきた値を参照して動的にタブを追加する（タブは5つまで追加可能）
  $(function () {
    $("#add_tabs").on("click", function () {
            $.ajaxSetup({
              ~省略~
            });

            //ajaxでviewデータを送信
            function post_date() {
              const form_element = "#form_visitedDate";
              const data = new FormData( $(form_element).get(0) )
              const url = $(form_element ).prop("action");
              const method = $(form_element ).prop("method")

              $.ajax({
                url: url,
                type: method,
                data: data,
                processData: false,
                contentType: false,
                dataType: "json"
              }).done(function(data) {
               if (data.error){
                 console.log("ERROR");
               }
               else{
                 //処理
                 //$("#content_area").html(data.content);
                 console.log(data.content)
                }
              }).fail( function(jqXHR, textStatus, errorThrown) {
                        console.log("ajax通信に失敗しました");
                        console.log("jqXHR : " + JSON.stringify(jqXHR));
                        console.log("textStatus : " + textStatus);    // タイムアウト、パースエラー
                        console.log("errorThrown : " + errorThrown.message);
                        console.log("URL : " + url);
          });
      };
    });
  });

</script>
{% endblock %}

<!--初診情報と来院情報-->
<div class="row">

  <!--左側-->
  <div class="col">
    <div class="card border-0">
      <div class="card-body">
        <div class="row">
          <div class="col-4">
            <div class="form-floating mb-3">
              <input type="text" class="form-control" readonly="readonly" id="zip" value="{{ object.name|default:'-' }}">
              <label for="zip">氏名</label>
            </div>
          </div>
          <div class="col-8">
            <div class="form-floating mb-3">
              <input type="text" class="form-control" readonly="readonly" id="address" value="{{ object.name_kana|default:'-' }}">
              <label for="address">シメイ</label>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!--右側-->
   <div class="col">
     <div class="card border-0">
       <div class="card-body">
         <div class="card border-0 mb-3">
           <p>来店履歴</p>
           <div class="mb-2" id="datepicker_post_record"></div>
             <form id="form_visitedDate" action="" method="POST">
             {% csrf_token %}
             <input type="text" name="Visited_date" class="form-control col-4 mb-2" id="txt_visitedDate" readonly="readonly" required="">
             <!--クリックでJquery-->
             <input class="col-4" type="submit" id="add_tabs" name="add_tabs" value="過去の来店情報を開く">
           </form>
         </div>
       </div>
     </div>
  </div>

</div>

試したこと

恐らくページ全体の更新が入ってるのかなと考えています。
AjaxのURLが違うのかと思い、他のhtmlファイルや一応view.pyを指定してみたがダメ。

参考にしたサイト
https://noauto-nolife.com/post/django-ajax/

補足情報（FW/ツールのバージョンなど）

Python 3.9
Django 4.1

Bootstrap 5
JQuery 3.6
JQueryUi 1.13

Answer 1

一応自己解決
動きはしましたが、原因が分からずじまいです。
なので、もし原因の分かる方がいらっしゃればご教授願います。

変更した点は

• inputのクラスをsubmitからbuttonに変更
• ajaxの処理を別の関数ベースビューで作り直す

ビューの中身自体は変更していないのですが、想定通りに動きました。

postの処理が複数あるためかと思い、一つにしてみたが動きませんでした。
submitのせいかと思いsubmit→buttonに変更したところ、Djangoからhttpレスポンスを返してないと言われました。
そのためpostメソッドの処理の問題かと思い、ドキュメントのpostのページを読んでみましたが、結局クラスベースビューではうまくいきませんでした。
クラスベースビューでAjax処理を記載したものが少なく、初学者の私には分かりませんでしたので、Ajaxをクラスベースで書くのは保留にしようと思います。