1

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 **/
Yahoo
  • 558
  • 11
  • 34
  • 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 Sep 05 '21 at 18:13
  • You also have a typo in your Vue component. Your data object contains a `customrName` property instead of `customerName` – rickdenhaan Sep 05 '21 at 18:31

1 Answers1

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.

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335