带有 JSON 参数的请求抛出未捕获（承诺）语法错误

Question

我正在使用 Fetch 向我的服务器发出 post 请求，并且我正在尝试传递一些信息，如下所示。

var rating = document.getElementById("rating");
var ratingValue = rating.innerHTML;
fetch("/films",{
    method: "post",
    headers: {
        'Content-Type': 'application/json',
        'Accept': 'application/json'
    },
    body: JSON.stringify({
        rated : ratingValue
    })
})

当我尝试在我的服务器中访问此信息时出现错误：

Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0

服务器端代码是：

app.post("/films", function(req,res){
    var rating = req.body.rated;
    ...
})

正是函数中的第一行给我错误，即声明 rating 变量的那一行。

Answer 1

你不是说req.body.rating吗？

Answer 2

您的 var rating = document.getElementById("rating"); 是一个 html 元素，看起来像这样 <div id='rating'>Some text</div>。我不知道 rating 元素或类型中的内容，所以这只是一个示例。稍后在您的代码中，您使用 rating 作为

中的键

 body: JSON.stringify({
        rating : ratingValue
 })

所以您尝试按照

创建 key:value 对

{ "<div id='rating'>Some Text</div>" : ratingValue }

看到错误在位置 0 处显示一个 < 符号，而您的键在位置 0 处有一个 <，我认为这可能是导致您出错的原因。您是否尝试使用评分元素中的值作为 body 的键？

*更新 5-25-2020*

如果 id='rating' 的 html 元素中有一个嵌套元素，如果您只想要一个原始值，那可能就是问题所在。

//This would cause a problem as the innerHTML of 'rating' is <p>10</p>
<div id='rating'>
     <p>10</p>
</div>

只要您的 'ratingValue' 需要一个数字，并且 'rating' 的 innerHTML 是 10，下面的示例就应该可以工作。您可能需要 parseInt() innerHTML，但请尝试不使用第一的。

<div id='rating'>
     10
</div>

这只是一个示例，因为我不知道 'rating' ID 附加到什么类型的元素。

带有 JSON 参数的请求抛出未捕获（承诺）语法错误

Request with JSON parameters throwing Uncaught (in promise) Syntax Error

javascript

post

json

express

fetch-api