CODEWITHSUNDEEP
javascriptjqueryajaxaxiosput
duckduck123
duckduck123

Reputation: 15

How to do a PUT request with jQuery / Axios? It always returns error 400

To begin with, how can I do a PUT request in JavaScript? (for context, I'm developing a Vue app) The same request In postman or any rest client works perfectly, and I found that the problem Is that the Api expects the body to be "Content-Type": "application/x-www-form-urlencoded" but sending It through Javascript just send It In plain JSON or not In a format understandable by the API.

I tried: $.put("...") but It returns function not found. I tried a basic Ajax call with type / _method = "put" but It doesn't work either because the content sent do not match.

What does the API expect?

person: {info: {name: "--", surname: "---"}}
location: {info: {city: "--", postalc: "---"}}
ref: 1234

How I'm sending it?

JSON.stringify({
person: {info: {name: "--", surname: "---"}}
location: {info: {city: "--", postalc: "---"}}
ref: 1234
})

Or

$.param(({
person: {info: {name: "--", surname: "---"}}
location: {info: {city: "--", postalc: "---"}}
ref: 1234
})

Request example with Axios:

const res = axios.put(
              "http://" + api + "/sendClientInfo/",
              {
                $.param(({
                person: {info: {name: "--", surname: "---"}}
                location: {info: {city: "--", postalc: "---"}}
                ref: 1234
                }),
              },
              {
                headers: {
                  "Content-Type": "application/x-www-form-urlencoded",
                },
              }
            );

Example with jQuery

$.ajax("http://" + api + "/sendClientInfo/", {
              type: "PUT",
              data: JSON.stringify(data),
              contentType: "application/json",
              success: function () {
                console.log("exit");
              },

Upvotes: 1

Views: 498

Answers (1)

Phil
Phil

Reputation: 164766

What does the API expect?

person: {info: {name: "--", surname: "---"}}
location: {info: {city: "--", postalc: "---"}}
ref: 1234

To me, this looks like the API expects 3 application/x-www-form-urlencoded parameters with the first two holding JSON values.

To achieve that, you'd want something like this

const person = { info: { name: "--", surname: "---" } }
const location = { info: { name: "--", surname: "---" } }
const data = {
  person: JSON.stringify(person), // encode these values as JSON
  location: JSON.stringify(location),
  ref: 1234
}

const url = `http://${api}/sendClientInfo/`

// jQuery
$.ajax({
  url,
  method: "PUT",
  data
})

// Axios
axios.put(url, new URLSearchParams(data))

jQuery's default data payload format is application/x-www-form-urlencoded. Objects are encoded via the $.param() method.

Axios will also use application/x-www-form-urlencoded if presented with a URLSearchParams data instance. This does the same thing as $.param()

Both payloads will be encoded as

person=%7B%22info%22%3A%7B%22name%22%3A%22--%22%2C%22surname%22%3A%22---%22%7D%7D&location=%7B%22info%22%3A%7B%22city%22%3A%22--%22%2C%22postalc%22%3A%22---%22%7D%7D&ref=1234

Upvotes: 1

Related Questions