将变量传递到PHP文件时出现AJAX错误

Question

How my page works:

1. The quiz php page loads and the user generates a score with a function inside quiz.js . The score is then saved in a variable score inside quiz.js
2. After generating the score, the user has to press a button to go to the next question in the quiz inside the same page. Pressing the button would send the score to my database with a sql query I have in sendData.php , without reloading the page.

My button looks like this:

<form id="sendData" action="sendData.php" method="post">
  <button type="submit" name="send" onclick="sendAjax()">Send</button>
</form>

sendData.php is already finished and working, but for some reason, sendAjax() doesn't work at all:

function sendAjax() {
  $.ajax({
    url:  "sendData.php",
    type: "POST",
    data: {
      score: score,
      numQuiz: numQuiz
    },
    success: function() {
      alert("Data succesfully sent");
    },
    error: function() {
      alert("There has been an error");
    }
  })
}

And my PHP file being like this:

if (isset($_POST['score']) and isset($_POST['numQuiz'])) {
    $score = $_POST['score'];
    $numQuiz = $_POST['numQuiz'];
    // SQL query and stuff goes here
}

But it seems that $_POST['score'] and $_POST['numQuiz'] aren't set. Also, I can see the error pop up inside sendAjax before it loads the PHP file. I've tried adding to the form the attribute action="" but it doesn't work either.

Answer 1

 <form id="sendData" action="sendData.php" method="post"> <button type="submit" name="send" onclick="sendAjax()">Send</button> </form> 

You're running the JS when you click a submit button in a form.

So the JS runs, then the browser immediately navigates to a new page (submitting the form, with no data in it, to the PHP) and the XMLHttpRequest object is destroyed before it receives a response.

You then see the result of the standard form submission.

If you just want a button to trigger some JavaScript, then use a non-submit button ( <button type="button" ), and don't put it in a form.

Better yet:

1. switch away from onclick attributes (they have a variety of issues) in favour of addEventListener providing a submit event listener on the form
2. Use preventDefault() to stop the form submission when the JS is successful
3. Put form controls in the form so it submits useful data when the JS isn't successful

ie write Unobtrusive JavaScript then provides Progressive enhancement .

Answer 2

Two things:

You need to tell jQuery to use the application/json content-type:

function sendAjax() {
  $.ajax({
    url:  "sendData.php",
    type: "POST",
    contentType: 'application/json',
    dataType: 'json',
    data: {
      score: score,
      numQuiz: numQuiz
    },
    success: function() {
      alert("Data succesfully sent");
    },
    error: function() {
      alert("There has been an error");
    }
  })
}

PHP's $_POST variable is not populated as you think it is as the payload is not urlencoded as is standard with say a form submit. So we can parse the JSON payload (body) ussing:

$myData = json_decode(file_get_contents("php://input"));
var_dump($myData->score);