Django Ajax - 基于第一个选择设置第二个选择选项

Question

我是 ajax 新手和 django 初学者。目前有两个选择输入“MF_name”和“PD_name”。我需要根据 MF_name 的选择来获取 PD_name 选项。这是我需要ajax的地方。我需要使用 onchange 并为 PD_name 设置查询集。

有人可以提供一个简单的指南吗？非常感谢帮助谢谢！

queryset = Product.objects.only('name').filter(MFID=MFID)

#Html
<div class="container">
    <div class="row">
        <div class="col">
            {% csrf_token %}
            {{mf.MF_name}}
            <!--- This is the element for id_MF_name it is outside of the table. --->
            <!---
            <select name="MF_name" class="form-control w-50" 
            onblur="form_validation({'element' : this,})" 
            required="" id="id_MF_name">
            </select>
            --->
        </div>
    </div>
</div>

<tr id="emptyRow">
    <td colspan="6" style="text-align:center;">Please select a Manufacturing Company first.</td>
</tr>

<tr class="clone_tr displayNone">
    <td>{{ prd.PD_name }}</td>
    <td>{{prd.PDID}}</td>
    <td>{{rtk_prd.qty}}{{rtk_prd.qty.errors}}</td>
    <td>
        <span class="input-group p-0">
            <div class="input-group-text">RM</div>
            {{prd.restock_price}}
        </span>
    </td>
    <td>{{rtk.remark}}</td>
    <td><button type="button" class="btn" onclick="clone_element(this,'.clone_tr','.my-tbody',word)"><i class="fas fa-plus-square fa-lg"></i></button></td>
    <td><button type="button" class="btn" onclick="clone_element(this,'.clone_tr','.my-tbody',word)"><i class="fas fa-plus-square fa-lg"></i></button></td>

#ajax
$('#id_MF_name').on('change', function (e) {
            e.preventDefault();
            var MF_name = $(this).val();
            $.ajax({
                'url': '{% url "Restock:Ajax" %}',
                'data': { 
                    'MF_name' : MF_name,
                    'csrfmiddlewaretoken' : '{{csrf_token}}'
                },
                dataType: 'json',
                success: function (response) {
                    $('#emptyRow').remove();
                    $('.clone_tr').removeClass("displayNone");
                },
            });
        });

#urls.py
path('ajax/', views.updateAjax, name='Ajax'),

#views.py
#this is the part where I wasn't sure what I'm suppose to do after passing the data from ajax to views. 
#Please provide explanation on what I'm suppose to do here to set PD_name options.

def updateAjax(request):
    if request.is_ajax():
        MFID = request.GET.get('MF_name', None)     
        print(MFID)

        context = {

            }

        return render(request, 'Restock/Restock.html', context)

解决方案

感谢 Ankit Tiwari 和 Sangeeth Subramoniam 的帮助。 对于那些对其工作原理感到好奇的人，您可以阅读这篇文章

Implement Dependent/Chained Dropdown List with Django

Ankit Tiwari 解决方案也有效。因此，有两个参考可供任何人查看。

Answer 1

$('#id_MF_name').on('change', function (e) {
  e.preventDefault();
  var MF_name = $(this).val();
  $.ajax({
    'url': '{% url "Restock:Ajax" %}',
    'type': 'GET',
    'data': {
      'MF_name' : MF_name,
    },
    dataType: 'json',
    success: function (response) {
      console.log(response);
      // do whatever you want
      $('#emptyRow').remove();
      $('.clone_tr').removeClass("displayNone");
    },
    error: function (response) {
      alert(response);
    },

  });
});

在你的观点中你必须这样做

def updateAjax(request):
    if request.is_ajax():
        MFID = request.GET.get('MF_name', None)     
        print(MFID)
        queryset = Product.objects.only('name').filter(MFID=MFID)
        response = {
        'data': queryset
        }
        return JsonResponse(response)
    return render(request, 'Restock/Restock.html')