Successful ajax POST returns empty data

Question

I have a simple program that takes a file with medical records, sends to the back-end to digest the data, and then resends the data back to the front-end for user to confirm data. Each record is displayed as a "card" on the screen. The user can edit any card as desired before confirming the data and clicking a button to send the data back to the back end to be sent to an external database utilizing an API.

I have two ajax calls, one on the first click to compute the data(which works), and another on the second click to send data to database. On the second ajax call, my success function returns an empty data string in the console and the $_POST in PHP is empty. Checking the network tab, I see a 200 code, so I know it was successful.....any ideas? Thanks!!

function postToRedcap() {
  let cards = cardZone.children();
  let allData = [];

  
  for (var i = 0; i < cards.length; i++) {
    var thisCard = $(cards[i]);
    if (thisCard.css("background-color") === "rgb(118, 187, 74)") {
      alert("please validate all cards");
      return
    }
  }
  cards.each(function() {
    let thisCardObj = {};
    let cardData = $(this).serializeArray()
    let cardId = $(this).attr('id');
    let dropdownVal = $(this).find(':selected').val();

    for(var i = 0; i < cardData.length; i++) {
      if(i === 1) {
        thisCardObj['redcap_event_name'] = dropdownVal;

      }
      thisCardObj[cardData[i]['name']] = cardData[i]['value'];
    }
    allData.push(thisCardObj);
  })

  // console.log(allData);

  $.ajax({
    type: 'POST',
    url: 'postRed.php',
    dataType: 'text',
    data: allData,
    contentType: false,
    cache: false,
    processData: false,
    success: function (data) {
      console.log(data);
      console.log(JSON.stringify(allData));
    },
    error: function (request, error) {
      console.log(JSON.stringify(error));
    },
  });
}

I have commented out the dataType, and get the same result. And have also tried dataType "json" to which i get a parse error. I've tried passing both JSON.stringify(allData) and JSON.parse(allData) and get the same error.

******I've also tried to use the FormData API and get the same results

First time posting a question, happy to post any more code that might help. Thanks again!

user_15527279 · Answer

The problem is that not passing your data properly to the back end. When you use $.ajax, you need to specify the data option with the data you want to send. Currently, you're just passing an empty object.

To fix this, you can either stringify your data before passing it to $.ajax, or you can use the $.param utility function:

$.ajax({
  type: 'POST',
  url: 'postRed.php',
  data: JSON.stringify(allData), // <-- stringify your data before passing it to $.ajax
  contentType: 'application/json', // <-- set the proper Content-Type header
  success: function (data) {
    console.log(data);
  },
  error: function (request, error) {
    console.log(JSON.stringify(error));
  },
});

Alternatively, you can use $.param:

$.ajax({
  type: 'POST',
  url: 'postRed.php',
  data: $.param(allData), // <-- use $.param to properly format your data
  success: function (data) {
    console.log(data);
  },
  error: function (request, error) {
    console.log(JSON.stringify(error));
  },
});

For more information, see the jQuery.ajax() documentation: https://api.jquery.com/jQuery.ajax/

Successful ajax POST returns empty data

1 Answers