如何使用 Ajax+jQuery 根据 Django 模板中的另一个字段填充表单字段

Question

我正在尝试根据用户使用下拉菜单选择的 产品 填充 计量单位 字段。在我的产品模型中，每个产品都被分配了一个计量单位，我试图在创建订单期间自动填充单位字段。

我正在使用 jQuery 来获取产品并捕获事件 .on('change')。为了完成这个场景，我尝试使用这个示例代码here。

在示例中，我们使用发送到数据库的 Ajax 调用检查用户输入的特定名称是否存在，我已经能够复制该名称。我无法解决的是，在选择“product”时获取相关字段值“unit of measure”。

根据对产品的选择，将 Ajax 调用发送到数据库以获取 计量单位 的关联值的正确方法是什么？

编辑

models.py

class Product(models.Model):
    product_id = models.IntegerField(primary_key=True, default=300000000000000000)
    description = models.CharField(max_length=100, help_text='Prod.Short text')
    default_uom = models.ForeignKey(Unit_of_Measure, null=True, on_delete=models.CASCADE, verbose_name='UoM')

    def __str__(self):
        return '{0} : {1}'.format(self.product_id, self.description)

urls.py

urlpatterns = [

    # ...
    path('ajax/uom/', fill_UoM, name='fill_unit_of_meas'),
    # ...

注意：最初我将 url 路径包含在应用根目录中，现在我已将其移至项目根目录。

编辑 2

注意： views.py 和 HTML template 已修改并显示如下（旧代码已删除，以便于阅读）。

1.模型：“Unit_of_Measure”

class Unit_of_Measure(models.Model):
    uom = models.CharField(max_length=4, unique=True, help_text='Units of measure')
    uom_desc = models.CharField(max_length=50, null=True, help_text='Base UoM description')

    def __str__(self):
        return '{0} ({1})'.format(self.uom, self.uom_desc)

VIEWS.PY（修改）

def fill_UoM(request):
    product_id = request.GET.get('product_id', None)
    data = {
        'default_uom': Product.objects.filter(product_id=product_id).values()
        }
    return JsonResponse(list(data), safe=False)     #   (data_serialized, safe=False)

HTML 模板（修改）

function fillUoM() {
// FUNC TO GET UNIT OF MEAS ON MATERIAL SELECTION AND UPDATE THE UoM FIELD
    console.log('**** FUNCTION ENTERED ON MATERIAL SELECTION NAME OF FUNC: ' + 'fillUoM');
    $.ajax({
        url: '{% url 'fill_unit_of_meas' %}',
        data: {product_id: matl_sel},       //  "matl_sel": SELECTED PRODUCT ID PASSED >> jQuery ".on('Change')"
        dataType: 'json',
        success: function(data) {       //  error
            console.log('The value captured is: ' + data)
        },
        error: function(data) {
            console.log('Data could not be retrieved: ' + data)
        }
    });
};

现在我没有收到任何错误，但也没有返回任何结果。顺便说一句，出于绝望和测试代码 (views.py) 是否正常工作，我尝试返回产品 id 的值，但它当然不工作。

这是console.log：

捕获的值为：mat_default_uom

谢谢

Answer 1

ajax 函数

function fillUoM() 
{
    $.ajax({
            url: '{% url 'fill_unit_of_meas' %}',
            data: {"product_id": matl_sel},       
            dataType: 'json',
            success: function(data) {console.log('The value captured is: ' + data.default_uom)},
            error: function(data) {console.log('Data could not be retrieved')}
        });
};

views.py

def fill_UoM(request):
    product_id = request.GET.get('product_id', None)
    data = {'default_uom': Product.objects.get(product_id=int(product_id)).default_uom.uom}
    return JsonResponse(data)