如何将数据传递给ajax以进行快速API调用

Question

我正在开发一个网站与快递和ejs。我遇到了一个麻烦，我需要通过ajax调用api。问题是在一个按钮onclick我传递两个值到ajax数据。但它给出了错误，我尝试了很多方法，我搞砸了。我是一个新手，在下面找到我的代码。

const parsedData = JSON.parse(localStorage.getItem('myData'));


const container = document.getElementById('s1');

parsedData.data.rows.forEach((result, idx) => {

var a = result.master_id;
var b = result.session_name;
console.log(a,b,"a","b")


var userData = {"pid":a,"session" :b};
console.log(userData,"userData");
sessionStorage.setItem("user", JSON.stringify(userData));
console.log(userData,"data for api");
const card = document.createElement('div');
card.classList = 'card';

const content = `
<div class="row">
<div class="card-body"  onclick="graphApi()">
</div>
</div>

`;

container.innerHTML += content;
});
function graphApi(){

var apiValue =JSON.parse( sessionStorage.getItem("user"));
console.log(apiValue, "value from card");

$.ajax({
type: "POST",
data:  apiValue,
dataType:"json",

url: "http://localhost:5000/graphFromcsv",                      
success: function(data) {
console.log(data,"graph api");
}
error: function(err){
alert("graph api failed to load");
console.log(err);
},
});

我总是在API值未定义和400个坏请求中得到这个pid。但是如果我使用原始数据，比如

{
"pid":"WE6",
"session":"W.csv"
}

而不是apiValue我的ajax是成功的，我正在获取数据。我用这些数据画了一个多线形图。如有任何帮助，不胜感激。

Answer 1

您需要更正data键及其值(值必须是json数据的情况下字符串)，并添加contentType键，如

$.ajax({
type: "POST",
data: sessionStorage.getItem("user") || '{}',
dataType: "json",
contentType: "application/json",
url: "http://localhost:5000/graphFromcsv",
success: function (data) {
console.log(data, "graph api");
},
error: function (err) {
alert("graph api failed to load");
console.log(err);
},
});

注意:在后端(ExpressJS)，确保您使用正确的body-parser中间件，如app.use(express.json());

Answer 2

假设apiValue包含{"pid":"WE6", "session":"W.csv" }，那么body: { apiValue }将等于:

body: {
apiValue: {
"pid":"WE6",
"session":"W.csv"
}
}

但是如果你使用链接到像body: apiValue这样的对象(没有括号)，js将构建它:

body: {
"pid":"WE6",
"session":"W.csv"
}