Soy nuevo en Vue y para este proyecto, estaba tratando de pasar el valor del nombre del cliente variable al archivo PHP donde buscará el nombre del cliente. Puedo pasar el valor de axios.post siguiendo este enlace de stackoverflow , pero mi archivo PHP no recibe ni imprime el valor.
¿Hay alguna forma de pasar el valor de axios.post y recibir/imprimir en un archivo PHP?
Vista
<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>
Método
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); }); } } })
archivo PHP
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 **/
Tienes cuatro problemas.
Estás publicando un objeto FormData
. Eso generará una solicitud de varias partes y no una solicitud JSON.
Lee los datos de $_POST
. Manténgase alejado de php://input
.
Envía el nombre del customerName
e intenta leer el nombre del customer_name
. Elige uno y quédate con él.
Dijiste header("Content-type: application/json";
pero estás generando la entrada del usuario sin procesar. Esto es text/plain
y no application/json
.
Utilice el tipo de contenido correcto o codifique la salida como JSON.
El )
falta en la llamada al header
.