Axios - sending json to php page

[FraserMcT]

Hello,
I’ve set up an axios post request to a php script - this is to send an email (simple! or so I would have thought)
My script seems to be working correctly, as I can save the json to a seperate file and retrieve the information via the php script.
Therefore I think there might something wrong with the post request?
Here is the js:

    onSubmit (name, email, message) {
      const newdata = {
        name: this.name,
        email: this.email,
        message: this.message
      }

      this.$axios.post('linkto.php', null, { headers: {'Content-Type': 'application/json'}, params: newdata })

        .then(response => {
          console.log(response)
        })
        .catch(error => {
          console.log(error)
        })
        .finally(function () {
        })
    },

And this is an example of the json:

{
  "data": "Message sent.",
  "status": 200,
  "statusText": "OK",
  "headers": {
    "date": "Thu, 06 Jun 2019 22:50:43 GMT",
    "server": "nginx",
    "connection": "close",
    "transfer-encoding": "chunked",
    "content-type": "application/json"
  },
  "config": {
    "url": "linkto.php",
    "method": "post",
    "params": {
      "name": "Fraser",
      "email": "testg@gmail.com",
      "message": "message"
    },
    "data": null,
    "headers": {
      "Accept": "application/json",
      "Content-Type": "application/json"
    },
    "transformRequest": [
      null
    ],
    "transformResponse": [
      null
    ],
    "timeout": 0,
    "xsrfCookieName": "XSRF-TOKEN",
    "xsrfHeaderName": "X-XSRF-TOKEN",
    "maxContentLength": -1
  },
  "request": {}
}

php file for ref

$json_str = file_get_contents('php://input');
$json_obj = json_decode($json_str);
echo $json_obj['params']['name'];

I’ve been scratching my head for days now, but am new to axios, quasar and vue!

Thanks for any help given.

[metalsadman]

@FraserMcT on your php code. $json_obj = json_decode($json_str, true) so that it will decode into an associative array.

[FraserMcT]

Thanks metalsadman, however this didn’t work for me.

[metalsadman]

@FraserMcT what does your console.log says in your axios requests?

[FraserMcT]

I took the JSON from the console log above - it is status 200. Is this what you are asking for ? Or am I missing something?

[metalsadman]

@FraserMcT i think the syntax is wrong for axios.post method, try this this.$axios.post('linkto.php', newdata, { headers: {'Content-Type': 'application/json'}}) https://github.com/axios/axios#axiosposturl-data-config.

[FraserMcT]

@metalsadman I had tried this previously, however the json wasn’t sending as it should. See what I get with the suggested. I don’t think this is valid? But as I said I’m new to axios and ajax… This is from the console log

{
  "data": "Message sent.",
  "status": 200,
  "statusText": "OK",
  "headers": {
    "date": "Fri, 07 Jun 2019 17:38:02 GMT",
    "server": "nginx",
    "connection": "close",
    "transfer-encoding": "chunked",
    "content-type": "application/json"
  },
  "config": {
    "url": "sendto.php",
    "method": "post",
    "data": "{\"name\":\"fraser\",\"email\":\"email@email.com\",\"message\":\"testing this\"}",
    "headers": {
      "Accept": "application/json",
      "Content-Type": "application/json"
    },
    "transformRequest": [
      null
    ],
    "transformResponse": [
      null
    ],
    "timeout": 0,
    "xsrfCookieName": "XSRF-TOKEN",
    "xsrfHeaderName": "X-XSRF-TOKEN",
    "maxContentLength": -1
  },
  "request": {}
}

[metalsadman]

@FraserMcT try to echo the whole request in your php script see what you got. i see nothing wrong with the request, your server replied with that data: "Message sent.".

[FraserMcT]

@metalsadman - thank you very much!
I have to admit my stupidity - I have been making my life difficult by saving the variable as a file to view the contents - not realising that I could echo as a response. I also thought that by having quotes in the json that it made it invalid, but it didn’t.
Thank you for your patience and for your help.