Работа с Ajax, PHP и MySQL

Предисловие

В этом руководстве мы увидим, как заставить Ajax работать с PHP и MySQL. Мы создадим небольшое веб-приложение. Таким образом, как только вы начинаете вводить алфавит в заданном поле ввода, запрос отправляется в файл PHP через Ajax, выполняется запрос к таблице MySQL, он возвращает некоторые результаты, а затем эти результаты извлекаются с помощью Ajax и отображаются. .

Давайте погрузимся и разберемся, как это работает.

Таблица MySQL

Ниже представлена ​​структура таблицы MySQL, которую мы использовали.

Пользовательский интерфейс для ввода данных

У нас есть простой пользовательский интерфейс, созданный с помощью HTML и CSS, где пользователь может вводить данные в поле ввода.

HTML-код

Это базовый HTML-код. Хотя мы внесем в него изменения и добавим код JavaScript позже.

          body {padding-top: 40px;  padding-left: 25%} li {стиль списка: нет;  маржа: 5px 0 5px 0;  color: # FF0000}     
  Книга  
  
 
 
 
  Отправить  
 
    
 Ниже приведен скриншот того, как это выглядит 
 
 Отправить данные на сервер с помощью Ajax 
 
 Теперь мы создадим код JavaScript для отправки данных на сервер.  И мы вызовем этот код при событии onkeyup указанного поля ввода.  
 
  function book_suggestion () {var book = document.getElementById ("book"). value; var xhr;  if (window.XMLHttpRequest) {//Mozilla, Safari, ... xhr = new XMLHttpRequest ();} else if (window.ActiveXObject) {//IE 8 и старше xhr = new ActiveXObject ("Microsoft.XMLHTTP");  } var data = "book_name =" + книга;  xhr.open ("POST", "book-offer.php", true);  xhr.setRequestHeader ("Content-Type", "application/x-www-form-urlencoded");  xhr.send (data);}  
 Объяснение приведенного выше кода 
  var book = document.getElementById ("book"  ). value;  
 Собирается значение поля ввода, идентификатор whoose - 'book'. 
  var xhr;  if (window.XMLHttpRequest) {//Mozilla, Safari, ... xhr = new XMLHttpRequest ();} else if (window.ActiveXObject) {//IE 8 и старше xhr = new ActiveXObject ("Microsoft.XMLHTTP");  }  
 Объявляется переменная xhr.  Затем создается новый объект XMLHttpRequest.  Если ваша целевая аудитория использует браузеры старше Internet Explorer 8, ActiveXObject используется для создания XMLHttpRequest. 
  var data = "book_name =" + book;  
 Данные будут отправлены с использованием 'data', допустимых с использованием строки book_name, а переменная book будет содержать данные, предоставленные пользователем. 
  xhr.open ("POST  "," book-offer.php ", true);  
 С помощью метода open объекта XMLHttpRequest инициализируется новый запрос к серверу.  Этот метод передает три параметра.  «POST» определяет тип httprequest.  'book-offer.php' устанавливает файл на стороне сервера, а установка третьего параметра 'true' указывает, что запрос должен обрабатываться асинхронно. 
 В случае асинхронных запросов вы получите обратный вызов после получения данных  .  И, в свою очередь, пока ваш запрос обрабатывается, браузер может продолжать работать в обычном режиме. 
  xhr.setRequestHeader ("Content-Type", "application/x-www-  form-urlencoded ");  
 Метод setRequestHeader используется для установки значения заголовка HTTP-запроса.  Вместе с этим методом передаются два параметра.  Content-Type устанавливает заголовок строки (DOMString говорит точно), а application/x-www-form-urlencoded устанавливает тело заголовка. 
  xhr  .send (data);  
 Метод send используется для отправки данных, содержащихся в переменной data, на сервер. 
 Обработка данных  на стороне сервера 
   phpinclude ('../includes/dbopen.php'); $ book_name = $ _POST ['book_name']; $ sql = "select book_name  from book_mast, где имя_книги LIKE '$ book_name%' "; $ result = mysql_query ($ sql); while ($ row = mysql_fetch_array ($ result)) {echo" 
 ". $ row ['book_name'].  "
";}?>  
 Объяснение кода 
  include ('../includes/dbopen  .php ');  
 Этот код включает файл dbopen.php, который открывает соединение с базой данных MySQL. 
  $  book_name = $ _POST ['book_name'];  
 Таким образом мы собираем данные (предоставленные пользователем), отправляемые через Ajax в PHP. 
  $ sql = "выберите book_name из book_mast, где book_name  LIKE '$ book_name%' "; $ result = mysql_query ($ sql); while ($ row = mysql_fetch_array ($ result)) {echo" 
 ". $ Row ['book_name']. "
";}  
 Мы запускаем запрос MySQL, чтобы выбрать все книги, начинающиеся с буквы, предоставленной пользователем, и подготовить возвращенные данные для отображения. 
 Получение и рендеринг данных с помощью Ajax 
 Теперь нам нужно получить данные, возвращаемые MYSQL, и отобразить эти данные с помощью Ajax.  Итак, мы напишем этот код в нашем HTML-файле.  Мы добавим следующий код 
  xhr.onreadystatechange = display_data; function display_data () {if (xhr.readyState == 4) {if (xhr.status == 200) {  document.getElementById ("предложение"). innerHTML = xhr.responseText;  } else {alert ('Проблема с запросом.');  }}}  
 Мы должны добавить 
 
 под полем ввода, идентификатор которого - книга.  
  Объяснение кода Ajax 
  xhr.onreadystatechange = display_data;  
 'onreadystatechange' - это свойство вызываемого объекта XMLHttpRequest  всякий раз, когда изменяется атрибут readyState.  Мы назначаем это функции, которая будет объявлена ​​следующей. 
  if (xhr.readyState == 4)  
 Мы проверяем,  значение свойства 'readyState' равно 4, что означает, что операция завершена. 
  if (xhr.status == 200)  
 Если операция завершена, проверяется статус ответа на запрос.  Он возвращает код результата HTTP.  Код результата 200 означает, что ответ на запрос выполнен успешно. 
  document.getElementById ("предложение"). InnerHTML = xhr.responseText;  
 Теперь мы устанавливаем значение строки, которая будет отображаться в блоке div, идентификатор которого - «предложение», как свойство «responseText» объекта XMLHttpRequest.  responseText - это ответ на запрос в виде текста. 
 Итак, окончательный код JavaScript файла HTML выглядит следующим образом: 
  function  book_suggestion () {var book = document.getElementById ("книга"). значение; var xhr;  if (window.XMLHttpRequest) {//Mozilla, Safari, ... xhr = new XMLHttpRequest ();} else if (window.ActiveXObject) {//IE 8 и старше xhr = new ActiveXObject ("Microsoft.XMLHTTP");  } var data = "book_name =" + книга;  xhr.open ("POST", "book-offer.php", true);  xhr.setRequestHeader ("Content-Type", "application/x-www-form-urlencoded");  xhr.send (данные);  xhr.onreadystatechange = display_data; функция display_data () {if (xhr.readyState == 4) {if (xhr.status == 200) {//alert(xhr.responseText);  document.getElementById ("предложение"). innerHTML = xhr.responseText;  } else {alert ('Проблема с запросом.');  }}}}  
 Мы рекомендуем вам поиграть с кодом, высказать свое мнение в нашем разделе комментариев и поделиться этим руководством.