Авторизация без обновления страницы

@volodjav · Регистрация: 16.09.2015

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

Подскажите, пожалуйста, как сделать авторизацию на javascript так, чтобы браузер запомнил поля input, но при этом не обновлял страницу, как это делает submit()
у меня сейчас так:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
static requestSyncAuthorization(user, password, id_form) {
    console.log('request authorization: user = ' + user + ' password = ' + password);
 
    let request = new XMLHttpRequest();
    request.open('POST', '/', false, user, password);
    request.setRequestHeader("Authorization", "Basic " + btoa(user + ":" + password));
    request.send(null);
 
    if (request.status === 200) {
        let response = request.responseText;
        console.log('response: ' + response);
        let tag_form = document.getElementById(id_form);
        tag_form.submit();
        return response;
    } else {
        console.log('request auth fail: ' + request.status);
    }
}

mixenik · 25.12.2015, 23:43

Т.е. вы делаете basic авторизацию, получаете ответ, и потом еще раз сабмитите форму(собственно сабмит и перезагружает страницу)? А зачем вы это делаете?

Не по теме:

А что static и let уже поддерживается большинством браузеров? Или вы потом предкомпилируете в ES5?

@volodjav · 25.12.2015, 23:50 **[ТС]**

если убрать submit то браузер не предлагает запомнить содржимое input-ов
ecma6 chromium поддерживает, для проекта этого достаточно, потом может добавлю транслятор чтоб на остальных браузерах работало

mixenik · 25.12.2015, 23:54

Хм, а preventDefault пробовали на событие сабмита вешать?

@volodjav · 25.12.2015, 23:58 **[ТС]**

не в курсе что это )
попробую

mixenik · 25.12.2015, 23:59

вот =)

@volodjav · 28.12.2015, 21:07 **[ТС]**

Не работает. Вот набросал минимальный пример.

HTML5
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
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script>
        "use strict"
 
        function requestSyncAuthorization(user, password) {
            console.log('request authorization: user = ' + user + ' password = ' + password);
 
            let request = new XMLHttpRequest();
            request.open('POST', '/', false, user, password);
            request.setRequestHeader("Authorization", "Basic " + btoa(user + ":" + password));
            request.send(null);
 
            if (request.status === 200) {
                let response = request.responseText;
                console.log('response: ' + response);
                return response;
            } else {
                console.log('request auth fail: ' + request.status);
            }
        }
 
        function submitForm() {
            console.log('submit');
            let f = document.getElementById('id_form');
            f.submit();
        }
 
        function getValueById(id) {
            return document.getElementById(id).value;
        }
 
        function onFormSubmit() {
            this.preventDefault();
            event.preventDefault();
 
            let user        = getValueById('id_user');
            let password    = getValueById('id_password');
 
            console.log('onSubmit: user = ' + getValueById('id_user') + getValueById('id_password'));
 
            requestSyncAuthorization(user, password);
 
            return false;
        }
 
        function onFormSubmit(e) {
            e.preventDefault();
            return onFormSubmit();
        }
    </script>
</head>
<body>
<div>
    <div>
        <div>Caption</div>
        <form autocomplete="on" id="id_form" method="post" onsubmit="onFormSubmit(this);">
            <div>
                <div>
                    <div>Имя:</div>
                    <div>
                        <input type="text" id="id_user">
                    </div>
                </div>
                <div>
                    <div>Пароль:</div>
                    <div><input type="password" id="id_password"></div>
                </div>
            </div>
            <div><input type="button" value="Вход" onclick="submitForm(this);"></div>
        </form>
    </div>
</div>
 
 
</body>
</html>

mixenik · 28.12.2015, 21:57

а у вас разве на этом скрипт не падает?

JavaScript
1
2
this.preventDefault();
event.preventDefault();

И зачем в HTML добавлять onsubmit? Почему не вызываете прямо из submitForm?

@volodjav · 30.12.2015, 04:04 **[ТС]**

я так понял если в обработчике события onsubmit вызвать reventDefault() то страница из action не будет открываться
но submit = onFormSubmit почему-то вообще не срабатывает

mixenik · 30.12.2015, 16:52

Сообщение от mixenik

а у вас разве на этом скрипт не падает?

this.preventDefault();
event.preventDefault();

У вас точно нет ошибок в консоли браузера?

@volodjav · 30.12.2015, 17:12 **[ТС]**

я пробовал удалять эти строки - разницы никакой
попробуйте у себя в хроме
http://i10.pixs.ru/storage/2/5... 072255.png

mixenik · 30.12.2015, 17:38

Убрать это, и из html onsubmit="onFormSubmit(this);"

Добавлено через 6 минут
и

JavaScript
1
f.submit(onFormSubmit);

Добавлено через 1 минуту
и почему у вас две onFormSubmit?

@volodjav · 31.12.2015, 01:36 **[ТС]**

1. две submitForm остались после экспериментов, подсовывал в onsubmit с параметром и без
2. если я уберу onsubmit="onFormSubmit(this);", то как будет вызываться обработчик ?
3. f.submit(onFormSubmit); уже давно убрал, в приведенном исходнике такой строки нет

mixenik · 31.12.2015, 10:02

когда вы делаете f.submit(onFormSubmit);
в onFormSubmit передается event. т.е.

