PHP file does not receive variable from axios post

Question

I am new to Vue and for this project, I was trying to pass variable customer name value to PHP file where it will search the customer name. I am able to pass the value from axios.post following this stackoverflow link , still my PHP file does not receive or print out the value.

Is there a way to pass value from axios.post and receive/print out in PHP file?

View

<div id="app">
  <input type="text" v-model="customerName" placeholder="Enter customer first name">
  <button type="button" @click="buttonClicked()">
    Click
  </button>
</div>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

Method

new Vue({
  el: "#app",
  data: {
    customrName : '',
  },
  methods: {
    buttonClicked(){
      
      var form = new FormData();
      form.append('customerName', this.customerName);

      axios.post(url,{
        form
      })
      .then(function (response) {
        console.log(response);
      })
      .catch(function (error) {
        console.log(error);
      });
    }
  }
})

PHP file

header("Content-type: application/json";
$data = json_decode(file_get_contents("php://input"), TRUE);
$CustomerName = $data['customer_name'];
echo $CustomerName;  /** does not print out the customer name typed from VIEW input field **/

You're adding the data as customerName in your FormData object in JS but are trying to retrieve it as customer_name in PHP. Those are two completely different names/keys. — M. Eriksson
– M. Eriksson, Commented Sep 5, 2021 at 18:13
You also have a typo in your Vue component. Your data object contains a customrName property instead of customerName — rickdenhaan
– rickdenhaan, Commented Sep 5, 2021 at 18:31

Quentin · Accepted Answer · 2021-09-05 20:16:55Z

2

You have four problems.

The data format you are sending

You're POSTing a FormData object. That will generate a multipart request and not a JSON request.

Read the data from $_POST. Stay away from php://input.

The name of your field

You send customerName and try to read customer_name. Pick one and stick with it.

The content-type you respond with

You said header("Content-type: application/json"; but you are outputting the user input raw. This is text/plain and not application/json.

Either use the right content-type or encode the output as JSON.

You also made a typo.

The ) is missing from the call to header.

edited Sep 5, 2021 at 20:16

answered Sep 5, 2021 at 18:04

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

PHP file does not receive variable from axios post

1 Answer 1

The data format you are sending

The name of your field

The content-type you respond with

You also made a typo.

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

The data format you are sending

The name of your field

The content-type you respond with

You also made a typo.

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related