Django ajax обновление данных на странице

Имеем веб страницу index.html, на которой необходимо обновлять данные (без перезагрузки всей страницы), т.е. сделать AJAX запрос. На странице имеется поле ввода номера телефона и подгрузка другой страницы - {% include 'phone-filter.html' %}


        <form>
          <div>
            <label>Номер:</label>
            <input type="text" id="phone" placeholder="Введите номер телефона">
          </div>
        </form>

        <div class="phone-filter">
          <!-- Подгружаю номера телефонов из фильтра -->
          {% include 'phone-filter.html' %}
        </div>

Код страницы phone-filter.html, это то что будет обновлятся на странице index.html

{% if phonenumbers%}
  <ul>
  {% for phonenumber in phonenumbers %}
    <li>
      <a href="{{ phonenumber.get_absolute_url }}">{{ phonenumber }}</a>
    </li>
  {% endfor %}
  </ul>
{% else %}
  По вашему запросу ничего не найдено
{% endif %}


Добавляю jQuery скрипт на страницу index.html, который обрабатывает ввод данных поля id="phone"

<script>
    $("#phone").keyup(function(){
      console.log(this.value);
      $('.phone-filter').html('').load(
        "{% url 'phone-filter' %}?phone=" + this.value
      );
    });
</script>

т.е. при вводе данных в поле phone будет грузиться страница phone-filter.html (тот самый AJAX запрос, который и нужно реализовать)

В urls.py добавляю

    url(r'^phone-filter/', views.phone_filter, name='phone-filter'),


В views.py создаю функцию ответа за запрос

def phone_filter(request):
    if request.method == 'GET':
        queryset = PhoneNumber.objects.filter(is_deleted = False)
        phone = request.GET.get('phone')
   
        if phone:
            queryset = queryset.filter(phone__contains=phone)
   
        response = render(
            request,
            'phone-filter.html',
            {'phonenumbers':queryset}
        )
    
        return response


Это всё, что нужно сделать для динамической AJAX подгрузки данных из базы, без обновления всей страницы.