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

Содержание
  1. Предисловие В этом руководстве мы увидим, как заставить Ajax работать с PHP и MySQL. Мы создадим небольшое веб-приложение. Таким образом, как только вы начинаете вводить алфавит в данном поле ввода, запрос отправляется в файл PHP через Ajax, выполняется запрос к таблице MySQL, он возвращает некоторые результаты, а затем эти результаты извлекаются с помощью Ajax и отображаются. . Давайте погрузимся и разберемся, как это работает. Таблица MySQL Ниже представлена ​​структура таблицы MySQL, которую мы использовали. Пользовательский интерфейс для ввода данных У нас есть простой пользовательский интерфейс, созданный с помощью HTML и CSS, где пользователь может вводить данные в поле ввода. HTML-код Это базовый HTML-код. Хотя мы внесем в него изменения и добавим код JavaScript позже. Пользовательский интерфейс для демонстрации Ajax, PHP, MySQL 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 ('Проблема с запросом.'); }}}} Мы рекомендуем вам поиграть с кодом, высказать свое мнение в нашем разделе комментариев и поделиться этим руководством.
  2. Таблица MySQL
  3. Пользовательский интерфейс для ввода данных
  4. HTML-код
  5. Объяснение приведенного выше кода
  6. Обработка данных на стороне сервера
  7. Объяснение кода
  8. Получение и рендеринг данных с помощью Ajax
  9. Объяснение кода Ajax

Предисловие

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

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

Таблица MySQL

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

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

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

HTML-код

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

       Пользовательский интерфейс для демонстрации Ajax, PHP, MySQL     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 ('Проблема с запросом.');  }}}}  

Мы рекомендуем вам поиграть с кодом, высказать свое мнение в нашем разделе комментариев и поделиться этим руководством.

Оцените статью
nanomode.ru
Добавить комментарий