未捕获的语法错误：JSON 输入意外结束。无法将信息从 html 正确解析为 JSON

Question

在ajax的帮助下查询产品后尝试打开带有产品详细信息的模态时出现错误

错误本身：

Uncaught SyntaxError: Unexpected end of JSON input

at JSON.parse (<anonymous>)

at HTMLButtonElement.<anonymous> (scripts.js:54)

at HTMLDocument.dispatch (jquery-3.3.1.js:5183)

at HTMLDocument.elemData.handle (jquery-3.3.1.js:4991)

需要明确的是：我有一些过滤器，其结果在 pythonfilter_items函数中被过滤，然后它使用 JSONResponse 以字典（as_dict()项目模型中的函数）的形式将其发送到前端，并将它们添加到hidden input值中。JS 函数获取隐藏的输入值，并使用来自该输入的数据呈现过滤结果。

在过滤功能的帮助下查询的项目模型：

class Item(models.Model):

ITEM_TYPES = (

    ('UM', 'Umbrella'),

    ('SK', 'Skirt'),

    ('TR', 'Trousers'),

    ('OT', 'Other')

)

BRANDS = (

    ('VS', 'Versace'),

    ('SP', 'Supreme'),

    ('SI', 'Stone Island'),

    ('FP', 'Fred Perry'),

)

title = models.CharField(max_length=256)

image = models.ImageField(upload_to='img/')

brand = models.CharField(max_length=256)

type = models.CharField(choices=ITEM_TYPES, max_length=2)

description = models.TextField(blank=True, null=True)

season = models.TextField(blank=True, null=True)

discount = models.FloatField(blank=True, null=True)

price = models.FloatField()

def __str__(self):

    return self.title + ' ' + self.type

def as_dict(self):

    data = {"title": self.title, "image": self.image.url, "brand": self.brand, "type": self.type,

            "discount": self.discount, "price": self.price, "rus_representation": self.rus_representation,

            "description": self.description, "season": self.season, "images": [self.image.url]}

    if self.images:

        for image in self.images.all():

            data['images'].append(image.image.url)

    # data['dumped'] = json.dumps(data)

    # print(data['dumped'])

    return data

def dumped_as_dict(self):

    return json.dumps(self.as_dict())

@property

def rus_representation(self):

    if self.type == 'UM':

        return 'Зонтик'

    elif self.type == 'SK':

        return 'Юбка'

    elif self.type == 'TR':

        return 'Штаны'

    elif self.type == 'OT':

        return 'Другое'

Answer 1

当您构建该 HTML 字符串时，您的代码会执行以下操作：var el = '<div ... value=' + JSON.stringify(x) + ' ... >';因此，HTML 结果将是var el = '<div ... value={ ... } ... >';由于“value”的属性值未在生成的 HTML 源中引用，因此 JSON 中的第一个空格字符是属性值的结尾，就 HTML 解析器而言。您至少需要包含引号：var el = '<div ... value=\'' + JSON.stringify(x) + '\' ... >';我还强烈建议您使用 HTML 实体编码器对字符串中的任何 HTML 元字符进行编码，例如function scrubHtml(s) {&nbsp; return s.replace(/[<>'"&]/g, function(meta) {&nbsp; &nbsp; return "&#" + meta.charCodeAt(0) + ";";&nbsp; });}