0 / 0 / 0
Регистрация: 27.07.2018
Сообщений: 80
1

Отправка GET запроса без перезагрузки страницы

03.01.2019, 21:17. Показов 13454. Ответов 21
Метки нет (Все метки)

Author24 — интернет-сервис помощи студентам
Здравствуйте! Столкнулся с такой проблемой как отправка формы без перезагрузки страницы методом GET
Например есть форма
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="form">
<form method="GET" action="server.php">
                    <input type="text" name="name">
                    <input type="text" name="name1">
                    <input type="text" name="name2">
                    <input type="text" name="name3">
                    <input type="text" name="name4">
                    <input type="text" name="name5">
                    <input type="text" name="name6">
                    <button type="button">Отправить</button>
                   </form>
<a href="server.php" class="form-win" data-fancybox-type="iframe"></a>
</div>
Которая отправляется на server.php и возвращает результат на главную страницу.
Сейчас она работает так (форма отправляется на server.php и результат отображается там же)
Как получить результат без перезагрузки страницы во всплывающем окне
Вот код всплывающего окна
Javascript
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
$(function() {
        var Btn = $('.form button');
        var Inp = $('.form input');
        var Win = $('.form-win');
        
        Btn.click(function() {
            if (Inp.val() == '') {
                alert('Введите данные');
                Inp.focus();
            }
            else {
                Win.attr('href', 'server.php?nnn=' + Inp.val());
                Win.click();
                //Win.fancybox();
            }
        });
        Inp.keypress(function(e) {
            if (e.keyCode == 13) {
                Btn.click();
            }
        });
        
        Win.fancybox({
            maxWidth    : '95%',
            maxHeight   : '95%',
            fitToView   : false,
            width       : '95%',
            height      : '95%',
            autoSize    : false,
            openEffect  : 'none',
            closeEffect : 'none'
        });
    });
0
Лучшие ответы (1)
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
03.01.2019, 21:17
Ответы с готовыми решениями:

Отправка post запроса без перезагрузки страницы
недавно задавал вопрос про отправку post запроса без перезагрузки страницы. Сказали ищи в...

Отправка формы без перезагрузки страницы
Доброго времени всем. Тут такое возникло. в общем примерно так. На сайте форма которую нужно...

Отправка e-mail без перезагрузки страницы
Добрый день! помогите пожалуйста, уже какой день бьюсь не могу сделать! Что бы при отправке письма...

Загрузка данных из другой страницы без перезагрузки основной страницы
Не знаю в правильной ли ветке я задаю вопрос. Ответьте пожалуйста как сделать чтобы при нажатии,...

21
24 / 18 / 9
Регистрация: 27.04.2017
Сообщений: 122
03.01.2019, 21:55 2
при отправке формы нативное поведение браузера - полный рефреш страницы (при котором в URL также добавляется query string)

Чтобы отключить это дефолтное поведение - на объекте события вызываем метод e.preventDefault()

