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

【问题标题】：how to pass data to ajax for an express api call如何将数据传递给 ajax 以进行快速 api 调用
【发布时间】：2021-12-01 15:17:21
【问题描述】：

我正在使用 express 和 ejs 开发一个网站。我遇到了需要通过 ajax 调用 api 的麻烦。问题出在按钮上，我将两个值传递给 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 值 undefined 和 400 badrequest 中得到这个 pid。但如果我使用像这样的原始数据，

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

而不是 apiValue 我的 ajax 是成功的，我正在获取数据。我正在使用这些数据来绘制多线图。任何帮助表示赞赏。

【问题讨论】：

删除数据类型：json
我试过了，但没有帮助
你的意思是data: apiValue而不是data: { apiValue }？
数据：apiValue。我在这个问题上写的不正确，对不起。但不在我的代码中

标签： javascript node.js json ajax express

【解决方案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());

【讨论】：

谢谢。但这没有用，对不起。仍然收到错误错误请求
@fungusblacky 更新了答案，我错过了var apiValue =JSON.parse( sessionStorage.getItem("user")); 这行你不需要解析它，如果你想在apiValue 键中使用apiValue 变量，它应该像var apiValue = sessionStorage.getItem("user"); 一样跨度>
我也试过这个兄弟。我在浏览器控制台中收到此错误 {message: 'TypeError: Cannot convert undefined or null to object'}。当我使用 alret (err) 而不是 alert('graph api failed to load') 我得到 [object Object]
@fungusblacky 好像你没有从后端发送任何数据，你只需要删除dataType: "json",
我也做了同样的事，兄弟。我是否必须在后端 api 中将 res.json({data}) 更改为 res.send({data})

【解决方案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"
}

【讨论】：

对不起，我没有得到它，我应该添加 apivalue 吗？
你能提供你从console.log(apiValue, "value from card");得到的东西吗？
{"pid":"W6","session":"W.csv"} 当我使用 var apiValue = sessionStorage.getItem("user"); console.log(apiValue, "来自卡的值");
有效的数据是{"pid":"WE6", "session":"W.csv"}。会不会是你在W6 中漏掉了E？
是的，兄弟打字错误