如何对依赖下拉列表发出ajax请求

dldeef67  于 2021-09-13  发布在  Java
关注(0)|答案(0)|浏览(224)

我是编程和学习django的新手。我正在努力理解如何发出ajax请求来获取数据以创建相关下拉列表。我环顾了谷歌的各种搜索和stackoverflow,但看着它们我会更加困惑。因此,我无法继续获取依赖值
我的html代码如下所示

<select name ="services" id="serviceA">
                                <option disabled selected="true"> -- Select Category -- </option>
                                 {% for item in serv %}"
                                <option value="{{ item.id }}" >{{ item.name }}</option> 
                                {% endfor %} 
                            </select>

                        <select name ="subcategories" id="subcategoryA"> 
                            <option disabled selected="true"> -- Select Service -- </option>
                            {% for item2 in subcategory %}"
                            <option value="{{ item2.id }}" >{{ item2.name }}</option>
                            {% endfor %} 
                        </select>

my views.py看起来像这样

def book(request):
employees = Employee.objects.values_list('name',flat=True)
services_ = Service.objects.values_list('name',flat=True)
services = []
serv = Service.objects.all().order_by('-id')
subcategory = SubCategory.objects.all().order_by('-id')

# subcategory = SubCategory.objects.get(pk=request.GET('service_pk'))

for i in services_:
    services.append(i)
    context = {
    'employees':employees,
    'services':services,
    'serv':serv,
    'subcategory':subcategory,
}

return render(request,'book.html',context=context)

my URL.py的设置与其他设置类似

path('service/<int:service>', services, name='services'),

我的models.py看起来像这样

def rand_slug():
return ''.join(random.choice(string.ascii_letters + string.digits) for _ in range(8))

# Create your models here.

def path_and_rename(instance, filename):
upload_to = 'uploads/images'
ext = filename.split('.')[-1]

# get filename

if instance.pk:
    filename = '{}.{}'.format(instance.pk, ext)
else:
    # set filename as random string
    filename = "PTB-" + '{}.{}'.format(uuid.uuid4().hex[:16], ext)

# return the whole path to the file

return os.path.join(upload_to, filename)

class Service(models.Model):
name = models.CharField(max_length=100,blank=True,null=True)
description = models.CharField(max_length=100,blank=True,null=True)
startprice = models.DecimalField(max_digits=10,default=0.00,decimal_places=2, verbose_name="Starts at")
image = models.ImageField(upload_to=path_and_rename, unique=True, blank=True, null=True, max_length=255, help_text='Please upload picture of 1:1 ratio')

def __str__(self):
    return self.name

class SubCategory(models.Model):
name = models.CharField(max_length=100,blank=True,null=True)
description = models.CharField(max_length=100,blank=True,null=True)
price = models.DecimalField(max_digits=10,default=0.00,decimal_places=2)
image = models.ImageField(upload_to=path_and_rename, unique=True, blank=True, null=True, max_length=255, help_text='Please upload picture of 1:1 ratio')
service = models.ForeignKey(Service, on_delete=models.CASCADE)
slug = AutoSlugField(populate_from=name,max_length=255, unique=True)
on_sale = models.BooleanField(default=False, blank=True, null=True)
discount = models.IntegerField(blank=True,null=True)

def save(self, *args,**kwargs):
    if not self.slug:
        self.slug = slugify(rand_slug() + "_" + (self.name.split().pop(0)))
    super(SubCategory, self).save(*args,**kwargs)

class Meta:
    verbose_name = "Services List"
    verbose_name_plural = "Services Lists"

def __str__(self):
    return self.name

现在,如何发出ajax请求,以便在更改服务字段时更改子类别选项?
更新我试图根据24:05 youtubelink的视频解决jquery,我的jquery脚本是这样的。但这不起作用。。。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
    $(document).ready(function()
    {
        var $servicevar=$("#serviceA");
            $subcategoryvar=$("#subcategoryA");

            $options=$subcategoryvar.find('option');
            $servicevar.on('change',function()
            {
                $subcategoryvar.html($options.filter('[value="'+this.value+'"]'));
            }).trigger('change');
    };

暂无答案!

目前还没有任何答案,快来回答吧!

相关问题