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

Question

我的页面如何运作:

1. 加载测验 PHP 页面，用户使用 quiz.js 中的函数生成分数。然后将分数保存在 quiz.js
内的变量 score 中
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'] 未设置。另外，在加载 PHP 文件之前，我可以看到 sendAjax 中弹出错误。我尝试向表单添加属性 action="" 但它也不起作用。

Answer 1

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

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

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

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

如果您只是想要一个按钮来触发一些 JavaScript，请使用非提交按钮 ( <button type="button" )，并且不要将其放在表单中。

更好的是:

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

即写Unobtrusive JavaScript然后提供Progressive enhancement .