Как сделать, чтобы сайт не перезагружался при отправке запроса?

@Hakob666 · Регистрация: 16.08.2018

Студворк — интернет-сервис помощи студентам

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
<?php
require "db.php";
 
$data = $_POST;
 
if ( isset($data['do_login'])) {
    $errors = array();
    $user = R::findOne('users', 'login = ?', array($data['login']));
    if ($user) {
        if (password_verify($data['password'], $user->password)) {
            // все хорошо логиним пользователя
            $_SESSION['logged_user'] = $user;
            echo '<div style="color: green;">Вы авторизованы! <br> Можете перейти на <a href="/">главную</a> страниуц!</div><hr>';
        } else {
            
        }
    } else {
        $errors[] = 'Пользователь с таким логином не найден!';
 
    }
    if ( ! empty($errors) )
    {
        echo '<div style="color: red;">'.array_shift($errors).'</div><hr>';
    }
 
}
 
?>
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        <?php echo file_get_contents("css/style.css"); ?>
    </style>
</head>
<body>
 
<?php
if ( isset($_SESSION['logged_user'])): ?>
    <script>document.location.href="user/user.php"</script>
<?php else:  ?>
    <header id="header">
        <div class="nav">
            <ul>
                <li class="link btn reg"><a href="/signup.php">Регистрация</a></li>
                <li class="drop">/</li>
                <li id="login-click" class="link btn active">Вход</li>
            </ul>
        </div>
    </header>
    <section>
<!--        Log in PHP         -->
<!--        Log in Block       -->
        <div id="log" class="login-back">
            <div class="login-menu">
                <form action="index.php" method="POST">
                    <p><strong>ВХОД ПОЛЬЗОВАТЕЛЯ</strong></p>
                    <input class="login-input login-input-top" type="text" name="login" placeholder="Логин"  value="<?php echo @$data ['login']?>">
 
                    <p>
                    <input class="login-input" type="password" name="password" placeholder="Пароль" value="<?php echo @$data ['password']?>">
                    </p>
 
                    <p>
                        <button type="submit" name="do_login">Войти</button>
                    </p>
                </form>
            </div>
        </div>
    </section>
<?php endif; ?>
<script type="text/javascript" src="js/script.js"></script>
</body>
</html>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
*{
    margin: 0;
    padding: 0;
    font-family: cursive;
}
.nav{
    width: 100%;
    height: 65px;
    box-shadow: 0px 3px 22px black;
}
ul{
    width: 100%;
    height: 65px;
}
li{
    display: inline-block;
    float: right;
    cursor: default;
}
.link{
    padding: 21px 20px;
    cursor: pointer;
    list-style-type: none;
    display: inline-block;
}
.link:hover{
    box-shadow: 0px -1px 4px black;
    transition: 0.3s ease-out;
    background-color: #f5f5f5;
}
.active{
    box-shadow: 0px -1px 4px black;
    background-color: #f5f5f5;
}
.drop{
    margin: 23px 3px;
}
.reg{
    margin-right: 15px;
}
a{
    text-decoration: none;
    color: black;
}
.login-back{
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(215,215,215,0.9);
}
.login-menu{
    margin: 170px auto;
    width: 300px;
    height: 300px;
    background-color: white;
    box-shadow: 0px 0px 25px black;
    text-align: center;
    padding: 30px;
    border-radius: 30px;
}
form input{
    font-size: 20px;
    border: 1px solid rgba(35,35,35,0.9);
    margin-top: 15px;
}
form p{
    font-size: 25px;
}
.login-input-top{
    margin-top: 45px;
}
.login-input{
    width: 230px;
}
.login-menu button{
    width: 100px;
    height: 40px;
    margin-top: 75px;
    margin-left: 130px;
    background-color: #e4e4e4;
    border: none;
    border-radius: 10px;
    cursor: pointer;
}

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
let ul = document.querySelector('ul');
var li = document.querySelectorAll('li');
var log = document.getElementById('log');
var logClick = document.getElementById('login-click');
 
li.forEach(el => {
  el.addEventListener('click', function () {
    ul.querySelector('.active').classList.remove('active');
 
    el.classList.add('active');
  })
})
logClick.onclick = function(){
  log.style.display = "block";
}
window.onclick = function (event) {
  if (event.target == log){
    log.style.display = "none";
  }
}

@Пифагор · 01.02.2020, 00:35

Hakob666, AJAX.

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .

@Пифагор 2172 / 1655 / 840 Регистрация: 10.01.2015 Сообщений: 5,207
	01.02.2020, 00:35
	Hakob666, AJAX. 0