How to use ajax request to send friend request in views.py without reloading page

Question

With my limited Knowledge of ajax requests,I wrote this function which uses a get request to send friend requests when the add button is pressed,but when I run local host,the code seems not to be working and I can't figure out why.

Html template:

{% extends "posts/base.html" %}
{% load crispy_forms_tags %}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
 $('.btn btn-sm btn-circle mt-1 mb-1').click(function(){
      var values;
      values= $(this).attr("value");
            $.ajax({
                url: 'friends/add-friend/',
                data: {
                  username:values
                },
                type: "GET",
            });
        }
        </script>
        {% block content %}
<div class="container">
<div class="row">
<div class="col-sm-9 col-md-7 col-lg-5 mx-auto">
<form method="POST" class="form-signin">
            {% csrf_token %}
            <div class="form-label-group">
            {{ form|crispy }}
            </div>
            <button class="btn btn-lg btn-primary btn-block text-uppercase" type="submit">Search</button> 
            </form>
            <div>
            <article class="media content-section">
            <img class="rounded-circle article-img" src="{{ results.profile.image.url }}">
            <a class="mr-2" href="#">{{ results.username }}</a>
            <div class="media-body">
            <div class="article-metadata">
            <button class="btn btn-sm btn-circle mt-1 mb-1" onclick="add-friend" value="{{ results.username }}">+</button>
            </div>
              </div>
              </div>
            </div>
            </div>
            </div>
{% endblock content %}

Views.py:

from django.shortcuts import render
from .models import AddFriend
from django.contrib.auth.models import User
from users.models import Profile


def SearchDetail(request):
    Ruser= None
    if request.method == 'GET':
        username= request.GET['username']
        Ruser= User.objects.get(username=username)
        NewFriendRequest=None
        NewFriendRequest=AddFriend.objects.create(sender=request.user,receiver=Ruser)
        NewFriendRequest.save()
        messages.success(request, f'Your friend request has been sent successfully!')

Urls.py:

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('users.urls')),
    path('posts/home.html', p_views.PostsListView.as_view(), name='posts-home'),
    path('friends/search.html', f_views.search, name='friends-search'),
    path('friends/add-friend/', f_views.SearchDetail, name='friends-search-detail'),
]

Answer 1

Give this a try

<script>
$('.btn-circle').click(function(){ //fix jQuery class selector
    var values;
    values= $(this).attr("value");
    
    $.ajax({
        url: 'friends/add-friend/',
        data: {
            username:values
        },
        type: "GET",
    });
}); // you were missing closing braces here
</script>

Remove onclick="add-friend" from

<button class="btn btn-sm btn-circle mt-1 mb-1"  value="{{ results.username }}">+</button>

Ref