Как получить данные, отправленные ajax в php?
Я все еще студент и новичок в веб-разработке. В настоящее время я изучаю ajax. Я хотел передать (с помощью кнопки) идентификатор моему сценарию PHP для обработки SQL и отображать данные, полученные на моей странице, без ее перезагрузки. Но похоже, что это не работает. После того, как я нажимаю кнопку, она визуально загружает страницу PHP (чего, по моему собственному пониманию, не должно было произойти при использовании ajax).
Код HTML и JavaScript:
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<?php
session_start();
?>
<form action = "retrieve_data.php" method = "POST" name = "searchForm">
EMPLOYEE ID: <input type = "text" name='emp_id' id='emp_id'/>
<input type = "submit" value = "Search" onsubmit = "searchEmp()"/>
</form>
<br>
NAME:<p id = "empName"></p><br>
POSITION:<p id = "empPos"></p>
<script>
function searchEmp() {
var empID = document.getElementById('emp_id').value;
var query = "?emp_id = " + empID;
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
document.getElementById('empName').innerHTML = '<?php echo $_SESSION["empName"]; ?>';
document.getElementById('empPos').innerHTML = '<?php echo $_SESSION["empPosition"];?>';
}
}
xhr.open("GET", "retrieve_data.php" +query, true);
xhr.send(null);
};
</script>
retrieve_data.php:
<?php
session_start();
if (!empty($_GET["emp_id"])){
$_SESSION["emp_id"] = $_GET["emp_id"];
$emp_id = $_SESSION["emp_id"];
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "overtimedtr";
// Create connection
$conn = mysqli_connect($servername, $username, $password, $dbname);
// Check connection
if (!$conn) {
die("Connection failed: " . mysqli_connect_error());
}
$sql = "SELECT * FROM employees where id ='".$emp_id."'";
$result = mysqli_query($conn, $sql);
if (mysqli_num_rows($result) > 0) {
// output data of each row
while($row = mysqli_fetch_assoc($result)) {
$_SESSION["empName"] = $row['name'];
$_SESSION["empPosition"] = $row['position'];
}
} else {
echo "0 results";
}
mysqli_close($conn);
}
?>
Вот изображение моей html-страницы:
Что я пытаюсь сделать, это когда я нажимаю кнопку поиска, страница должна отображать имя и позицию без перезагрузки страницы в элементе <p>, идентификаторы которого - «empName» и «empPos», результат не тот, что я хотел , вместо этого он отображает мою страницу PHP (которая отображается пустой).
Обновлено:
Я обнаружил, что мне не нужно добавлять method = "GET" в форму, тогда страницу не нужно было обновлять, как я и хотел.
<form name = "searchForm">
EMPLOYEE ID: <input type = "text" name='emp_id' id='emp_id'/>
<input type = "submit" value = "Search" onsubmit = "searchEmp()"/>
</form>
Единственная оставшаяся проблема заключается в том, что я не мог получить значение $_SESSION["empName"] и $_SESSION["empPosition"] со своей страницы PHP. Что я мог сделать не так?
if (xhr.readyState == 4) {
document.getElementById('empName').innerHTML = '<?php echo $_SESSION["empName"]; ?>';
document.getElementById('empPos').innerHTML = '<?php echo $_SESSION["empPosition"];?>';
}
Не запускайте session_start дважды. это должно быть только один раз и в начале файла.
Измените onClick на onSubmit и добавьте event.preventDefault(), чтобы остановить действие формы по умолчанию.
@Loek Нет, я очень надеялся, что найду свой ответ, но был разочарован.
@GenesisTepait обратите внимание, что SO - это сообщество, которое делает все возможное, чтобы ответить на каждый вопрос, который мы можем. Тем не менее, мы не можем ответить на все вопросы. Если объяснение Дкнахта вас не устраивает, проведите дополнительное исследование и отредактируйте свой вопрос. Хорошие вопросы обычно требуют хороших ответов.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
В вашем коде много ошибок.
Ошибки в вашем retrieve_data.php
Когда вы используете AJAX, вы не используете $_SESSION для обмена данными; вместо этого вы распечатываете результаты, как на обычной странице, но обычно встраивают в структурированный формат, например JSON или XML. Я рекомендую вам организовать все, что вы собираетесь получить, в массив, а затем использовать функцию кодирования, такую как json_encode, например:
if (mysqli_num_rows($result) > 0) {
// output data of each row
while($row = mysqli_fetch_assoc($result)) {
$result["empName"] = $row['name'];
$result["empPosition"] = $row['position'];
}
} else {
$result["empName"] = '0 results.';
$result["empPosition"] = '0 results.';
}
//json encode prints the result formatted
exit(json_encode($result));
Ошибки в вашем HTML
Прежде всего, когда вы используете AJAX, вы обычноне используете формы, потому что поведение формы по умолчанию - это загрузка страницы; также информация о методе и действии уже дана в методе open(), поэтому вы становитесь избыточным (также обратите внимание, что вы указываете форме использовать POST, а AJAX использовать GET). Лучше используйте кнопку. Если вам нужно использовать формы использования, всегда возвращайте false, чтобы страница не загружалась.
Кроме того, внутри onreadystatechange вы НЕ должны использовать php echo. Помните, что PHP - это препроцессор, и на стороне клиента все напечатанное становится неизменным. Вы должны использовать свойства XMLHttpRequest responseText или responseXML. Это свойства содержать полученного ответа.
Если вы последуете моей рекомендации по использованию json_encode в вашем php файле, тогда вам нужно будет использовать JSON.parse для обработки полученных данных.
Также в строке запроса не используйте пробелы
Так например:
EMPLOYEE ID: <input type = "text" name='emp_id' id='emp_id'/>
<button onclick = "searchEmp()">Search</button>
<br>
NAME:<p id = "empName"></p><br>
POSITION:<p id = "empPos"></p>
<script>
function searchEmp() {
var empID = document.getElementById('emp_id').value;
var query = "?emp_id = " + empID;
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
jsonResponse = JSON.parse(xhr.responseText);
document.getElementById('empName').innerHTML = jsonResponse.empName;
document.getElementById('empPos').innerHTML = jsonResponse.empPosition;
}
}
xhr.open("GET", "retrieve_data.php" + query, true);
xhr.send(null);
}
</script>
Я рекомендую вам проверить базовую документацию AJAX, потому что кажется, что у вас есть некоторая путаница в некоторых концепциях AJAX.
https://www.w3schools.com/xml/ajax_intro.asp
Позвольте мне знать, если у вас есть какие-либо другие вопросы.
Я только что обнаружил, что мой if (xhr.readyState == 4) даже не запускается. Почему? Есть ли какие-то особые требования для его выполнения? Я знаю, что «4» - это числовой код, который означает «после того, как запрос был завершен, и данные ответа были полностью получены с сервера», но я думаю, что этого не происходит, я что-то упускаю?
Все тот же. Я добавил alert(""+xhr.readystate) под xhr.send(), там написано 1. Как это имеет смысл?
Нет, у вас путаница. После вызова send () скрипт завершится. Затем, когда в запросе произойдет изменение, JavaScript вызовет метод onreadystatechange асинхронно. Если вы поместите alert () в onreadystatechange (скажем, до if (xhr.readyState == 4) {), вы заметите, что это будет выполнено 4 раза. Я предлагаю вам поставить предупреждение (this.readyState), чтобы увидеть, что вы получите.
Я поставил alert(this.readyState) перед (xhr.readyState == 4), и он 4 раза предупреждал: 1 в качестве первого, затем 2, 3, и к последнему времени в моем предупреждении указано 4. Это смутило меня еще больше lol
Это означает, что все из запроса ajax в порядке. Теперь после if (xhr.readyState == 4) { поставьте alert(this.responseText) и скажите, что там показывает. Вероятно, у вас есть синтаксическая ошибка в вашем PHP, поэтому JSON не возвращается (возвращается с некоторым предупреждением, которое не позволяет правильно его проанализировать)
Я ошибаюсь, думая, что мой PHP не тот? потому что я сменил свой document.getElementById('empName').innerHTML = jsonResponse.empName; document.getElementById('empPos').innerHTML = jsonResponse.empPosition; на document.getElementById("empName").innerHTML = "NICE!" document.getElementById("empPos").innerHTML = "NICE!", но он все еще не работает, вот что меня действительно смутило.
закройте первые две строки выше и посмотрите, работает ли это. Я имею в виду, просто оставьте document.getElementById ("empName"). InnerHTML = "ПРИЯТНО!" document.getElementById ("empPos"). innerHTML = "ПРИЯТНО!" и давайте посмотрим, не сработает ли это по-прежнему
Возможный дубликат Как передать переменные JavaScript в PHP?