Как получить текст возврата из файла PHP с помощью ajax?
Ajax также известен как асинхронный JavaScript, а XML - это серия методов веб-разработки, которые создают асинхронные веб-приложения с использованием многих веб-технологий на стороне клиента. Без перезагрузки веб-страницы AJAX позволяет отправлять и получать информацию асинхронно.
Подход: при нажатии кнопки мы инициализировали объект XMLHttpRequest , который отвечает за выполнение вызовов AJAX. Затем мы должны проверить, равно ли значение readyState 4, что означает, что запрос выполнен, и мы получили ответ от сервера.
Затем мы проверили, равен ли код состояния 200, что означает, что запрос был успешным. Наконец, мы получаем ответ, который хранится в свойстве responseText объекта XMLHttpRequest . После настройки слушателя мы инициируем запрос, вызывая метод open объекта XMLHttpRequest. Затем вызовите метод send объекта XMLHttpRequest , который фактически отправляет запрос на сервер. Когда сервер отвечает, вы можете увидеть текст, отображающий ответ из файла PHP.
HTML код:
HTML
<!DOCTYPE html>< html > < body > < button type = "button" id = "fetchBtn" >Click Me!</ button > < p id = "txt" ></ p > < script > let fetchBtn = document.getElementById('fetchBtn'); fetchBtn.addEventListener('click', buttonClickHandler); function buttonClickHandler() { // Instantiate an xhr object var xhr = new XMLHttpRequest(); // What to do when response is ready xhr.onreadystatechange = () => { if (xhr.readyState === 4) { if (xhr.status === 200) { document.getElementById("txt") .innerHTML = xhr.responseText; } else { console.log('Error Code: ' + xhr.status); console.log('Error Message: ' + xhr.statusText); } } } xhr.open('GET', 'data.php'); // Send the request xhr.send(); } </ script ></ body > </ html > |
Код PHP: Ниже приведен код для файла «data.php», использованного в приведенном выше коде HTML.
PHP
<html> <body> <?php echo "<h1>Welcome to GfG</h1>"; ?> </body></html> |
Выход:
