using ajax post request to pass values to php but database receives null values

Question

SOLVED I followed the solution proposed by @Quantin now all works as expected. Thanks!

" //convert form data to json — There's your problem. PHP doesn't support that. The duplicate explains how to work around that but, frankly, just pass formData to send and remove xhr.setRequestHeader('Content-Type', 'application/json'); and all the code to convert to JSON. "

I have an html form that I'm using ajax POST request to pass its values to a php file which sends the data to a Phpmyadmin database.

although I can see in the developer tools / Network tab that the request sent to PHP contains the Json data of the form in the request body, PHP sends null values to my database and I can't figure out why.

Codes:

HTML Form + Ajax: `

<form id="myForm">
          <p class="question">
            Is this the first time you have visited the website?
          </p>
          <div class="question-answer">
            <label><input type="radio" value="true" name="visited" /> Yes</label>
            <label><input type="radio" value="false" name="visited" /> No</label>
          </div>
              <p class="question">
            How would you rate your experience so far?
          </p>
          <div class="question-answer">
            <label><input type="radio" value="Very bad" name="experience"/> Very bad</label>
            <label><input type="radio" value="Bad" name="experience" /> Bad</label>
            <label><input type="radio" value="Average" name="experience" /> Average</label>
            <label><input type="radio" value="Good" name="experience" /> Good</label>
            <label><input type="radio" value="Very good" name="experience" /> Very good</label>
          </div>
          <p class="question">
            What is the likelihood that you will visit the website again?
          </p>
          <div class="question-answer">
            <label>
              <input type="radio" value="Not at all likely" name="likelihood" /> Not at all
              likely
            </label>
            <label>
              <input type="radio" value="Slightly likely" name="likelihood" /> Slightly
              likely
            </label>
            <label>
              <input type="radio" value="oderately likely" name="likelihood" /> Moderately
              likely
            </label>
            <label>
              <input type="radio" value="Very likely" name="likelihood" /> Very likely
            </label>
            <label>
              <input type="radio" value="Extremely likely" name="likelihood" /> Extremely
              likely
            </label>
          </div>
          <p class="question">
            Please recommend one feature, design change, anything that you would like to see us change or add to the website
          </p>
          <textarea rows="3" cols="50" name="recommendation"></textarea>
          <div class="submit">
            <input type="submit" href=""></input>
          </div>
        </form>


    <script>

    document.getElementById('myForm').addEventListener('submit', function(event) {
    event.preventDefault();
    //retreive form data
    const formData = new FormData(myForm);
    //convert form data to json
    const data = {};
    for (const [key, value] of formData.entries()) {
      data[key] = value;
    }
    // Send a request to the server to process the form data
    var xhr = new XMLHttpRequest();
    xhr.open('POST', 'form.php', true);
    xhr.setRequestHeader('Content-Type', 'application/json');
    xhr.onload = function() {
    if (xhr.status === 200) {
    const response = JSON.parse(this.responseText);
      document.querySelector("body > div.returning-user-wrapper > div > div > h2").innerHTML =    response.title
      //  `You Are Awesome!`
       document.getElementById('myForm').innerHTML = response.message
     } 
     localStorage.setItem("form","submitted");
      };
     xhr.send(JSON.stringify(data));
     });


            </script>

PHP:

   $mysqli = new mysqli($servername, $username, $password, $database);


    $visited = $_POST['visited'];
    $experience = $_POST['experience'];
    $likelihood = $_POST['likelihood'];
    $recommendation = $_POST['recommendation'];
    }
  
    // Prepare the INSERT statement
    $stmt = $mysqli->prepare("INSERT INTO sudoku_feedback (first_time, experience, return_likelihood,recommendation) VALUES (?,?,?,?)");
  
    // Bind the values to the placeholders
    $stmt->bind_param("ssss", $visited, $experience, $likelihood, $recommendation);

    // Execute the statement
    $stmt->execute();

I Read a lot online but couldn't find anything that could help me. I tried using isset on the key names, which didn't help.

If I replace the '?' with text values, they are passed correctly to the database.