Форум программистов, компьютерный форум, киберфорум
JavaScript для начинающих
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.67/6: Рейтинг темы: голосов - 6, средняя оценка - 4.67
0 / 0 / 0
Регистрация: 12.08.2019
Сообщений: 3

форма AJAX

13.08.2019, 18:00. Показов 1300. Ответов 2
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Всем привет. Есть у кого то идеи как это все реализовать?

Создать форму добавления пользователя состоящая из полей name, email, username, phone,
website при сабмите формы сделать POST запрос на сервер после ответа от сервера добавлять
полученного пользователя на страницу.

Добавлено через 7 минут
Сделал ошибку, реализовать нужно на чистом JS
0
Programming
Эксперт
39485 / 9562 / 3019
Регистрация: 12.04.2006
Сообщений: 41,671
Блог
13.08.2019, 18:00
Ответы с готовыми решениями:

Определить AJAX библиотеку или отследить AJAX запрос любым методом
Требуется определить какая библиотека используется на сайте для создания AJAX запросов. Стандратный запрос типа windows.jquery.active не...

Стандарт ajax или jquery-> ajax?
Добрый день, такой вопрос что лучше всего использовать стандарт AJAX объект XMLHttprequest либо же ajax в библиотеке jquery? Как...

Ajax форма не передает данные
Здравствуйте. Совсем не дружу пока что с JS. Вот есть форма и ajax запрос <script...

2
Эксперт JS
6496 / 3907 / 2006
Регистрация: 14.06.2018
Сообщений: 6,781
13.08.2019, 19:17
Привет.
У формы для AJAX не используется submit. Достаточно события click.
Если решили отправлять пользователя в виде JSON, то схематичный макет по справочнику https://learn.javascript.ru/fetch#post-zaprosy :
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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
</head>
<body>
    <form>
        <label for="name">ФИО: </label><input name="name" id="name" /><br />
        <label for="email">E-mail: </label><input name="email" id="email" /><br />
        <label for="username">Ник: </label><input name="username" id="username" /><br />
        <label for="phone">Телефон: </label><input name="phone" id="phone" /><br />
        <label for="website">Веб-сайт: </label><input name="website" id="website" /><br />
        <input type="button" id="send" value="Добавить пользователя">
    </form>
    <script>
        let form = document.forms[0];
        document.getElementById("send").onclick = sendHandler;
 
        function validate() {
            // Здесь проверяем поля формы.
            return true; // Если всё верно, то вернуть true
        }
 
        async function sendHandler() {
            if (!validate()) {
                alert("Неверные данные!");
                return;
            }
            let user = {
                name: form["name"].value,
                email: form["email"].value,
                username: form["username"].value,
                phone: form["phone"].value,
                website: form["website"].value,
            };
            try {
                let result = await postJSONAsync("senduser.php", user);
 
                if (result === "OK") {
                    document.body.insertAdjacentHTML("beforeend", `<p>${user.name}</p>`);
 
                    // Очистить форму для ввода нового пользователя
                    form.reset();
                }
                else
                    alert("Пользователь уже был зарегистрирован!")
            }
            catch (e) { alert(e.message); }
        }
 
        async function /*Promise<string>*/ postJSONAsync(url, obj) {
            let init = {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json;charset=utf-8'
                },
                body: JSON.stringify(obj)
            };
 
            let response = await fetch(url, init);
            if (response.ok) {
                let text = await response.text();
                return text;
            }
            else throw new Error(`${response.status}: ${response.statusText}`);
        }
    </script>
</body>
</html>
Отправлять данные можно несколькими основными способами. JSON - всего лишь один из них.
1
14.08.2019, 00:23

Не по теме:

Цитата Сообщение от amr-now Посмотреть сообщение
У формы для AJAX не используется submit.
ИМХО, семантически верно отслеживать событие submit. На то оно и форма, но в текущих реалиях e-commerce отправляют любой инпут при успешной валидации :pardon:

0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
inter-admin
Эксперт
29715 / 6470 / 2152
Регистрация: 06.03.2009
Сообщений: 28,500
Блог
14.08.2019, 00:23
Помогаю со студенческими работами здесь

Ajax Форма авторизации - Запоминание логина и пароля
Здравствуйте, Имеется форма авторизации примерной конструкции: &lt;form name=&quot;wa_auth&quot; target=&quot;auth_frame&quot;...

Куда отправляет данные форма через AJAX
Здравствуйте, уважаемые форумчане! Такой весьма необычный вопрос: есть сайт smmplanner.com там в личном кабинете есть кнопка...

Как отправить форму, если в ней имеется еще одна форма, через ajax?
Здравствуйте, знатоки. Имеется главная простая форма для отправки с вложенной формой для загрузки файлов. Как отправить главную форму без...

После вставки ответа ajax в input запроса, ответ ajax не изменяется
Здравствуйте! В общем так, есть поле input, есть таблица с полем count. Задача: изменить содержимое поле count по средством ajax, но при...

Простая форма веб-форма для сложения двух чисел не работает
Не работает скрипт для подсчета сложения.Может я неправильно привязал обработчик события(клик на кнопку подсчитать)? Вот код: ...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
3
Ответ Создать тему
Новые блоги и статьи
Загрузка PNG-файла с альфа-каналом с помощью библиотеки SDL3_image на Android
8Observer8 27.01.2026
Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .
влияние грибов на сукцессию
anaschu 26.01.2026
Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .
Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android
8Observer8 26.01.2026
Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .
Установка Android SDK, NDK, JDK, CMake и т.д.
8Observer8 25.01.2026
Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .
Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf
8Observer8 25.01.2026
Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .
Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly
8Observer8 24.01.2026
Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
моя боль
iceja 24.01.2026
Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .
Модель сукцессии микоризы
anaschu 24.01.2026
Решили писать научную статью с неким РОманом
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru