正文 

当前位置： 首页 > 问答 >

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

     2023-02-23     302

关键词：

【中文标题】Django Ajax - 基于第一个选择设置第二个选择选项【英文标题】：Django Ajax - Based on first selection set the second select options 【发布时间】：2022-01-24 05:12:36 【问题描述】：

我是 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.qtyrtk_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 解决方案也有效。因此，有两个参考可供任何人查看。

【问题讨论】：

检查这个类似的场景simpleisbetterthancomplex.com/tutorial/2018/01/29/… 请更改您的函数名称is_ajax()，因为 django 使用相同的函数名称来检查请求是否为 ajax，例如。 if request.is_ajax(): @AnkitTiwari 已更改。 @SANGEETHSUBRAMONIAM 会研究这篇文章谢谢！ @SANGEETHSUBRAMONIAM 感谢这篇文章有效！ 【参考方案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')

【讨论】：

如何在 Django 中使用 Ajax JQuery 调用下拉列表 html 选择

】如何在Django中使用AjaxJQuery调用下拉列表html选择【英文标题】：HowtocalladropdownlisthtmlselectwithAjaxJQueryinDjango【发布时间】：2021-11-1500:58:29【问题描述】：我想在第一个选择下拉列表中选择一个选项，并且根据所选选项，ajax应该加... 查看详情

python+django+ajax

...个用纯粹的javascript就可以实现了啊。干嘛要扯到Python，Django还有Ajax啊。追问因为我不懂：D 参考技术Bjs/jquery就可以做到，别麻烦ajax…… 查看详情

symfony ajax 表单动态修改

...些尚未添加的字段）。表单在第一个选择中加载数据，并基于该选择，我使用ajax填充第二个选择，其中包含基于第一个选择的选项（基本上是与所选值的关联）。然后从那里再次选择具有某些选项的选项等等，最后当我提交 查看详情

从 Django 中的 JsonResponse 中提取字段值并将其传递给 Ajax Jquery

】从Django中的JsonResponse中提取字段值并将其传递给AjaxJquery【英文标题】：ExtractingafieldvaluefromJsonResponseinDjangoandpassittoAjaxJquery【发布时间】：2021-11-1914:53:33【问题描述】：我正在Django中使用ajax和Jquery创建一个下拉列表选择预期的... 查看详情

django之ajax

介绍Ajax　　Ajax（AsynchronousJavascriptAndXML）翻译成中文就是“异步Javascript和XML”。即使用Javascript语言与服务器进行异步交互，传输的数据为XML（当然，传输的数据不只是XML）。同步交互：客户端发出一个请求后，需要等待服务器... 查看详情

更改第一个时重置第二个 jquery 下拉选择框

】更改第一个时重置第二个jquery下拉选择框【英文标题】：Resetsecondjquerydropdownselectboxwhenfirstischanged【发布时间】：2013-06-2809:05:09【问题描述】：我正在使用以下脚本从我的数据库中获取记录，并使用jquery、ajax和php将它们放入选... 查看详情

如何根据使用 jQuery/AJAX 和 PHP/MySQL 选择的第一个下拉列表填充第二个下拉列表？

】如何根据使用jQuery/AJAX和PHP/MySQL选择的第一个下拉列表填充第二个下拉列表？【英文标题】：HowtopopulateseconddropdownbasedonselectionoffirstdropdownusingjQuery/AJAXandPHP/MySQL?【发布时间】：2012-02-0316:19:30【问题描述】：我正在尝试使用jQuery/... 查看详情

Django 表单向导 - 取决于第一个表单步骤的选择

】Django表单向导-取决于第一个表单步骤的选择【英文标题】：Djangoformwizard-choicesdependingonfirstformstep【发布时间】：2011-06-3007:25:04【问题描述】：我使用FormWizard创建了一个两步表单，如下所示：第一步：询问用户位置第二步：显... 查看详情

Div 在使用 ajax 和 django 进行第二次点击后显示/隐藏

】Div在使用ajax和django进行第二次点击后显示/隐藏【英文标题】：Divshows/hidesaftersecondclickwithajaxanddjango【发布时间】：2020-12-2702:34:17【问题描述】：我想在我的应用中拥有简单的功能。当用户单击“显示回复”按钮时，将显示带... 查看详情

是否可以根据从 android 中的第一个选择中选择的特定值设置第二个选择的选定值？

】是否可以根据从android中的第一个选择中选择的特定值设置第二个选择的选定值？【英文标题】：isitpossibletoSetselectedvalueofsecondselectbasedonspecificvalueschosenfromfirstselectinandroid?【发布时间】：2011-11-1316:28:23【问题描述】：我有两个Ta... 查看详情

通过第一个文本字段的 ajax 进行数据验证后禁用第二个文本字段

...试验JSF2.0时，我遇到了这样的场景。我有两个文本字段-基于第一个字段的输入，使用触发ajax调用<f:ajax.../>响应返回后，我正在 查看详情

django系列博客（十四）(代码片段)

Django系列博客（十四）前言本篇博客介绍在html中使用ajax与后台进行数据交互。什么是ajaxajax（AsynchronousJavascriptAndXML）翻译成中文就是‘’异步JavaScript和XML‘’。即使用JavaScript语言与服务器进行异步交互，传输的数据为XML（现... 查看详情

Django 项目中基于 CSRF 令牌 AJAX 的帖子

】Django项目中基于CSRF令牌AJAX的帖子【英文标题】：CSRFtokenAJAXbasedpostinaDjangoProject【发布时间】：2017-07-0614:13:15【问题描述】：所以我发现了错误，它在我的HTML中。我刚刚添加了%csrf_token%，它成功了:)感谢大家的帮助！（我使用... 查看详情

基于选择出现/隐藏框的问题

】基于选择出现/隐藏框的问题【英文标题】：Troublewithboxesappearing/hidingbasedonselection【发布时间】：2021-08-2100:04:01【问题描述】：我有一个动态下拉菜单，它会根据第一个框的选择显示第二个框。我遇到的问题是，一旦我选择其... 查看详情

根据下拉选择创建动态下拉选项 - 卡住

...根据第一个下拉列表填充。我正在使用ajax和jquery在我的django项目中帮助构建这个动态表单，我需要一些帮助。我已经让ajax调用正常工作，并且我已 查看详情

POST 请求创建多个对象 AJAX/Django Rest Framework

】POST请求创建多个对象AJAX/DjangoRestFramework【英文标题】：POSTRequestcreatesmultipleobjectsAJAX/DjangoRestFramework【发布时间】：2021-08-0116:46:54【问题描述】：我正在尝试使用户能够为仪表板创建新列表。我遇到的问题是，当用户创建新列... 查看详情

根据第一个下拉选择填充第二个下拉列表

...的是当有人单击第一个html下拉列表id="FirstDD"时，基于选择的option第二个下拉列表id="SecDD"将填充与FirstDD下拉选择相关的字段.触发这一切是aja 查看详情

使用数据库结果更新 django 选择字段

】使用数据库结果更新django选择字段【英文标题】：updatedjangochoicefieldwithdatabaseresults【发布时间】：2014-09-1216:50:06【问题描述】：我正在使用django开发一个应用程序，当用户与之交互时需要更新UI。例如，我有一个下拉字段，用... 查看详情