Отправить данные формы без перезагрузки страницы

@elochka · Регистрация: 20.10.2016

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

Здравствуйте! На странице есть форма. Никак не получается отправить данные этой формы без перезагрузки страниц. Подскажите, как быть?
А можно ли как-нибудь с самой функции отправить данные? Заранее спасибо

@Balanaar · 05.12.2016, 09:37

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

Подскажите, как быть?

Использовать ajax

@Уф · 05.12.2016, 10:47

В функции пишешь

JavaScript
1
$.post("action.php", {"name": "Vasya", "tel": "123"}, function(data){ alert('Otvet\n'+data); });

@elochka · 05.12.2016, 14:49 **[ТС]**

А Вы могли бы объяснить это? Или подробнее? Я просто не разбираюсь в этом(

@splik · 07.12.2016, 23:22

У меня получился такой код на jquery. отправка происходит при нажатии ctrl+enter, если хочешь чтобы только enter, тогда убери из if "e.ctrlKey &&" и всё.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
$('textarea').keydown(function (e) {
  if (e.ctrlKey && e.keyCode == 13) {
      
    var textareaT=$('textarea').val();
   
      
      $.post(
  "/my1.php",  //файл который сохраняет в бд текст из textarea
  {
    param1: textareaT
  },
  onAjaxSuccess
);
 
      function onAjaxSuccess(data)
        {
        // Здесь мы получаем данные, отправленные сервером и выводим их на экран.
        alert(data);
        }  
    
  }
    });

@Уф · 08.12.2016, 19:23

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

HTML5
1
2
3
4
5
<form method="POST" action="action.php">
<input name="name">
<input name="tel">
<input type="submit" value="Отправить">
</form>

@elochka · 08.12.2016, 20:31 **[ТС]**

а как это написать, чтобы без перезагрузки и моментально все происходило?
допустим, что форма почти такая как у вас. тогда потом прописывать

JavaScript
1
<script> $.post("action.php", {"name": "Vasya", "tel": "123"}, function(data){ alert('Otvet\n'+data); }); </script>

???

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
<textarea method="post" class="first_textarea" placeholder="..."></textarea>
                    <p><input type= "submit" value="Отправить"></p>
<script type="text/javascript">
$('.first_textarea').keydown(function (e) {
      if (e.keyCode == 13) {
          
        var textareaT=$('.first_textarea').val();
        var rofl = "<? echo $rofl ?>";
          
          $.post(
      "/send.php?rofl=" + rofl,  //файл который сохраняет в бд текст из textarea
      {
        param1: textareaT
      },
      onAjaxSuccess
    );
     
          function onAjaxSuccess(data)
            {
            // Здесь мы получаем данные, отправленные сервером и выводим их на экран.
            alert(data);
            }  
        
      }
        });
</script>

Вот так? Почему-то не работает, поправьте, если что не так

@splik · 08.12.2016, 21:14

Зачем вы создаёте переменную rofl? она не нужна. Текст хранится в textareaT
И в файле send.php можно получить текст из textara так: $_POST["textareaT"]

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
<textarea method="post" class="first_textarea" placeholder="..."></textarea>
                    <p><input type= "submit" value="Отправить"></p>
<script type="text/javascript">
$('.first_textarea').keydown(function (e) {
      if (e.keyCode == 13) {
          
        var textareaT=$('.first_textarea').val();
        
          
          $.post(
      "/send.php,  //файл который сохраняет в бд текст из textarea
      {
        param1: textareaT
      },
      onAjaxSuccess
    );
     
          function onAjaxSuccess(data)
            {
            // Здесь мы получаем данные, отправленные сервером и выводим их на экран.
            alert(data);
            }  
        
      }
        });
</script>

@Sluchayno · 08.12.2016, 22:00

HTML5
1
2
3
4
5
6
<form method="post" action="./" class="login">
          <h3>Авторизация</h3>
           <input type="text" name="login" id="login" placeholder="Логин" />
           <input type="password" name="Pass" id="Pass" placeholder="Пароль" />
           <input type="button" name="submit" id="auth" value="Авторизоваться" />
          </form>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$('#auth').click(function(){
{
     $.ajax({
        url        : 'auth.php', 
        type        : 'POST', 
        data        : {Login : $('#login').val(), 
                      Password : $('#Pass').val()}, 
        success     : function(data){
               if(data == 'error'){ 
                alert('Авторизовались')
               }
               else
               {
                   alert("Что то не так!");
               }
        }   
    });
});

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
<?
if(isset($_POST['Login']) && isset($_POST['Password']))
    {
       if($_POST['Login'] == 'user' && $_POST['Password'] == 'user')
       {
          echo 'ok';
       }
      else
      {
        echo 'error';
      }
    }
?>

Таким образом вы условно авторизовали пользователя без перезагрузки страницы.

@Kerry_Jr · 08.12.2016, 22:01

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

И в файле send.php можно получить текст из textara так: $_POST["textareaT"]

Не $_POST['textareaT'], а $_POST['param1'].

@splik · 09.12.2016, 07:27

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

PHP/HTML
1
2
3
$(document).ready(function(){
//здесь код
});

И если и дальше не пойдёт, тогда выложи файл send.php

@elochka · 11.12.2016, 23:49 **[ТС]**

Не получается. Данные отправляются, но страница все равно перезагружается. Да и требуется постоянно подтверждение на отправку формы. Возможно, я непонятен. Мне нужно, чтобы моментально все происходило. Примером может являться какой-нибудь чат, где сообщения моментально отправляются. Например, диалоги фейсбука или вконтакте.

@Уф · 12.12.2016, 10:24

даже уже и не знаю как тебе тогда объяснить, вот простенький наглядный пример. внимательно смотри как какие переменные называются и что куда выводится, сопоставишь - поймешь суть.
https://jsfiddle.net/ah53ahkf/

Добавлено через 30 секунд

HTML5
1
2
3
4
5
6
7
<form method="POST">
pole1 <input name="pole1" class="pole"><br>
pole2 <input name="pole2" class="pole"><br>
<input type="submit"> 
</form>
Otvet
<span id="otvet"></span>

JavaScript
1
2
3
4
5
6
7
8
9
10
    $('input.pole').keyup(function(){
    $.post('https://httpbin.org/post',
        {
      lal1: $('input[name=pole1]').val(),
      lal2: $('input[name=pole2]').val()
      }, function(data){
        $('#otvet').html(JSON.stringify(data).replace(/}/g,'}<br>'));
        console.log(data);
      });
  });

@elochka · 14.12.2016, 06:12 **[ТС]**

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

@Уф · 14.12.2016, 23:00

т.е. все советы что мы тебе дали не внесли ясности в твой вопрос?
если уж совсем хочешь все разжеванное, хотя куда уж понятнее. пиши по пунктам.
1. код хтмл формы
2. по какому событию в форме нужно отправлять данные
3. куда отображать результат и надо ли это делать вообще
4. база mysql или postgre?
5. Каким запросом какие поля формы куда вставлять

@elochka · 15.12.2016, 06:05 **[ТС]**

я хотел бы и понять. то, что написали вы, мне объясняет некоторые вещи, но как сделать то , что надо мне, я не знаю

HTML5
1
<div id="show"></div>

html форма

PHP/HTML
1
2
3
4
<form id="sending_form" method="post">  
<textarea id="message" name="text_mess"></textarea>
<p><input id="submitter" name="submitter" type= "submit" value="Отправить"></p></form>
<?php $id = $_GET[id];?>

обработка - send.php?id=$id:

PHP
1
2
3
4
5
6
7
8
<?php 
$id_user = $_SESSION[loggedIn];
mysql_connect("localhost", "root");
if(!empty($_POST['text_mess'])){
$id = $_GET[id];
    $message_text = $_POST[text_mess];
    mysql_query("INSERT INTO table (time, date, text, id_send, id_rec) VALUES (current_time, current_date, '$message_text', '$id_user', '$id')");
    }?>

ход событий. надо, чтобы
1)когда пользователь начинал печатать, без нажатия на textarea писалось в ней. то есть сразу с клавиатуры печаталось в textarea. ввод текста не должен подлагивать из-за функции, которую напишу ниже.
2) после того как пользователь напечатал, он может нажать на Enter или на кнопку "отправить", сообщение мгновенно отправлялось бы без выплывающих окон подтверждения и прочего.
3) на отправке сообщения: не должна повторяться отправка данных формы, не должна перезагружаться страница, переходы не должны попадать в историю браузера(их вообще, как и сам send.php хотелось бы убрать, а код вставить под форму), не должно быть такого, что после каждой отправленной формы можно было нажать ← и вот вы уже на предыдущей странице, а именно - тут же, так как все что было сделано, - отправилась форма.
4) при каждом изменении таблицы в бд в <div id="show"></div> должны отображаться изменения. есть такая функция

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
function show()
    {var id = "<? echo $id ?>";
    $.ajax({
        url: "mess_load.php?id=" + id,
        cache: false,
        success: function(html){
            $("#show").html(html);
        }
    });
    }
    $(document).ready(function(){
        show();
        setInterval('show()',15);
    });

