为什么我的Javascript无法检查用户名是否已经存在？

我对Javascript非常陌生，我正在尝试实现一些代码，这些代码将搜索用户名是否已经存在，然后在动态出现错误时显示错误，而不必点击submit，然后查找用户名是否已经存在。我试着实现一些JS，但不起作用。我做错了什么

reg.html

   {% extends "dating_app/base.html" %}
{% load bootstrap4 %}

{% block content %}


{% block javascript %}

    <script>

        $("#id_username").change(function () {

            var username = $(this).val();

            $.ajax({
            url: '/ajax/check_if_username_exists_view/',
            data: {
              'username': username
            },
            dataType: 'json',
            success: function (data) {
              if (data.is_taken) {
                alert("A user with this username already exists.");
              }
            }
          });

        });

    </script>

{% endblock %}
<br>
<h1 class="text-center"  style="color:#f5387ae6">Register to fall in love today!</h1>

    <form method="post" style="width:700px;margin:auto" action="{% url 'dating_app:register' %}" enctype="multipart/form-data" class= "form" >



        <div class="is-valid">
        {% bootstrap_form registration_form%}
        </div>
        {% csrf_token %}
        {% for field in bootstrap_form %}


            <p>


                {{field.label_tag}}
                {{field}}

                {% if field.help_text %}
                    <small style="color:grey;">{{field.help_text}}</small>

                {% endif %}

                {% for error in field.errors %}
                    <p style="color: red;">{{error}}"</p>
                {% endfor %}

            </p>


        {% endfor %}
        <div class="form-check">
            <input type="checkbox" id="accept-terms" class="form-check-input">
            <label for="accept-terms" class="form-check-label">Accept Terms &amp; Conditions</label>
        </div>
        <div>
            <br>
            <button type="submit">Register</button>
        </div>
    </form>


{% endblock content %}

url.py/检查用户名是否存在查看

def check_if_username_exists_view(request):
username = request.GET.get('username', None)
data = {
    'is_taken': User.objects.filter(username__iexact=username).exists()
    }
return JsonResponse(data)

    path('ajax/check_if_username_exists_view/', views.check_if_username_exists_view, name='check_if_username_exists_view'),

型号.py

 Class ProfileManager(BaseUserManager):



    def create_user(self, username, email,description,photo, password=None):
        if not email:
            raise ValueError("You must creat an email")
        if not username:
            raise ValueError("You must create a username!")
        if not description:
            raise ValueError("You must write a description")
        if not photo:
            raise ValueError("You must upload a photo")

        user = self.model(
                email=self.normalize_email(email),
                username = username, 
                description= description,
                photo= photo,

            )

        user.set_password(password)
        user.save(using=self._db)
        return user 


    def create_superuser(self, username, email,description,photo, password):
        user = self.create_user(
                email=self.normalize_email(email),
                password=password,
                username=username,
                description=description,
                photo=photo,

            )

        user.is_admin=True
        user.is_staff=True
        user.is_superuser=True
        user.save(using=self._db)
        return user




class Profile(AbstractBaseUser):

    class Meta:
        swappable = 'AUTH_USER_MODEL'


    email                       = models.EmailField(verbose_name="email")
    username                    = models.CharField(max_length=30, unique=True)
    date_joined                 = models.DateTimeField(verbose_name='date joined', auto_now_add=True)
    last_login                  = models.DateTimeField(verbose_name='last login', auto_now=True)
    is_admin                    = models.BooleanField(default=False)
    is_active                   = models.BooleanField(default=True)
    is_staff                    = models.BooleanField(default=False)
    is_superuser                = models.BooleanField(default=False)
    #what I added
    description                 = models.TextField()
    photo                       = models.ImageField(upload_to='profile_photo',blank=False, height_field=None, width_field=None, max_length=100)
    matches                     = models.ManyToManyField(settings.AUTH_USER_MODEL, related_name='+', blank=True)



    USERNAME_FIELD = 'username'
    REQUIRED_FIELDS = ['description','photo','email']


    objects = ProfileManager()


    def __str__(self):
        return self.username


    def has_perm(self, perm, obj=None):
        return self.is_admin


    def has_module_perms(self,app_label):
        return True

---

你可以在没有任何javascipt的情况下做到这一点，我可以帮你that@JuanMartinZabala它可以显示是否在不重新加载整个页面的情况下使用用户名？好的，让我看看。不管怎样，我以为你在尝试添加一个注册表格或类似的东西，不需要重新加载。你可以不需要任何javascipt就可以这样做，我可以帮你that@JuanMartinZabala它可以显示是否在不重新加载整个页面的情况下使用用户名？好的，让我看看。没关系，我以为你是想添加一张登记表或类似的东西，不需要重新加载