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

Question

在ajax的帮助下查询产品后尝试打开带有产品详细信息的模态时出现错误错误本身：Uncaught SyntaxError: Unexpected end of JSON inputat 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.typedef 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 datadef dumped_as_dict(self):    return json.dumps(self.as_dict())@propertydef 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) {

  return s.replace(/[<>'"&]/g, function(meta) {

    return "&#" + meta.charCodeAt(0) + ";";

  });

}