Результат нажатия кнопки без обновления страницы

@Karen87 · Регистрация: 29.05.2016

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

Здравствуйте! Есть простейшая web-форма для ввода значения логина и кнопка "Поиск" (get-запрос). При нажатии на кнопку на сервере происходит поиск рабочей станции пользователя и пароля локального администратора. Подскажите, пожалуйста:
1) Как реализовать вывод без обновления страницы в двух случаях
а) Успех:
- Имя компьютера - $PC
- Пароль - $password
б) Неуспех:
Для данного пользователя рабочая станция не найдена
Заранее благодарен!

krvsa · 20.02.2023, 10:52

Karen87, предложу такую модельку...

PHP/HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<form>
    <label>Логин 
        <input name='login' />
    </label>
    <button>Поиск</button>
</form>
<p></p>
 
<script>
const ob = document.querySelector('button')
ob.addEventListener('click', e => {
    e.preventDefault()
    const o = document.querySelector('[name="login"]')
    const v = o.value
    const op = document.querySelector('p')
    if (!v) {
        op.textContent = 'Укажите логин...'
        return
    }
    o.value = ''
    ob.disabled = true
    op.textContent = `Поиск компа пользователя ${v}...`
    ajax('http://mysite.ru', v)
        .then(({PC, pass}) => {
            console.log(PC)
            op.innerHTML = PC 
                ? `- Имя компьютера - ${PC}<br />- Пароль - ${pass}` 
                : `Для данного пользователя (${v}) рабочая станция не найдена`
        })
        .catch(err => {
            op.textContent = 'Ошибка'
            console.log(err)
        })
        .finally(_ => ob.disabled = false)
    // эмулятор отправки запроса
    function ajax(url, data) {
        return new Promise((resolve, reject) => {
            setTimeout(_ => {
                // нашли
                resolve({PC: 'test', pass: 123})
                // не нашли
                //resolve({})
                // ошибка
                //reject(new Error('Что-то поломалось'))
            }, 2000)
        })
    }
})
 
</script> 
</body>
</html>

@Karen87 · 20.02.2023, 12:49 **[ТС]**

krvsa, благодарю за решение. Автономно действительно работает так, как мне нужно, но при подключении к серверу я получаю лишь JSON-выхлоп. Поменял в Вашем коде:

PHP/HTML

<form form action="/get_pc">
    <label>Логин 
        <input name='login' />
    </label>
    <button>Поиск</button>
</form>

Нужно ли это было делать? Или достаточно было прописать в 29 строке роут?

krvsa · 20.02.2023, 14:00

Karen87, ты же хочешь делать все без перезагрузки?
Тогда особого смысла у action формы нет. УРЛ можно указать и в самом запросе.

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

при подключении к серверу я получаю лишь JSON-выхлоп

Так это уже хорошо.
Остается только его преобразовать JSON.parse(<json_строка>). Понять нашлось что-то или нет. Ну и сформировать соответствующую строку сообщения.

@Karen87 · 20.02.2023, 14:11 **[ТС]**

krvsa, помогли до ума довести. Спасибо!

@Karen87 · 20.02.2023, 22:23 **[ТС]**

krvsa, Вы не подскажете, что нужно сделать, чтобы результат работы кнопки "Поиск" был между полем для ввода логина и кнопкой "Выход"? Сейчас результат выводится в самом верху, затирая приветствие

PHP/HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<style>
div {
  text-align: center;
}
</style>
<p align="center"><b>Привет, $($data.Username)!</p><br>
<body>
<div>
<form form action="/get_pc">
    <label>Логин 
        <input name='login' />
        <input name="username" type="hidden" value="$($data.login)"/>
    </label>
    <button>Поиск</button>
</form>
<br>
<form form action="/logout">
    <button>Выход</button>
</form>
</div>
<p></p>
 
<script>
const ob = document.querySelector('button')
ob.addEventListener('click', e => {
    e.preventDefault()
    const o = document.querySelector('[name="login"]')
    const v = o.value
    const m = document.querySelector('[name="username"]')
    const n = m.value
    const op = document.querySelector('p')
    if (!v) {
        op.textContent = 'Укажите логин...'
        return
    }
    o.value = ''
    ob.disabled = true
    op.textContent = ``Поиск компьютера пользователя `${v}...``
    fetch('https://site.ru:8449/get_pc?login=' + v + '&username=' + n)
        .then(res => res.json())
        
        .then(({PC, pass}) => {
            console.log(PC)
            op.innerHTML = PC 
                ? ``- Имя компьютера - `${PC}<br />- Пароль - `${pass}`` 
                : ``Для данного пользователя (`${v}) рабочая станция не найдена``
        })
        .catch(err => {
            op.textContent = 'Ошибка'
            console.log(err)
        })
        .finally(_ => ob.disabled = false)
 
})
 
</script> 
</body>
</html>

Добавлено через 4 минуты
P.S. На экранирование символов $ и ` не обращайте внимания, я использую специальный framework для создания web-приложений, который требует это делать при использовании js-скрипта в теге <script>

krvsa · 20.02.2023, 22:42

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

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

В своей модели я весь вывод сделал в "безымянный" абзац (твоя строка 26)

HTML5

<p></p>

Перенеси его в любое место (например между строками 20 и 21) и вывод будет там.

@Karen87 · 20.02.2023, 22:42 **[ТС]**

krvsa, разобрался сам, спасибо!

@Karen87 3052 / 1058 / 476 Регистрация: 29.05.2016 Сообщений: 4,446
		1
	Результат нажатия кнопки без обновления страницы 19.02.2023, 22:09. Показов 415. Ответов 7 Метки нет (Все метки) Здравствуйте! Есть простейшая web-форма для ввода значения логина и кнопка "Поиск" (get-запрос). При нажатии на кнопку на сервере происходит поиск рабочей станции пользователя и пароля локального администратора. Подскажите, пожалуйста: 1) Как реализовать вывод без обновления страницы в двух случаях а) Успех: - Имя компьютера - $PC - Пароль - $password б) Неуспех: Для данного пользователя рабочая станция не найдена Заранее благодарен! 0

krvsa 2992 / 1166 / 315 Регистрация: 14.03.2022 Сообщений: 2,833
	20.02.2023, 14:00	4
	Karen87, ты же хочешь делать все без перезагрузки? Тогда особого смысла у `action` формы нет. УРЛ можно указать и в самом запросе. Сообщение от Karen87 при подключении к серверу я получаю лишь JSON-выхлоп Так это уже хорошо. Остается только его преобразовать `JSON.parse(<json_строка>)`. Понять нашлось что-то или нет. Ну и сформировать соответствующую строку сообщения. 0

@Karen87 3052 / 1058 / 476 Регистрация: 29.05.2016 Сообщений: 4,446
	20.02.2023, 14:11 [ТС]	5
	krvsa, помогли до ума довести. Спасибо! 0

@Karen87 3052 / 1058 / 476 Регистрация: 29.05.2016 Сообщений: 4,446
	20.02.2023, 22:42 [ТС]	8
	krvsa, разобрался сам, спасибо! 0

Результат нажатия кнопки без обновления страницы

Решение