Question

我的页面如何工作：

测验php页面已加载，并且用户使用quiz.js中的函数生成了分数。然后将分数保存在score内的变量quiz.js
生成分数后，用户必须按下按钮以转到同一页面内测验中的下一个问题。按下按钮会将分数与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"），并且不要将其放在表单中。

更好：

放弃onclick属性（它们有很多问题），而赞成addEventListener在表单上提供submit事件监听器
当JS成功执行时，使用preventDefault()停止提交表单
将表单控件放入表单中，以便在JS不成功时提交有用的数据

即写Unobtrusive JavaScript，然后提供Progressive enhancement。

Answer 2

两件事：

您需要告诉jQuery使用application / 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变量未按您认为的那样进行填充，因为有效载荷没有按照标准格式（例如提交表单）进行urlencode编码。因此，我们可以使用以下方式解析JSON有效负载（正文）：

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

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

2 个答案: