Как передать переменную javascript в html в views.py?

В настоящее время я пытаюсь сделать сайт, используя django. И я столкнулся с проблемой, как я написал в заголовке.

То, что я хочу сделать, выглядит следующим образом,

во-первых, на странице магазина отображаются все товары. Но, когда пользователь выбирает название бренда в выпадающем меню, страница магазина должна показывать товары только этого бренда.

Для этого мне нужно получить переменную, которую пользователь выбирает в выпадающем меню, и моя функция представления должна выполняться одновременно.

Пожалуйста, сообщите мне, как я могу решить эту проблему.

я сделал выпадающий список в html как показано ниже.

<shop_test.html>

<form action="{% url 'shop' %}" method="get" id="selected_brand">
<select name="selected_brand" id="selected_brand">
    <option value="ALL">Select Brand</option>
    <option value="A">A_BRAND</option> 
    <option value="B">B_BRAND</option>
    <option value="C">C_BRAND</option>
</select>
</form>

<script type="text/javascript">
    $(document).ready(function(){
        $("select[name=selected_brand]").change(function () {
        $(".forms").submit();

        });
    });
</script>

и мой views.py выглядит следующим образом.


def ShopView(request):
    brand_text = request.GET.get('selected_brand')

    if brand_text == None:
        product_list = Product.objects.all()
    elif brand_text != 'ALL':
        product_list = Product.objects.filter(brand=brand_text)
    else:
        product_list = Product.objects.all()

    context = {
                'brand_text': brand_text,
                'product_list': product_list,
            }
    return render(request, 'shop_test.html', context)

Я много раз пытался загуглить, но так и не смог решить эту проблему.

base.html

{% load static %}

<!DOCTYPE html>
<html lang='en'>
    <head>
        <title>{% block title %}My amazing site{% endblock %}</title>
        <meta charset='utf-8'>
        <link rel="stylesheet" href="{% static 'base.css' %}">
    </head>

    <body>
        <div id="content">
            {% block content %}{% endblock %}
        </div>
    </body>

    <footer>
        {% block script %}{% endblock %}
    </footer>
</html>

blank.html

{% extends 'base.html' %}

{% block content %}
    <form action="{% url 'core:pass-variable-js' %}" method="get" onChange=sendForm() id="selection_form">
        <select name="selected_brand" id="selected_brand">
            <option value="ALL" {% if brand == "ALL" %}selected{% endif %}>Select Brand</option>
            <option value="A" {% if brand == "A" %}selected{% endif %}>A_BRAND</option> 
            <option value="B" {% if brand == "B" %}selected{% endif %}>B_BRAND</option>
            <option value="C" {% if brand == "C" %}selected{% endif %}>C_BRAND</option>
        </select>   
    </form>

    {% for product in products%}
    <div>
        <p>Product: {{ product.name }}<br>Brand: {{ product.brand }}</p><br>
    </div>
    {% endfor %}
{% endblock %}

{% block script %}
    <script>
        function sendForm() {
            document.getElementById("selection_form").submit();
        }
    </script>
{% endblock %}

views.py

def pass_js_variable(request):
    brand = 'ALL'
    products = Product.objects.all()

    if request.GET.get('selected_brand'):
        brand = request.GET.get('selected_brand')
        match brand:
            case 'ALL':
                products = Product.objects.all()
            case default:
                products = Product.objects.filter(brand=brand)

    context = {'brand': brand, 'products': products}
    return render(request, 'blank.html', context)

Технически мы не передаем переменную JS. Мы просто извлекаем переменную из объекта запроса.

На самом деле, если мы используем JS для отправки значения с помощью AJAX, основным отличием будет то, что страница НЕ будет перезагружена.

Вернуться на верх