CODEWITHSUNDEEP
javascriptajaxpostvue.jsaxios
Plastic
Plastic

Reputation: 10328

Passing params through axios post call

I'm currently using vue-resource to perform some ajax call in my webpack project. As soon as I make "get" calls all works perfectly but when I try a post one my PHP does not get any parameter and if I try to do var_dump($_POST) the result is an empty array. My code is quite basic :

let data = {req: 'req_tipe', ch: 001 };
this.$http.post('compute.php', data).then(response => {
    //do stuff with response if ok             
    },
    response => {
    //do stuff about error
    });

I can't figure out what I'm missing

UPDATE: I did the same with axios and vue-axios but my issue still remain: no post parameters

let data = {req: 'req_tipe', ch: 001 };
this.axios.post('compute.php', data).then(response => {
    //do stuff with response if ok             
    },
    response => {
    //do stuff about error
    });

Upvotes: 1

Views: 8145

Answers (2)

Iarwa1n
Iarwa1n

Reputation: 460

The problem is, that you do a POST request with Content-Type "application/json" which is the default in Axios when you send an object as data.

PHPS $_POST only works when the request is sent with application/x-www-form-urlencoded as the content type and the data as a Querystring.

When using a library like qs, the following should work:

var qs = require('qs');
axios.post('/foo', qs.stringify({ 'bar': 123 });

axios automatically uses the right content type when the input data is a querystring.

You also can use the json data, but then you have to change the PHP backend into something like this:

$data = json_decode(file_get_contents('php://input'), true);
print_r($data);

Some frameworks like Symphony can handle this automatically.

Upvotes: 1

gy134340
gy134340

Reputation: 596

Maybe you can change like following:

let data = new FormData();
data.append('req','req tipe');
data.append('ch','001');
this.axios.post('compute.php', data).then(response => {
//do stuff with response if ok             
},
response => {
//do stuff about error
})

have a try, or see issues 318 for more information.

Upvotes: 4

Related Questions