Django Ajax - На основе первого выбора установить параметры второго выбора

Я новичок в ajax и новичок в django. В настоящее время есть два select input 'MF_name' и 'PD_name'. Мне нужно получить параметры PD_name на основе выбора MF_name. Здесь мне нужен ajax. Мне нужно использовать onchange и установить queryset для PD_name.

Может ли кто-нибудь предоставить простое руководство по этому вопросу? Очень ценю помощь, спасибо!

queryset = Product.objects.only('name').filter(MFID=MFID)
#Html
<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.is_ajax, 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 is_ajax(request):
    if request.is_ajax():
        MFID = request.GET.get('MF_name', None)     
        print(MFID)

        context = {

            }

        return render(request, 'Restock/Restock.html', context)
$('#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')
Вернуться на верх