В Django как отправить контекст или переменные в JQuery?

Question

У меня есть Модель (Персоны), которую необходимо ввести с помощью ModelForm (PersonForm). models.py,

GENDER_CHOICES = [
    ('Male', 'Male'),
    ('Female', 'Female'),
]

MALE_CATEGORIES = [
    ('Male Category 1', 'Male Category 1'),
    ('Male Category 2', 'Male Category 2'),
    ('Male Category 3', 'Male Category 3'),
]

FEMALE_CATEGORIES = [
    ('Female Category 1', 'Female Category 1'),
    ('Female Category 2', 'Female Category 2'),
    ('Female Category 3', 'Female Category 3'),
]

def get_all_choices():
    all_choices = MALE_CATEGORIES
    all_choices+=FEMALE_CATEGORIES

    return all_choices

class Person(models.Model):
    name = models.CharField(max_length=50, unique=True)
    gender = models.CharField(max_length=7, choices=GENDER_CHOICES)
    category = models.CharField(max_length=20, choices=get_all_choices())

forms.py,

class PersonForm(ModelForm):

    class Meta:
        model = Person

        fields = [

            'name',
            'gender',
            'category',

        ]

views.py,

def personform_page(request):

    context = {}

    if request.method == 'POST':
        personform = PersonForm(request.POST)

        if personform.is_valid():
            personform.save()
            return redirect('personform_page')

        context['personform'] = personform

    else:
        personform = PersonForm()
        context['personform'] = personform

    context['male_categories'] = MALE_CATEGORIES
    context['female_categories'] = FEMALE_CATEGORIES

    return render(request, 'app1/personform_page.html', context=context)

PersonForm имеет зависимый раскрывающийся список, из которого можно выбрать категорию будет зависеть от выбранного пола. В настоящее время я жестко кодирую выбор категории в JQuery следующим образом: personform_page. html,

<form class="form-class" action="" method="post" enctype="multipart/form-data">
    {% csrf_token %}
    {% for field in personform %}

        <p>
            {{ field.label_tag }}
            {{ field }}

            {% if field.help_text %}

                <small style="color: black;"> {{ field.help_text }} </small>

            {% endif %}

            {% for error in field.errors %}

                <p style="color: red;"> {{ error }} </p>

            {% endfor %}

        </p>

    {% endfor %}

    <button class="btn btn-outline-primary" type="submit">Join</button>

</form>

<script>

    $(document).ready( function() {

        $("#id_category").hide();

        $("#id_gender").on('change', function(){

            var gender = $("#id_gender").val();

            if(gender == 'Male'){

                $('#id_category').empty();
                $("#id_category").show();

                var maleCategories = ['Male Category 1', 'Male Category 2', 'Male Category 3'];
                var length = maleCategories.length;

                var i;
                for(i=0; i < length; i++){
                    maleCategory = maleCategories[i];
                    $('#id_category').append(

                        `
                        <option value="${maleCategory}">
                            ${maleCategory}
                        </option>
                        `

                    );
                }

            }
            else if(gender == 'Female'){

                $('#id_category').empty();
                $("#id_category").show();

                var femaleCategories = ['Female Category 1', 'Female Category 2', 'Female Category 3'];
                var length = femaleCategories.length;

                var i;
                for(i=0; i < length; i++){
                    femaleCategory = femaleCategories[i];
                    $('#id_category').append(

                        `
                        <option value="${femaleCategory}">
                            ${femaleCategory}
                        </option>
                        `

                    );
                }

            }
            else{

                $('#id_category').empty();

            }

        });

    });

</script>

Как отправить выбор категории в JQuery без необходимости его жесткого кодирования? Нужно ли отправлять их как контекст или использовать что-то еще?

Answer 1

В вас jQuery вы можете получить доступ к переменным контекста следующим образом:

var maleCategories = '{{male_categories}}';
var femaleCategories = '{{female_categories}}';

Answer 2

решаемая. Мне нужно было отправить переменные категории в виде JSON строк в моей контекстной переменной. В views.py,

from django.shortcuts import render, redirect

from .forms import PersonForm

import json

def personform_page(request):

    context = {}

    if request.method == 'POST':
        personform = PersonForm(request.POST)

        if personform.is_valid():
            personform.save()
            return redirect('personform_page')

        context['personform'] = personform

    else:
        personform = PersonForm()
        context['personform'] = personform

    male_category_list = ['Male Category 1', 'Male Category 2', 'Male Category 3']
    female_category_list = ['Female Category 1', 'Female Category 2', 'Female Category 3']

    json_male_categories = json.dumps(male_category_list)
    json_female_categories = json.dumps(female_category_list)

    context['json_male_categories'] = json_male_categories
    context['json_female_categories'] = json_female_categories

    return render(request, 'app1/personform_page.html', context=context)

Затем в моем сценарии

<script>
    var json_male_categories = JSON.parse('{{ json_male_categories | escapejs }}');
    var json_female_categories = JSON.parse('{{ json_female_categories | escapejs }}');
</script>

Остальное останется без изменений после следующих назначений внутри сценария в соответствующих местах.

    var maleCategories = json_male_categories;
    var femaleCategories = json_female_categories;

Answer 3

вы можете попытаться сделать запрос XMLHttpsRequest, я не уверен, будет ли он работать