она вроде норм да и работает, но от нее лагает ввод в textarea и сама страничка чуть-чуть тормозит. хотелось бы что-нибудь лучше, без лагов.
в целом это все. я извиняюсь за свою недоразвитость в данной теме. спасибо за помощь)

Комментарий модератора

Код оформляем с помощью, соответствующих тегов в редакторе!

Новые блоги и статьи Все статьи Все блоги /
Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а привычная функция main(). . .	моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .	Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом	http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .
http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .	Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь(не выше 3-го порядка) постоянного тока с элементами R, L, C, k(ключ), U, E, J. Программа находит переходные токи и напряжения на элементах схемы классическим методом(1 и 2 з-ны. . .	Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .	Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/

@elochka 2 / 2 / 2 Регистрация: 20.10.2016 Сообщений: 92

	Отправить данные формы без перезагрузки страницы 04.12.2016, 19:57. Показов 3657. Ответов 15 Метки нет (Все метки) Здравствуйте! На странице есть форма. Никак не получается отправить данные этой формы без перезагрузки страниц. Подскажите, как быть? А можно ли как-нибудь с самой функции отправить данные? Заранее спасибо 0

@elochka 2 / 2 / 2 Регистрация: 20.10.2016 Сообщений: 92
	05.12.2016, 14:49 [ТС]
	А Вы могли бы объяснить это? Или подробнее? Я просто не разбираюсь в этом( 0

@elochka 2 / 2 / 2 Регистрация: 20.10.2016 Сообщений: 92
	11.12.2016, 23:49 [ТС]
	Не получается. Данные отправляются, но страница все равно перезагружается. Да и требуется постоянно подтверждение на отправку формы. Возможно, я непонятен. Мне нужно, чтобы моментально все происходило. Примером может являться какой-нибудь чат, где сообщения моментально отправляются. Например, диалоги фейсбука или вконтакте. 0

@elochka 2 / 2 / 2 Регистрация: 20.10.2016 Сообщений: 92
	14.12.2016, 06:12 [ТС]
	как я понял, моя задача сводится к одному вопросу. как вставить данные в бд mysql без перезагрузки страницы и повторной отправки формы 0

@Уф 890 / 725 / 447 Регистрация: 13.07.2015 Сообщений: 2,277
	14.12.2016, 23:00
	т.е. все советы что мы тебе дали не внесли ясности в твой вопрос? если уж совсем хочешь все разжеванное, хотя куда уж понятнее. пиши по пунктам. 1. код хтмл формы 2. по какому событию в форме нужно отправлять данные 3. куда отображать результат и надо ли это делать вообще 4. база mysql или postgre? 5. Каким запросом какие поля формы куда вставлять 0