Submitting data using JavaScript's POST method

Question

Submitting data using JavaScript's POST method

I am facing a challenge with posting Array data to an HTTP connector. My data is structured as follows:

var data = [{ 
    key:'myKey',
    keyName:'myKeyName',
    value:'value',
    valueName:'valueName' 
}, { 
    key:'mySecondKey', 
    keyName:'mySecondKeyName',
    value:'secondValue',
    valueName:'secondValueName'
}, ...and so on ];

When attempting to post it via Ajax like this:

$.ajax({
    type:   "POST",
    url:    url,
    data:   data,
    error:  function(){
        alert("Error");
    },
    success: function(){
        alert("OK");
    }
});

The request returns fine, but the posted data appears as

undefined=value&undefined=secondValue

I need all this information for configurations. How can I resolve this issue? Simple posts with keys and values work perfectly fine.

javascript arrays ajax http post

Answer 1

Answer №1

Assuming you are sending a POST request with a JSON payload, it is important to ensure that your payload is properly formatted as JSON. You can check the formatting using this tool:

Next, when sending the payload, utilize JSON.stringify and set the contentType:

data: JSON.stringify(data), contentType: "application/json; charset=utf-8"

If you execute this code and inspect the network tab in Chrome's Dev Tools, you will see any potential errors, but also view the formatted payload being sent to the server: http://prntscr.com/f8hf6s

var data = [{
    "key": "myKey",
    "keyName": "myKeyName",
    "value": "value",
    "valueName": "valueName"
  },
  {
    "key": "mySecondKey",
    "keyName": "mySecondKeyName",
    "value": "secondValue",
    "valueName": "secondValueName"
  }
];

var url = "http://swapi.co/api/";

$.ajax({
  type: "POST",
  url: url,
  data: JSON.stringify(data),
  contentType: "application/json; charset=utf-8",
  dataType: "json",
  error: function() {
    alert("Error");
  },
  success: function() {
    alert("OK");
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 2

Assuming you are sending a POST request with a JSON payload, it is important to ensure that your payload is properly formatted as JSON. You can check the formatting using this tool:

Next, when sending the payload, utilize JSON.stringify and set the contentType:

data: JSON.stringify(data), contentType: "application/json; charset=utf-8"

If you execute this code and inspect the network tab in Chrome's Dev Tools, you will see any potential errors, but also view the formatted payload being sent to the server: http://prntscr.com/f8hf6s

var data = [{
    "key": "myKey",
    "keyName": "myKeyName",
    "value": "value",
    "valueName": "valueName"
  },
  {
    "key": "mySecondKey",
    "keyName": "mySecondKeyName",
    "value": "secondValue",
    "valueName": "secondValueName"
  }
];

var url = "http://swapi.co/api/";

$.ajax({
  type: "POST",
  url: url,
  data: JSON.stringify(data),
  contentType: "application/json; charset=utf-8",
  dataType: "json",
  error: function() {
    alert("Error");
  },
  success: function() {
    alert("OK");
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Submitting data using JavaScript's POST method

Answer №1

Similar questions

The text color remains the same even after the method has returned a value

Trouble Displaying DHtmlX Scheduler Events on Safari and Internet Explorer

Guide on displaying a specific element from a JSON file following an Ajax request

When you input text into a contenteditable div, it automatically gets placed inside a span element instead of being placed

Issue - Following error occurred in the file connection.js located in node_modules/mysql2 library: Module not found: Unable to locate 'tls' module

Finding a specific object within an array of objects by searching through a key value pair

Issue with smart table sorting functionality

What is the best way to retrieve and save the titles of checked boxes in the Autocomplete using state with hooks?

Is it possible for my code in ReactJS to utilize refs due to the presence of backing instances?

Can you explain the variance between using querySelector() and getElementById/getElementsByClassName/getElementsByTagName()?

Advancement in the processing time of a HTTP response that is significantly prolonged

What seems to be the issue with this particular jQuery collection?

How can I show the total sum of input values in a React.js input box?

Node.js process.exec() function allows you to asynchronously spawn a subprocess

Every time I switch tabs in Material UI, React rebuilds my component

Guide on creating rsa key pair on the client side with angular2

Challenges with JavaScript objects while using d3.js

What could be the reason for the lack of read or write functionality in $cookies for angular version 1.6.6?

Despite being installed, the message 'concurrently: command not found' pops up

Sanitize input data prior to using express-validator in a Node.js application