在 Django 中，如何将上下文或变量发送到 JQuery？

Posted 2023-02-24

【中文标题】在 Django 中，如何将上下文或变量发送到 JQuery？

【英文标题】：In Django, how to send context or variables to JQuery?

【发布时间】：2020-07-05 06:29:08

【问题描述】：

我有一个必须使用 ModelForm (PersonForm) 输入的模型（Persons）。 模型.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 而无需对其进行硬编码？我需要将它们作为上下文发送还是使用其他东西？

【问题讨论】：

您可以将类别选择作为上下文变量发送。并且可以在 jQuery 中轻松访问它

我之前尝试在我的 JQuery 中访问上下文变量但没有成功。你能展示一个示例语法吗？

【参考方案1】：

在您的 jQuery 中，您可以像这样访问上下文变量：

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

【讨论】：

不幸的是，这种方法对我不起作用。它会产生一些随机的选择集，由我实际选择的字母组成。

您发送的男性和女性类别是仅列表还是元组列表？你能在 jQuery 中 console.log 这两个变量吗？

我尝试同时发送两个元组列表：context['male_categories'] = MALE_CATEGORIES context['female_categories'] = FEMALE_CATEGORIES 字符串列表：male_category_list = ['Male Category 1', 'Male Category 2', 'Male Category 3'] female_category_list = ['Female Category 1', 'Female Category 2', 'Female Category 3'] context['male_categories'] = male_category_list context['female_categories'] = female_category_list

你能在javascript控制台中记录变量吗？

我记录了变量，它显示两个列表都被解释为各自列表中存在的所有字符的列表，而不是字符串列表。示例：-male_categories 被解释为列表中每个字符串中所有字符的列表，以及 '[', ']' 和其他一些用于单引号和逗号的字符。

【参考方案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;