繁体   English   中英

在 Django 中选择类别时,使用 jquery ajax 创建子类别

Create sub category using jquery ajax when selecting a category in Django

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

我有一个问题,当我 select 一个类别时,子类别不显示或仅显示默认选项。 我想显示有关用户类别选择的子类别。

这是我的 html 代码

<div class="container pt-5" style="height: 800px !important;">
            <div class="mx-auto" style="width: 500px" ;>
                <form id="form" action="../message/" method="post" name="contactForm" class="form-horizontal" data-subCat-url="{% url 'ajax_load_subCats' %}">
                    {% csrf_token%}
                    <div class="col-xs-8 col-xs-offset-4 mt-5">
                        <h2 style="text-align:center;">Contact</h2>
                    </div>
        
                    <div class="form-group">
                        <label class="p-2" for="title">Title</label>
                        <input type="title" class="form-control" name="text" id="title" placeholder="Enter A Title" required="required">
                    </div>
                    <div class="form-group">
                        <label class="p-2" for="category">Category</label>
                        <select class="form-select" aria-label="Default select example" id="category" required>
                            <option selected>Select a category</option>
                            <option value="theft">Theft</option>
                            <option value="assault">Assault</option>
                            <option value="accident">Accident</option>
                            <option value="fire">Fire</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label class="p-2" for="category">Sub Category</label>
                        <select id="subCat" class="form-select" aria-label="Default select example" required>
                            
                        </select>
                    </div>
                    <div class="form-group">
                        <label class="p-2" for="subject">Subject</label>
                        <textarea type="text" class="form-control" name="subject" cols="30" rows="10" placeholder="Enter Subject" required="required"></textarea>
                    </div>
                    <button type="submit" class="btn btn-primary float-end mt-2">Send</button>
                    <br />
                    <div class="form-group">
                        {% for message in messages %}
                        <div class="alert alert-danger" role="alert">
                            {{message}}
                        </div>
                        {% endfor %}
                    </div>
                </form>
            </div>
        </div>

我没有添加 html 标签,如身体、头部、html,所以问题不存在。

这是我的 Jquery 脚本

    $(document).ready(function(){

        $("#category").change(function(){
            const url = $("#form").attr('data-subCat-url');
            const catName = $(this).children("option:selected").val();
            console.log(url)
            console.log(catName)
            $.ajax({
                url: url,
                data: {
                    'cat_name': catName
                },
                success: function(data){
                    $("#subCat").html(data);
                }
            })
        });

    })

这个文件是models.py:

from django.db import models

# Create your models here.
class Category(models.Model):
    name = models.CharField(max_length=100)
    def __str__(self):
        return self.name

class subCategory(models.Model):
    category = models.ForeignKey(Category, on_delete=models.CASCADE,)
    subName = models.CharField(max_length=100)
    def __str__(self):
        return self.subName

这个文件是 forms.py:

from dataclasses import fields
from pyexpat import model
from unicodedata import category
from django import forms
from .models import subCategory

class subCategoryCreationForm(forms.ModelForm):
    class Meta:
        model = subCategory
        fields = '__all__'
    
    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.fields['subName'].queryset = subCategory.objects.none

        if 'category' in self.data:
            try:
                category_id = int(self.data.get('category'))
                self.fields['subCategory'].queryset = subCategory.objects.filter(category_id=category_id).order_by('name')
            except (ValueError, TypeError):
                pass # invalid form
        elif self.instance.pk:
            self.fields['subCategory'].queryset = self.instance.category.subCategory_set.order_by('name')

这个文件是views.py:

def loadSubCats(request):
    cat_name = request.GET.get('cat_name')
    categories = Category.objects.all()
    sub_category = subCategory.objects.filter(category_id= categories['id']).all()
    count = subCategory.objects.filter(category_id= categories['id']).count()
    return render(request, 'report/load-sub-cats.html', {'sub_category' : sub_category})

这个文件是 urls.py:

from django.urls import path
from . import views


urlpatterns = [
    path('', views.report, name='report'),
    path('add/', views.add, name='add'),
    path('add/ajax/load-subCats/', views.loadSubCats, name='ajax_load_subCats'),
] 

最后,这是 load-sub-cats.html 文件:

<option selected>Select a sub category</option>
<h3>{{count}}</h3>
{% for sub_category in  sub_categories %}
    <option value="{{ sub_category.pk }}">{{ sub_category.subName }}</option>
{% endfor %}

我有来自用户的 html 页面到 select 类别。 When he select it jquery ajax get data from this path: path('add/ajax/load-subCats/', views.loadSubCats, name='ajax_load_subCats') , on urls.py. 文件 load-sub-cats.html 文件是从 views.py 获得的子类别的选项所以从 views.py 我将返回关于从用户中选择的类别的子类别。

Forms.py & models.py 只是创建数据库的文件。 我认为问题出在 views.py 文件和 load-sub-cats.html 文件之间。 当我选择一个类别选项时,这是控制台上显示的问题:

在此处输入图像描述

