кодесурса
«Аякс

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

script1adsense2code
script1adsense3code

Предисловие

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

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

MySQL Table

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

«MySQL

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

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

HTML-код

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

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>User interface for Ajax, PHP, MySQL demo</title> 
<meta name="description" content="HTML code for user interface for Ajax, PHP and MySQL demo."> 
<link href="../includes/bootstrap.css" rel="stylesheet">
<style type="text/css">
body {padding-top: 40px; padding-left: 25%}
li {list-style: none; margin:5px 0 5px 0; color:#FF0000}
</style>
</head>
<body>
<form class="well-home span6 form-horizontal" name="ajax-demo" id="ajax-demo">
<div class="control-group">
              <label class="control-label" for="book">Book</label>
              <div class="controls">
                <input type="text" id="book">
			  </div>
 </div>
 <div class="control-group">
              <div class="controls">
                <button type="submit" class="btn btn-success">Submit</button>
              </div>
 </div>
</form>
</body>
</html>

Ниже приведен скриншот того, как это выглядит

«пользователь

Отправить данные на сервер с помощью 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 and older
    xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
var data ="book_name=" + book;
	 xhr.open("POST", "book-suggestion.php", true); 
     xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");                  
     xhr.send(data);
}

Объяснение приведенного выше кода 

var book = document.getElementById("book").value;

Значение поля ввода, id которого равен 'book', собирается. 

var xhr;
 if (window.XMLHttpRequest) { // Mozilla, Safari, ...
    xhr = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE 8 and older
    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-suggestion.php", true);

Используя метод open объекта XMLHttpRequest, инициализируется новый запрос к серверу. Этот метод передает три параметра. «POST» определяет тип httprequest. 'book-Suggestion.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, на сервер.

Обработка данных на стороне сервера 

<?php
include('../includes/dbopen.php');
$book_name = $_POST['book_name'];
$sql ="select book_name from book_mast where book_name 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 ="select book_name from book_mast where book_name LIKE '$book_name%'";
$result = mysql_query($sql);
while($row=mysql_fetch_array($result))
{
echo "<p>".$row['book_name']."</p>";
}

Мы запускаем запрос MySQL, чтобы выбрать все книги, начиная с буквы, предоставленной пользователем, и подготовить данные, которые будут возвращены для отображения.

Получать и отображать данные с помощью Ajax

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

xhr.onreadystatechange = display_data;
	function display_data() {
	 if (xhr.readyState == 4) {
      if (xhr.status == 200) {
       document.getElementById("suggestion").innerHTML = xhr.responseText;
      } else {
        alert('There was a problem with the request.');
      }
     }
  }

Мы должны добавить <div id = "offerment"> </ div> ниже поля ввода, чьим идентификатором является book.

Объяснение кода Ajax 

xhr.onreadystatechange = display_data;

«onreadystatechange» - это свойство объекта XMLHttpRequest, которое вызывается при каждом изменении атрибута «readyState». Мы назначаем это функции, которая будет объявлена следующей. 

if (xhr.readyState == 4)

Мы проверяем, равно ли значение свойства readyState 4, что означает, что операция завершена. 

if (xhr.status == 200)

Если операция завершена, проверяется состояние ответа на запрос. Возвращает код результата HTTP. Код результата 200 указывает, что ответ на запрос успешен. 

document.getElementById("suggestion").innerHTML = xhr.responseText;

Теперь мы устанавливаем значение строки, которая будет отображаться в элементе div с идентификатором 'offertion' как свойство responseText объекта XMLHttpRequest. 'responseText' - это ответ на запрос в виде текста.

Итак, окончательный код JavaScript HTML-файла выглядит следующим образом: 

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 and older
    xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
var data ="book_name=" + book;
     xhr.open("POST", "book-suggestion.php", true); 
     xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");                  
     xhr.send(data);
	 xhr.onreadystatechange = display_data;
	function display_data() {
	 if (xhr.readyState == 4) {
      if (xhr.status == 200) {
       //alert(xhr.responseText);	   
	  document.getElementById("suggestion").innerHTML = xhr.responseText;
      } else {
        alert('There was a problem with the request.');
      }
     }
	}
}

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

Предыдущий: Введение в Ajax
Далее: Использование Ajax с XML

Новый контент: Composer: менеджер зависимостей для PHP , R программирования

script1adsense4code
script1adsense5code
disqus2code
script1adsense6code
script1adsense7code
script1adsense8code
buysellads2code