Всем доброго времени.
Уважаемые знатоки, есть 1 страничный сайт, на сайте есть форма для записи в базу и форма для вывода из базы.
Данные добавляются через Ajax, без перезагрузки.
Как обновить форму вывода данных, без перезагрузки странички. (Перезагрузить только 1 блок).
Перепробовал кучу вариантов из сети, или не работает или обновляется но слетают стили в обновленном блоке.
Код примера странички:
<?php
$db_HOST = 'localhost';
$db_USER = 'root';
$db_PASSWORD = '';
$db_NAME = 'help';
$mysqli = @new mysqli ($db_HOST, $db_USER, $db_PASSWORD, $db_NAME);
if ($mysqli->connect_errno) {
$info = "База данных недоступна. Ошибка: " . $mysqli->connect_errno;
} else {
$mysqli->query ("SET NAMES 'utf8'");
$info = "Успешно подключена. База: " . $db_NAME;
}
if (isset($_POST['send'])) {
$lineone = $_POST['lineone'];
$linetwo = $_POST['linetwo'];
$query = mysqli_query ($mysqli, "INSERT INTO `bd` (`lineone`, `linetwo`) VALUES ('$lineone', '$linetwo');");
}
?>
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>help</title>
<script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
<style media="screen">
* {
margin: 0;
padding: 0;
}
.info {
width: 100%;
background: pink;
text-align: center;
}
.insertBd {
margin: 50px;
width: auto;
background: #a2f558;
text-align: center;
}
.insertBd input {
width: 200px;
margin: 10px;
}
.Bd {
background: #ff9360;
display: grid;
grid-template-columns: 1fr 1fr;
margin: 50px;
}
.Lone, .Ltwo {
border: 1px solid black;
margin: 15px;
text-align: center;
padding: 5px;
}
</style>
</head>
<body>
<div class="info">.Инфо.</div>
<div class="insertBd">
<input type="text" id="lineone" name="lineone" placeholder="Строка 1"><br>
<input type="text" id="linetwo" name="linetwo" placeholder="Строка 2"><br>
<input type="submit" id="send" name="send">
</div>
<div class="Bd">
<?php $query = mysqli_query($mysqli, "SELECT * FROM bd "); ?>
<div class="Lone">Строка 1</div>
<div class="Ltwo">Строка 2</div>
<?php
while ($row = mysqli_fetch_array($query)) {
$id = $row['id'];
?>
<div class="Lone"><?php echo $row['lineone'] ?></div>
<div class="Ltwo"><?php echo $row['linetwo'] ?></div>
<?php }; ?>
</div>
</body>
<script type="text/javascript">
$(document).ready(function(){
function funcBefore() {
$(".info").text("Ожидание данных");
}
function funcSuccess(data) {
$(".info").text("Данные записаны");
}
function funcError (jqXHR, exception) { //Ошибка
var msg = '';
if (jqXHR.status === 0) {
msg = 'Not connect.\n Verify Network.';
} else if (jqXHR.status == 404) {
msg = 'Requested page not found. [404]';
} else if (jqXHR.status == 500) {
msg = 'Internal Server Error [500].';
} else if (exception === 'parsererror') {
msg = 'Requested JSON parse failed.';
} else if (exception === 'timeout') {
msg = 'Time out error.';
} else if (exception === 'abort') {
msg = 'Ajax request aborted.';
} else {
msg = 'Uncaught Error.\n' + jqXHR.responseText;
}
$(".info").text(msg);
}
$('#send').click(function(){
let send = $("#send").val();
let lineone = $("#lineone").val();
let linetwo = $("#linetwo").val();
$.ajax({
url: "index.php",
type: "POST",
data: {send: send, lineone: lineone, linetwo: linetwo},
dataType: "html",
beforeSend: funcBefore,
success: funcSuccess,
error: funcError
});
});
});
</script>
</html>
sql:
-- phpMyAdmin SQL Dump
-- version 4.9.0.1
-- https://www.phpmyadmin.net/
--
-- Хост: 127.0.0.1
-- Время создания: Окт 03 2019 г., 11:03
-- Версия сервера: 10.3.15-MariaDB
-- Версия PHP: 7.3.6
SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET AUTOCOMMIT = 0;
START TRANSACTION;
SET time_zone = "+00:00";
/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8mb4 */;
--
-- База данных: `help`
--
-- --------------------------------------------------------
--
-- Структура таблицы `bd`
--
CREATE TABLE `bd` (
`id` int(11) NOT NULL,
`lineone` varchar(30) NOT NULL,
`linetwo` varchar(30) NOT NULL
) ENGINE=MyISAM DEFAULT CHARSET=utf8;
--
-- Дамп данных таблицы `bd`
--
INSERT INTO `bd` (`id`, `lineone`, `linetwo`) VALUES
(1, '1', '1'),
(2, '22', '22');
--
-- Индексы сохранённых таблиц
--
--
-- Индексы таблицы `bd`
--
ALTER TABLE `bd`
ADD PRIMARY KEY (`id`);
--
-- AUTO_INCREMENT для сохранённых таблиц
--
--
-- AUTO_INCREMENT для таблицы `bd`
--
ALTER TABLE `bd`
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=11;
COMMIT;
/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;
Сложный
Простой