这是显示的问题,当我打开此链接report/add/ajax/load-subCats/?cat_name=theft

TypeError at /report/add/ajax/load-subCats/
QuerySet indices must be integers or slices, not str.
Request Method: GET
Request URL:    http://127.0.0.1:8000/report/add/ajax/load-subCats/?cat_name=theft
Django Version: 4.1.1
Exception Type: TypeError
Exception Value:    
QuerySet indices must be integers or slices, not str.
Exception Location: C:\Users\acer\AppData\Local\Programs\Python\Python310\lib\site-packages\django\db\models\query.py, line 414, in __getitem__
Raised during:  report.views.loadSubCats
Python Executable:  C:\Users\acer\AppData\Local\Programs\Python\Python310\python.exe
Python Version: 3.10.7
Python Path:    
['D:\\Connecting_Project\\Python\\ReportingPlatform',
 'C:\\Users\\acer\\AppData\\Local\\Programs\\Python\\Python310\\python310.zip',
 'C:\\Users\\acer\\AppData\\Local\\Programs\\Python\\Python310\\DLLs',
 'C:\\Users\\acer\\AppData\\Local\\Programs\\Python\\Python310\\lib',
 'C:\\Users\\acer\\AppData\\Local\\Programs\\Python\\Python310',
 'C:\\Users\\acer\\AppData\\Local\\Programs\\Python\\Python310\\lib\\site-packages']
Server time:    Tue, 27 Sep 2022 18:31:52 +0000
Traceback Switch to copy-and-paste view
C:\Users\acer\AppData\Local\Programs\Python\Python310\lib\site-packages\django\core\handlers\exception.py, line 55, in inner
                response = get_response(request) …
Local vars
C:\Users\acer\AppData\Local\Programs\Python\Python310\lib\site-packages\django\core\handlers\base.py, line 197, in _get_response
                response = wrapped_callback(request, *callback_args, **callback_kwargs) …
Local vars
D:\Connecting_Project\Python\ReportingPlatform\report\views.py, line 21, in loadSubCats
            form.save()
            return redirect('../showAll/')
    return render(request, 'report/add.html')
def loadSubCats(request):
    cat_name = request.GET.get('cat_name')
    categories = Category.objects.all()
    sub_category = subCategory.objects.filter(category_id= categories['id']).all() …
    count = subCategory.objects.filter(category_id= categories['id']).count()
    return render(request, 'report/load-sub-cats.html', {'sub_category' : sub_category})
def showAll(request):
    return render(request, 'report/show-all.html')
Local vars
问题暂未有回复.您可以查看右边的相关问题.
1 DJANGO使用子类别创建类别

我对要执行的类别表感到困惑。 我正在建立一个具有多个类别级别的项目,但是我想做的是建立一个多层类别结构。 例如,我创建了具有以下类别的类,但我想按以下示例实现多级类别 动作&gt;(+)惊悚片或拳击或帮派相关 有什么想法吗 ? ...

2 如何使用动态选择框创建子类别

我有一个使用选择框制作的静态父类别。 当我单击 man 类别时,我创建了一个新的选择框。 我列出了从 api 返回的类别。 当我点击“Walking Shoe”类别时,我创建了一个新的选择框。 我列出了从 API 返回的类别。 当我再次单击“女人”类别时,我只需要显示 1 个子类别选择框。 我该 ...

5 从同一张表中选择类别和子类别

向我展示了一个数据库方案,其中我必须检索单个表中的产品及其包装。 注意:层次结构只是一个级别,例如Package1 =&gt; Cola。 Package2 =&gt;薯条,汉堡。 Package3 =&gt; Coffee等,即两栏 我有三个表:产品,核心,层次结构。 产品包 ...

6 sql自联接,从一个表中选择类别和子类别

我正在尝试创建一个在一个表中包含类别和子类别的论坛,我想在一个查询中选择所有cat和subcat,但是不知何故该查询给了我这样的错误消息 尽管我不知道出了什么问题。 这是查询的方式: 有了这个错误,我什至无法测试查询结果是否是我期望的结果。 请帮忙。 (^ __ ^') ...

2013-06-29 16:23:37 1 1603   sql/ join
7 使用jQuery选择类别和子类别

我的代码中有一个问题,这是一个jQuery问题,但我不知道是什么问题。 当我上载产品并尝试选择父类别时,我的浏览器会冻结(就像消耗大量内存一样)。 子选择菜单也显示父标题。 当我编辑产品时,父级和子级显示正确,并且可以在子级选择选项菜单中进行更改,但是当我尝试与父级一起选择时,它再次冻结了 ...

10 django类别和管理页面上的子类别选择

我有三个表: Category , Subcategory , Products 。 子类别表具有类别ID字段作为外键。 插入新产品时,有两个选择框: 首先选择类别(其工作) 第二个是子类别 我需要从子类别表中获取数据。 哪一个与第一选择有关? 谢谢。 ...

2018-02-13 16:52:41 0 131   django
暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2022 STACKOOM.COM