JavaScript
1
2
3
4
5
f.submit(onFormSubmit);
 
function onFormSubmit(e){
  e.preventDefault();
}

@volodjav · 31.12.2015, 22:31 **[ТС]**

можете выложить измененный работающий исходник ?
я был бы оч благодарен.
с новым годом )

Новые блоги и статьи Все статьи Все блоги /
Как дизайн сайта влияет на конверсию: 7 решений, которые реально повышают заявки Neotwalker 08.03.2026 Многие до сих пор воспринимают дизайн сайта как “красивую оболочку”. На практике всё иначе: дизайн напрямую влияет на то, оставит человек заявку или уйдёт через несколько секунд. Даже если у вас. . .	Модульная разработка через nuget packages DevAlt 07.03.2026 Сложившийся в . Net-среде способ разработки чаще всего предполагает монорепозиторий в котором находятся все исходники. При создании нового решения, мы просто добавляем нужные проекты и имеем. . .	Модульный подход на примере F# DevAlt 06.03.2026 В блоге дяди Боба наткнулся на такое определение: В этой книге («Подход, основанный на вариантах использования») Ивар утверждает, что архитектура программного обеспечения — это структуры,. . .	Управление камерой с помощью скрипта OrbitControls.js на Three.js: Вращение, зум и панорамирование 8Observer8 05.03.2026 Содержание блога Финальная демка в браузере работает на Desktop и мобильных браузерах. Итоговый код: orbit-controls-threejs-js. zip. Сканируйте QR-код на мобильном. Вращайте камеру одним пальцем,. . .
SDL3 для Web (WebAssembly): Синхронизация спрайтов SDL3 и тел Box2D 8Observer8 04.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-sync-physics-sprites-sdl3-c. zip На первой гифке отладочные линии отключены, а на второй включены:. . .	SDL3 для Web (WebAssembly): Идентификация объектов на Box2D v3 - использование userData и событий коллизий 8Observer8 02.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-collision-events-sdl3-c. zip Сканируйте QR-код на мобильном и вы увидите, что появится джойстик для управления главным героем. . . .	Реалии Hrethgir 01.03.2026 Нет, я не закончил до сих пор симулятор. Эта задача сложнее. Не получилось уйти в плавсостав, но оно и к лучшему, возможно. Точнее получалось - но сварщиком в палубную команду, а это значит, в моём. . .	Ритм жизни kumehtar 27.02.2026 Иногда приходится жить в ритме, где дел становится всё больше, а вовлечения в происходящее — всё меньше. Плотный график не даёт вниманию закрепиться ни на одном событии. Утро начинается с быстрых,. . .

mixenik Все элементарное - сложно 133 / 118 / 50 Регистрация: 14.04.2014 Сообщений: 509
	25.12.2015, 23:43
	Т.е. вы делаете basic авторизацию, получаете ответ, и потом еще раз сабмитите форму(собственно сабмит и перезагружает страницу)? А зачем вы это делаете? Не по теме: А что static и let уже поддерживается большинством браузеров? Или вы потом предкомпилируете в ES5? 0

@volodjav 0 / 0 / 0 Регистрация: 16.09.2015 Сообщений: 18
	25.12.2015, 23:50 [ТС]
	если убрать submit то браузер не предлагает запомнить содржимое input-ов ecma6 chromium поддерживает, для проекта этого достаточно, потом может добавлю транслятор чтоб на остальных браузерах работало 0

mixenik Все элементарное - сложно 133 / 118 / 50 Регистрация: 14.04.2014 Сообщений: 509
	25.12.2015, 23:54
	Хм, а preventDefault пробовали на событие сабмита вешать? 0

@volodjav 0 / 0 / 0 Регистрация: 16.09.2015 Сообщений: 18
	25.12.2015, 23:58 [ТС]
	не в курсе что это ) попробую 0

mixenik Все элементарное - сложно 133 / 118 / 50 Регистрация: 14.04.2014 Сообщений: 509
	25.12.2015, 23:59
	вот =) 0

@volodjav 0 / 0 / 0 Регистрация: 16.09.2015 Сообщений: 18
	30.12.2015, 04:04 [ТС]
	я так понял если в обработчике события onsubmit вызвать reventDefault() то страница из action не будет открываться но submit = onFormSubmit почему-то вообще не срабатывает 0

@volodjav 0 / 0 / 0 Регистрация: 16.09.2015 Сообщений: 18
	30.12.2015, 17:12 [ТС]
	я пробовал удалять эти строки - разницы никакой попробуйте у себя в хроме http://i10.pixs.ru/storage/2/5... 072255.png 0

@volodjav 0 / 0 / 0 Регистрация: 16.09.2015 Сообщений: 18
	31.12.2015, 01:36 [ТС]
	1. две submitForm остались после экспериментов, подсовывал в onsubmit с параметром и без 2. если я уберу onsubmit="onFormSubmit(this);", то как будет вызываться обработчик ? 3. f.submit(onFormSubmit); уже давно убрал, в приведенном исходнике такой строки нет 0

@volodjav 0 / 0 / 0 Регистрация: 16.09.2015 Сообщений: 18
	31.12.2015, 22:31 [ТС]
	можете выложить измененный работающий исходник ? я был бы оч благодарен. с новым годом ) 0