时间戳

首页 > 解决方案 > 如何将数据传递给 ajax 以进行快速 api 调用

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

问题描述

我正在开发一个带有 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 是成功的，我正在获取数据。我正在使用这些数据来绘制多线图。任何帮助表示赞赏。

标签： javascriptnode.jsjsonajaxexpress

解决方案

您需要更正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());

推荐阅读