2 pièce(s) jointe(s)
communication depuis server Vue Vite vers server Symfony6
Salut,
J'arrive a envoyer 1 json depuis Symfony vers Vite Vue mais pas le contraire.
Ma variable part bien du server Vite Vue, mais Symfony n'arrive pas à la récupérer.
Voici le code des 2 fichiers et des screens de la console firefox et du resultat affiché dans le controller Symfony
le fichier view01.vue
Code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70
|
<script setup lang = 'ts'>
import { ref } from 'vue'
const message = ref('')
fetch("/api")
.then(response => response.json())
.then(data => {
message.value = JSON.stringify(data);
});
const V01 = ref("Please enter value to send to Symfony");
function onSubmit() {
const obj = {
value: V01.value
};
// console.log("Submitting value: ", JSON.stringify({ value: V01.value }));
// Log the JSON string to the console
console.log(JSON.stringify(obj));
// Do something with the submitted value
fetch('https://localhost:8000/api/receive/data/php', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
// body: JSON.stringify({ value: V01.value })
body: JSON.stringify(obj)
})
.then(response => {
// handle response
})
.catch(error => {
// handle error
console.log(error)
});
}
</script>
<template>
<main>
<section class="section01">
{{ message }}
<br>
<form @submit.prevent="onSubmit">
<label for="inputField">Please enter value to send to Symfony</label>
<br>
<input type="text" id="inputField" v-model="V01" />
<br>
<button type="submit">ENTER</button>
</form>
</section>
</main>
</template>
<style scoped>
.section01 {
width: 800px;
height: 400px;
background-color: green;
padding: 50px;
border: 6px solid #000000;
}
</style> |
le fichier controller de Symfony6: ReceiveDataPhpController
Code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67
|
<?php
namespace App\Controller;
use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\HttpFoundation\Response;
use Symfony\Component\Routing\Annotation\Route;
class ReceiveDataPhpController extends AbstractController
{
#[Route('/api/receive/data/php', name: 'app_receive_data_php')]
public function index(Request $request): Response
{
// Get the JSON object from the request body
$jsonObject = $request->getContent();
// Output a message to confirm that the code is being executed
echo "The controller code is being executed<br>";
// Output the JSON object for debugging
var_dump($jsonObject);
echo "Length of JSON object: " . strlen($jsonObject) . "<br>";
if($jsonObject) {
echo "<br>";
echo "tt bon";
} else {
echo "pas tt bon";
}
echo "<br>";
// Decode the JSON object into an associative array
$data = json_decode($jsonObject, true);
if (json_last_error() !== JSON_ERROR_NONE) {
$errorMsg = json_last_error_msg();
echo "Error decoding JSON data: " . $errorMsg . "<br>";
}
var_dump($data);
echo "<br>";
if ($data === null) {
// handle the case when the JSON data cannot be decoded
return new Response('The JSON data is invalid');
}
// Check if the 'value' element is set in the $data array
if (isset($data['value'])) {
$value = $data['value'];
return $this->render('receive_data_php/index.html.twig', [
'controller_name' => 'ReceiveDataPhpController',
'value' => $value,
]);
} else {
// handle the case when the 'value' element is not set
return new Response('The value element is not set in the JSON data');
}
}
} |
et les screen
de la console firefox:
Pièce jointe 634836
puis de ce que je vois ds le template twig du fichier controller de Symfony6
Pièce jointe 634837
Voilà, je ne sais pas ce qui se passe, donc si vous avez des pistes.
En vous remerciant,
grub