Ошибка AJAX при передаче переменной в файл PHP

Question

Как работает моя страница:

1. Загружается страница php викторины, и пользователь создает оценку с функцией внутри quiz.js.Затем оценка сохраняется в переменной score внутри quiz.js
2. . После создания оценки пользователь должен нажать кнопку, чтобы перейти к следующему вопросу в викторине на той же странице.Нажатие на кнопку отправит счет в мою базу данных с запросом sql, который у меня есть в sendData.php, без перезагрузки страницы.

Моя кнопка выглядит так:

<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 перед загрузкой файла PHP.Я попытался добавить в форму атрибут 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 не удалась

, то есть запись Ненавязчивый JavaScript затем обеспечивает Прогрессивное улучшение .

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

Переменная $ _POST PHP не заполняется, поскольку вы думаете, что онаполезная нагрузка не кодируется, как обычно, например, при отправке формы.Таким образом, мы можем проанализировать полезную нагрузку JSON (тело), ​​используя:

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