将变量传递给PHP文件时发生AJAX错误

Question

我的页面是如何工作的：

1. quiz页面加载，用户使用quiz.js中的一个函数生成一个分数。然后将分数保存在quiz.js内的变量quiz.js中。
2. 在生成分数之后，用户必须按下一个按钮才能在同一页内的测验中找到下一个问题。按下按钮将使用我在sendData.php中的sql查询将分数发送到我的数据库，而不需要重新加载页面。

我的按钮看起来是这样的：

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

sendData.php已经完成并正在工作，但由于某种原因，sendAjax()根本无法工作：

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");
    }
  })
}

我的PHP文件是这样的：

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

但似乎$_POST['score']和$_POST['numQuiz']还没有设置好。此外，在加载sendAjax文件之前，我可以看到这个错误在中弹出。我尝试将属性action=""添加到表单中，但它也不起作用。

Answer 1

单击表单中的submit按钮时，您正在运行JS。

因此JS运行，然后浏览器立即导航到一个新页面(将表单(其中没有数据)提交到PHP)，XMLHttpRequest对象在收到响应之前被销毁。

然后您将看到标准表单提交的结果。

如果您只想要一个按钮触发一些JavaScript，那么使用一个非提交按钮(<button type="button")，不要将它放在表单中。

更好的是：

1. 从onclick属性(它们有各种各样的问题)切换到addEventListener，在表单上提供submit事件侦听器
2. 当JS成功时，使用preventDefault()停止表单提交
3. 将表单控件放在表单中，以便在JS不成功时提交有用的数据

也就是说，写非突发性JavaScript然后提供渐进增强。

Answer 2

有两件事：

您需要告诉jQuery使用应用程序/json内容类型：

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的$_POST变量不像您所认为的那样被填充，因为有效负载没有按照标准的方式进行编码，比如表单提交。因此，我们可以解析JSON有效负载(body) ussing：

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