Например, вот так
Javascript
1
2
3
document.querySelector('#name-form').addEventListener('submit', function (e) {
    e.preventDefault();
})
0
0 / 0 / 0
Регистрация: 27.07.2018
Сообщений: 80
03.01.2019, 22:02  [ТС] 3
можете обьяснить что значит (#name-form)
?
0
24 / 18 / 9
Регистрация: 27.04.2017
Сообщений: 122
03.01.2019, 22:09 4
это просто пример из моего кода

это форма с id="name-form", которую выбираем по CSS-селектору и вешаем на неё обработчик события
0
0 / 0 / 0
Регистрация: 27.07.2018
Сообщений: 80
03.01.2019, 22:11  [ТС] 5
Теперь кнопка не активна.
Кликаю на нее и ничего не происходит
0
24 / 18 / 9
Регистрация: 27.04.2017
Сообщений: 122
03.01.2019, 22:13 6
вешать обработчик надо на форму, а не кнопку
0
0 / 0 / 0
Регистрация: 27.07.2018
Сообщений: 80
04.01.2019, 06:27  [ТС] 7
ага.
Открывается модальное окно, но результат не выводит.
Кажись таким образом server.php не может получить данные из формы для выдачи результата

Добавлено через 8 часов 9 минут
в случае указания
HTML5
1
<button type="button">
Открывается пустое модальное окно
Если же указать
HTML5
1
<button type="submit">
То открывается страница server.php с результатом который мне нужен.
А этот результат нужно вывести в модальном окне.
Подскажите как правильно сделать?
0
Эксперт JS
2034 / 1093 / 408
Регистрация: 29.04.2016
Сообщений: 2,612
05.01.2019, 11:26 8
User797,
Лень разбираться с вашим всплывающим окном fancyBox- поэтому сделал обычный див, куда и выводится ответ от сервера. Переделаете, если нужно, что бы данные выводились в ВАШ fancyBox.

Посмотреть "в живую" можете тут -> http://some-test.onlinewebshop... jquery/02/

Введите что-нибудь в первое поле и нажмите отправить, то что вывелось большими буквами и есть ответ от сервера -> отправили все инпуты на сервер, там обработали, вернули ответ обратно на страницу без перезагрузки.

index.php
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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<meta charset="utf-8">
<title>Код</title>
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<link href="styles.css" rel="stylesheet" type="text/css">
<script src="script.js"></script>
</head>
<body>
 
<div class="fancyBox"></div>
<form class="myForm">
    <input type="text" name="name0"><br>
    <input type="text" name="name1"><br>
    <input type="text" name="name2"><br>
    <input type="text" name="name3"><br>
    <input type="text" name="name4"><br>
    <input type="text" name="name5"><br>
    <input type="text" name="name6"><br><br>
    <button>Отправить</button>
</form>
 
</body>
</html>
script.js
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
$(document).ready(function(){
 
 
$('.fancyBox').on('click',() => $('.fancyBox').css({display : 'none'}) );
$('.myForm').on('submit',e => {
    e.preventDefault(); // не даст сработать стандартному действию браузера при отправке формы, вместо этого еще можно "return false;" но в конце этого блока с кодом
    $.ajax({
        type: 'GET',
        url: 'server.php', // файл PHP куда уходят данные с формы
        data: $('.myForm').serialize(), // сериализуем данные с формы
        success: function(data){    // при успешном запросе на сервер
            let result = JSON.parse(data);  // запихиваем пришедшие данные в объект
            $('.fancyBox').css({display : 'block'}); // показываем fancyBox
            $('.fancyBox').html(result.name0); // обращаемся к объекту через свойство "name5" указанном в "name" инпута формы
        }
    });
});
 
 
});
server.php
PHP
1
2
3
4
5
<? header('Content-Type: text/html; charset=utf-8');
 
echo json_encode($_GET);
 
?>
styles.css
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
html, body{margin: 0px 0px 0px 0px;width: 100%;height: 100%;font-size: 20px;background: #eef0ff;}
 
button{
    width: 120px;
    height: 30px;
    font-size: 16px;
    cursor: pointer;
}
 
.fancyBox{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0px;
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    font-size: 100px;
    text-align: center;
    line-height: 160px;
    display: none;
}
Добавлено через 1 минуту
Нуу... это как пример...
0
357 / 118 / 20
Регистрация: 08.01.2015
Сообщений: 1,361
Записей в блоге: 1
05.01.2019, 22:48 9
Цитата Сообщение от User797 Посмотреть сообщение
отправка формы без перезагрузки страницы методом GET
Так для этого ж AJAX используют. Собственно говоря, как правило, именно для этого. Там надо указать method GET, да и все. А если без AJAX, то
Цитата Сообщение от 123orc123 Посмотреть сообщение
при отправке формы нативное поведение браузера - полный рефреш страницы
Добавлено через 2 минуты
Цитата Сообщение от User797 Посмотреть сообщение
этот результат нужно вывести в модальном окне.
То, что придет от сервера по AJAX-ответу, записываете в какую-нибудь переменную, а ее значение выводите в div - модальное окно.
0
0 / 0 / 0
Регистрация: 27.07.2018
Сообщений: 80
08.01.2019, 22:11  [ТС] 10
Выручайте) никак не могу сделать get запрос без перезагрузки страницы.
То есть, есть форма в которую которую пользователь должен заполнить, далее эти данные отправляются методом GET на страницу server.php где и происходит вывод информации. Так вот мне надо получить вывод информации не на странице server.php а на самой странице с формой то есть index.php без перезагрузки страницы.
Буду рад любому совету
0
0 / 0 / 0
Регистрация: 27.07.2018
Сообщений: 80
09.01.2019, 07:57  [ТС] 11
Вы получается передаете только первый input name="name0"
А как передать все сразу?
0
Эксперт JS
2034 / 1093 / 408
Регистрация: 29.04.2016
Сообщений: 2,612
09.01.2019, 09:19 12
Цитата Сообщение от User797 Посмотреть сообщение
А как передать все сразу?
Все данные с формы уходят а не только name="name0"
script.js -> 14 строка -> вместо $('.fancyBox').html(result.name0); напишите $('.fancyBox').html(result.name1); 2, 3 и так далее

Добавлено через 1 минуту
вам будет понятней если переписать script.js вот так:
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
$(document).ready(function(){
 
 
$('.fancyBox').on('click',() => $('.fancyBox').css({display : 'none'}) );
$('.myForm').on('submit',e => {
    e.preventDefault(); // не даст сработать стандартному действию браузера при отправке формы, вместо этого еще можно "return false;" но в конце этого блока с кодом
    $.ajax({
        type: 'GET',
        url: 'server.php', // файл PHP куда уходят данные с формы
        data: $('.myForm').serialize(), // сериализуем данные с формы
        success: function(data){    // при успешном запросе на сервер
            let result = JSON.parse(data);  // запихиваем пришедшие данные в объект
            $('.fancyBox').css({display : 'block'}); // показываем fancyBox
            $('.fancyBox').append(result.name0);  // 1-ое поле
            $('.fancyBox').append(result.name1);  // 2-ое поле
            $('.fancyBox').append(result.name2);  // 3-е поле...
        }
    });
});
 
 
});
Добавлено через 1 минуту
только шрифт поменьше сделайте в css а то не все видно...
0
Эксперт JS
2034 / 1093 / 408
Регистрация: 29.04.2016
Сообщений: 2,612
09.01.2019, 09:24 13
User797,
Отправка GET запроса без перезагрузки страницы
0
Эксперт JS
2034 / 1093 / 408
Регистрация: 29.04.2016
Сообщений: 2,612
09.01.2019, 09:28 14
User797, разобрались?
0
0 / 0 / 0
Регистрация: 27.07.2018
Сообщений: 80
09.01.2019, 09:32  [ТС] 15
Mr_Sergo,
Сделал в точности как вы
http://test.kazcs.com/123/
0
Эксперт JS
2034 / 1093 / 408
Регистрация: 29.04.2016
Сообщений: 2,612
09.01.2019, 09:38 16
User797,
а css-стили вы почему не прописали в styles.css?

Добавлено через 38 секунд
Он у вас вообще пустой
0
0 / 0 / 0
Регистрация: 27.07.2018
Сообщений: 80
09.01.2019, 09:40  [ТС] 17
Mr_Sergo,
Все равно не работает
0
Эксперт JS
2034 / 1093 / 408
Регистрация: 29.04.2016
Сообщений: 2,612
09.01.2019, 09:42 18
User797,
Пробуйте -> http://some-test.onlinewebshop... jquery/03/

Добавлено через 35 секунд
Работает?
0
0 / 0 / 0
Регистрация: 27.07.2018
Сообщений: 80
09.01.2019, 09:43  [ТС] 19
Mr_Sergo,
Мистика? У вас работает у меня нет
0
Эксперт JS
2034 / 1093 / 408
Регистрация: 29.04.2016
Сообщений: 2,612
09.01.2019, 09:44 20
Лучший ответ Сообщение было отмечено User797 как решение

Решение

User797,
Целиком залейте себе на сервер.zip
1
09.01.2019, 09:44
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
09.01.2019, 09:44
Помогаю со студенческими работами здесь

Динамическая подмена контента страницы по клику на ссылку, без перезагрузки всей страницы
Здравствуйте! Честно говоря точно не знал какими средствами можно реализовать, то что мне нужно,...

Подмена контента страницы по клику на ссылку меню, без перезагрузки всей страницы
Доброго времени суток! у меня имеется два блока, один блок - меню иерархическое аккордеон на...

Отправка одного поля без перезагрузки
Здравствуйте. Как сделать форму с 1 полем (номер телефона) и отправлять ее без перезагрузки...

Отправка формы без перезагрузки страницы
Всем добрый день. На данный момент отправка формы реализована через Ajax. Все отправляется, все...

Отправка формы без перезагрузки страницы
Подскажите пожалуйста, как можно сделать отправку формы методом POST без перезагрузки страницы? ...

Отправка почты без перезагрузки страницы
Привет всем. Перечитал кучу тем и т.д., но ничего не работает(или я накосячил). есть форма(сайт...


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

Или воспользуйтесь поиском по форуму:
20
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2024, CyberForum.ru