I’ve been working on my first ever project for a customer so it’s very exciting. They are a restaurant and so I wanted them to be able to add dishes to their own menu with an AJAX call.
I just did what I’d been taught at school, which usually worked just fine, except for this time.
There is a problem on line 35/36 where the console.error is. “SyntaxError: Unexpected token ‘o’, “object(Men”… is not valid JSON”
The problem is that I can’t get rid of this error, eventhough I’ve tried different things.
This is my PHP displayMenu file in my Ajax folder
include_once(__DIR__ . "/../bootstrap.php");
if (!empty($_POST)) {
$dish = new Menu();
$dish->setTitel($_POST['titel']);
$dish->setCategory($_POST['categorie']);
$dish->setPrijs($_POST['prijs']);
$dish->setAllergeen($_POST['allergeen']);
$dish->addMenu();
var_dump($dish);
$response = [
'status' => 'success',
'message' => 'comment saved'
];
header('Content-type: application/json');
echo json_encode($response);
}
This is my js file
let titel = document.querySelector('#titel').value;
let categorie = document.querySelector('#categorie').value;
let prijs = document.querySelector('#prijs').value;
let allergeen = document.querySelector('#allergeen').value;
let formData = new FormData();
formData.append("titel", titel);
formData.append("categorie", categorie);
formData.append("prijs", prijs);
formData.append("allergeen", allergeen);
//fetch from displayMenu.php in the ajax folder
fetch('ajax/displayMenu.php'
, {
method: "POST",
body: formData
})
.then(response=>response.json())
.then(result=> {
console.log(result)
})
.catch(error => {
console.error('Error:', error)
})
e.preventDefault();
})
First of all I did google quite a bit on the problem.
I’ve seen videos where the problem was just the fetch URL. I did try to change that a couple of times by adding or removing some dots.
The result was the same.
Then I tried to look in the headers and network tab. It does result in a .php file instead of a .json object. Payloadpreview + response the connection is correct, the objects to get displayed after being refreshed so the fetch result should be fine. As you can see in the payload, the correct things are being put in the database.
I just don’t know how to get rid of the error.