A comprehensive guide on using ajax to reproduce a Postman POST API request

Question

A comprehensive guide on using ajax to reproduce a Postman POST API request

Currently, I am able to retrieve an "access_token" using Postman; however, I am attempting to recreate this process in ajax for experimentation purposes on jsfiddle.

In Postman, the following setup is used:

A POST request URL:
No active headers
Body includes four key-value pairs (refer below)

https://i.sstatic.net/F8vJs.png

Executing the request results in a response containing the access_token:

https://i.sstatic.net/BfH5y.png

For replicating this in ajax, with assistance from others, the following script was created:

$.ajax({
  type: 'POST',
  url: 'https://login.microsoftonline.com/***/oauth2/token',
  data: JSON.stringify({
    grant_type: 'client_credentials',
    client_id: '***',
    client_secret: '***',
    resource: 'https://analysis.windows.net/powerbi/api'
  }),
  success: data => {
    console.log(data.access_token)
  },
  error: (xhr, textStatus, error) => {
    console.log('rr', error)
  }
});

However, every time this script is run, it returns an error in the console:

https://i.sstatic.net/IiJoi.png

Although I believe I am close to resolving the issue, I have not been able to figure it out yet.

javascript ajax

Answer 1

Answer №1

Your POST request is in x-www-form-urlencoded format, but the data sent via ajax is in a json string.

When passing data as a string, it should already be encoded using the appropriate encoding for the contentType, which defaults to

application/x-www-form-urlencoded

.

With object data, jQuery automatically generates the data string from the key/value pairs unless the processData option is disabled. For instance, { a: "bc", d: "e,f" } is converted to the string "a=bc&d=e%2Cf". If a value is an array, jQuery serializes multiple values with the same key based on the traditional setting (explained below). For example, { a: [1,2] } becomes the string "a%5B%5D=1&a%5B%5D=2" with traditional set to false by default.

https://api.jquery.com/jquery.ajax/

Therefore, you can try omitting the use of JSON.stringify and directly pass the POJO. For example:

$.ajax({
  type: 'POST',
  url: 'https://login.microsoftonline.com/***/oauth2/token',
  data: {
    grant_type: 'client_credentials',
    client_id: '***',
    client_secret: '***',
    resource: 'https://analysis.windows.net/powerbi/api'
  },
  success: data => {
    console.log(data.access_token)
  },
  error: (xhr, textStatus, error) => {
    console.log('rr', error)
  }
});

Answer 2

Your POST request is in x-www-form-urlencoded format, but the data sent via ajax is in a json string.

When passing data as a string, it should already be encoded using the appropriate encoding for the contentType, which defaults to

application/x-www-form-urlencoded

.

With object data, jQuery automatically generates the data string from the key/value pairs unless the processData option is disabled. For instance, { a: "bc", d: "e,f" } is converted to the string "a=bc&d=e%2Cf". If a value is an array, jQuery serializes multiple values with the same key based on the traditional setting (explained below). For example, { a: [1,2] } becomes the string "a%5B%5D=1&a%5B%5D=2" with traditional set to false by default.

https://api.jquery.com/jquery.ajax/

Therefore, you can try omitting the use of JSON.stringify and directly pass the POJO. For example:

$.ajax({
  type: 'POST',
  url: 'https://login.microsoftonline.com/***/oauth2/token',
  data: {
    grant_type: 'client_credentials',
    client_id: '***',
    client_secret: '***',
    resource: 'https://analysis.windows.net/powerbi/api'
  },
  success: data => {
    console.log(data.access_token)
  },
  error: (xhr, textStatus, error) => {
    console.log('rr', error)
  }
});

A comprehensive guide on using ajax to reproduce a Postman POST API request

Answer №1

Similar questions

Sending data from the View to the Controller using AJAX in Laravel 5

Tips for selecting a specific item in a list using onClick while iterating through a JSON array in React

Achieving a Transparent Flash overlay on a website without hindering its usability (attention, interaction, form submissions, etc.)

How to Utilize Custom Component Tag Names in CSS with Vue.js 2?

What is the correct way to securely send the username and password from a ReactJS frontend to the backend for authentication?

Querying MongoDB with a JavaScript file for formatting datetime values

Greetings: Obtaining an array of text within the <td> tags

JavaScript: Populating an Array with Image URLs Using a Loop

Generating an HTML table with JSON data in JavaScript

Tips for preventing Django template from showing up prior to VueJS rendering

What is the best way to send $(this) to a function?

In order to use Vue3 with Vite, it is necessary to use kebab case tags for custom components, whereas Vue3 CLI allows the

Retrieving an AJAX array POST in Laravel 5 Controller

Clearing the filename in a file type input field using React

Can an image be uploaded using solely jQuery without relying on PHP?

Tips on finding a JavaScript file using Google search

The presence of Vue refs is evident, though accessing refs[key] results in an

Invoke actions when clicking outside of components

"Effortlessly Load Content in Drupal7 Using jQuery AJAX without Refreshing the

Modifying the <TypescriptModuleKind> setting for typescript transpilation in project.csproj is not supported in Visual Studio 2017