如何在javascript fetch调用中传递参数

Question

我正在aspx网站(VB， . net 4.7.2)中集成Stripe支付。我从Stripe样本中获取了javascript。我尝试调用这个后端方法:

<WebMethod()>
Public Shared Function CreateStripePaymentIntent(ByVal aPrice As String) As PaymentIntent
...
End Function

从一个Javascript的页面:(这里参数是一个固定值，为了简化)

fetch("PayOrder.aspx/CreateStripePaymentIntent?aPrice=111", {
method: "POST",
headers: {
'Accept': 'application/json',                                   
"Content-Type": "application/json"
}
body: JSON.stringify(purchase)
})

如果我删除参数，一切工作正常(但无用)。如果我试图传递参数，我总是有错误500:文章http://localhost: 14987/PayOrder.aspx/CreateStripePaymentIntent ?人力成本= 111500年状态服务器内部错误HTTP/1.1版本已传输0.98 kB (660b大小)引用策略strict-origin-when-cross-origin

消息"参数'aPrice'没有值。">(我从意大利语翻译成英语!)

谁能告诉我为什么这个参数没有到达后端?

Answer 1

这些值以内容类型指定的格式在请求体中发送。

通常内容类型是application/x-www-form-urlencoded，所以请求正文使用与查询字符串相同的格式:

parameter=value&also=another

当您在表单中使用文件上传时，您使用multipart/form-data编码代替，它具有不同的格式。它更复杂，但你通常不需要关心它是什么样子的，所以我不会展示一个例子，但知道它的存在是很好的。

表示Json内容类型为application/Json

fetch("PayOrder.aspx/CreateStripePaymentIntent", {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify({ aPrice: 111 })
})