Как открыть модальное окно и загрузить данные из базы данных в него?

Как с помощью данной кнопки получить id строки из базы данных и открыть окно с данными по этому id? Необходимо создать скрипт на PHP, который будет подключаться к базе данных, извлекать данные и обновлять их, используя полученный id строки.
  • 25 марта 2024 г. 8:40
Ответы на вопрос 2
Для открытия модального окна и загрузки данных из базы данных в него, вам потребуется использовать языки HTML, CSS, JavaScript и PHP.

Пример кода для открытия модального окна и загрузки данных из базы данных:

1. HTML код кнопки для открытия модального окна:

```html
<button id="openModalBtn">Открыть модальное окно</button>

<div id="myModal" class="modal">
  <div class="modal-content" id="modalContent">
    <!-- Сюда будут загружены данные из базы данных -->
  </div>
</div>
```

2. CSS стили для модального окна:

```css
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
}

.modal-content {
  background-color: #fefefe;
  margin: 20% auto; /* 20% отступ сверху и снизу */
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}
```

3. JavaScript код для открытия модального окна и загрузки данных из базы данных:

```javascript
document.getElementById("openModalBtn").addEventListener("click", function() {
  var modal = document.getElementById("myModal");
  modal.style.display = "block";
  
  // AJAX запрос к серверу для получения данных из базы данных
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function() {
    if (xhr.readyState === XMLHttpRequest.DONE) {
      if (xhr.status === 200) {
        document.getElementById("modalContent").innerHTML = xhr.responseText;
      } else {
        console.error("Ошибка при загрузке данных из базы данных");
      }
    }
  };
  xhr.open("GET", "get_data.php", true);
  xhr.send();
});
```

4. PHP скрипт `get_data.php` для получения данных из базы данных и отображения их в модальном окне:

```php
<?php
// Подключение к базе данных
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "database";

$conn = new mysqli($servername, $username, $password, $dbname);

if($conn->connect_error) {
  die("Ошибка подключения к базе данных: " . $conn->connect_error);
}

// Получение id строки из базы данных
$id = $_GET["id"];

// Запрос к базе данных для получения данных по id
$sql = "SELECT * FROM table WHERE id = $id";
$result = $conn->query($sql);

if ($result->num_rows > 0) {
  $row = $result->fetch_assoc();
  echo "Данные из базы данных: " . $row["column1"] . ", " . $row["column2"];
} else {
  echo "Данные не найдены";
}

$conn->close();
?>
```

Теперь при нажатии на кнопку "Открыть модальное окно" будет отправляться запрос на сервер, где PHP скрипт `get_data.php` получит данные из базы данных по переданному id и отобразит их в модальном окне.
А в js что?
Похожие вопросы