Меню
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP КАК СДЕЛАТЬ ПРОГРАММЫ SW3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS КИБЕРБЕЗОПАСНОСТЬ НАУКА О ДАННЫХ
     ❯   

JS Учебник


JS Версии


JS Объекты


JS Функции


JS Классы


JS Асинхронный


JS HTML DOM


JS Браузер BOM


JS Веб APIы


JS AJAX


JS JSON


JS или jQuery


JS Графика


JS Примеры


JS Рекомендация




JavaScript AJAX База данных



AJAX можно использовать для интерактивного взаимодействия с базой данных.


AJAX базы данных пример

В следующем примере показано, как веб страница может получать информацию из базы данных с помощью AJAX:

Пример

Информация о клиенте будет указана здесь...

Попробуйте сами »


Объяснение примера - функция showCustomer()

Когда пользователь выбирает клиента в раскрывающемся списке выше, выполняется вызываемая функция showCustomer(). Функция запускается по onchange событию:

Функция showCustomer

function showCustomer(str) {
var xhttp;
if (str == "") {
document.getElementById("txtHint").innerHTML = "";
return;
}
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("txtHint").innerHTML = this.responseText;
}
};
xhttp.open("GET", "getcustomer.php?q="+str, true);
xhttp.send();
}

Функция showCustomer() выполняет следующие действия:

  • Проверить, выбран ли клиент
  • Создать объект XMLHttpRequest
  • Создайте функцию, которая будет выполняться, когда будет готов ответ сервера
  • Отправьте запрос в файл на сервере
  • Обратите внимание, что к URL адресу добавлен параметр (q) (с содержимым раскрывающегося списка)


Страница сервера AJAX

Страница на сервере, вызываемая приведенным выше кодом JavaScript, представляет собой файл PHP с именем "getcustomer.php".

Исходный код в "getcustomer.php" выполняет запрос к базе данных и возвращает результат в виде таблицы HTML:

<?php
$mysqli = new mysqli("servername", "username", "password", "dbname");
if($mysqli->connect_error) {
exit('Не удалось подключиться');
}

$sql = "SELECT customerid, companyname, contactname, address, city, postalcode, country
FROM customers WHERE customerid = ?";

$stmt = $mysqli->prepare($sql);
$stmt->bind_param("s", $_GET['q']);
$stmt->execute();
$stmt->store_result();
$stmt->bind_result($cid, $cname, $name, $adr, $city, $pcode, $country);
$stmt->fetch();
$stmt->close();

echo "<table>";
echo "<tr>";
echo "<th>CustomerID</th>";
echo "<td>" . $cid . "</td>";
echo "<th>CompanyName</th>";
echo "<td>" . $cname . "</td>";
echo "<th>ContactName</th>";
echo "<td>" . $name . "</td>";
echo "<th>Address</th>";
echo "<td>" . $adr . "</td>";
echo "<th>City</th>";
echo "<td>" . $city . "</td>";
echo "<th>PostalCode</th>";
echo "<td>" . $pcode . "</td>";
echo "<th>Country</th>";
echo "<td>" . $country . "</td>";
echo "</tr>";
echo "</table>";
?>


×

Связаться с отделом продаж

Если вы хотите использовать услуги schoolsw3 как образовательное учреждение, команда или предприятие, отправьте нам электронное письмо:
sales@schoolsw3.com

Сообщить об ошибке

Если вы хотите сообщить об ошибке или внести предложение, отправьте нам электронное письмо:
help@schoolsw3.com

Schoolsw3 оптимизирован для обучения и подготовки. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно проверяются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего контента.
При использовании Schoolsw3 вы соглашаетесь прочитать и принять наши условия использования,
политику использования файлов cookie и конфиденциальности.

Авторское право 1999- принадлежит Refsnes Data. Все права защищены. Schoolsw3 работает на SW3.CSS.