Передача методом Post без перезагрузки страницы

@Y_egor · Регистрация: 09.05.2013

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

Всем привет !

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

Обработчик:

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
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<script type="text/javascript" src="FC_TrackBar/jquery-1.5.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
 $("#ramka").submit(function(){
 var bl = $("#bl").attr('value');
 var at = $("#at").attr('value');
$.ajax({
 url: "find.php",
 type: "POST",
 data: "bl="+bl+"&at="+at,
 success: function(data) {
 $("div#result").html(data);
 }
 }); 
 });
 return false;
 });
 
</script>
 
</head>

Форма отправки данных:

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
    <form action="" name="find"  method="POST" width="600"  id="ramka" >
      <div class="fld">
        <label>Ваш уровень BL в Webmoney</label>
            <input type="text" id="bl" name="bl" value="0" readonly="readonly" />
            <div id="bl_t">tracker here</div>
        </div>
        <div class="fld">
            <label>Сколько дней Вашему аттестату </label>
            <input type="text" id="at" name="at" value="0" readonly="readonly" />
            <div id="al_t">tracker here</div>
        </div>
    <input type="submit" value="Отправить" />
    </form>
    <div id="result"></div> 
 
                <script type="text/javascript">
                //<![CDATA[
                trackbar.getObject('bl_obj').init({
                    onMove : function() {
                        document.getElementById("bl").value = this.leftValue;
                    },
                    dual : false, // two intervals
                    width : 500, // px
                    leftLimit : 0, // unit of value
                    leftValue : 0, // unit of value
                    rightLimit : 300, // unit of value
                    rightValue : 300, // unit of value
                    clearLimits : true,
                    clearValues : true,
                    hehe : ":-)"
                },'bl_t');
 
                trackbar.getObject('at_obj').init({
                    onMove : function() {
                        document.getElementById("at").value = this.leftValue;
                    },
                    dual : false, // two intervals
                    width : 500, // px
                    leftLimit : 0, // unit of value
          leftValue : 0, // unit of value
          rightLimit : 730, // unit of value
          rightValue : 730, // unit of value
                    clearLimits : true,
                    clearValues : true,
                    hehe : ":-)"
                },'al_t');
                // -->
                </script>

Вывод данных:

HTML5
1
2
3
4
<?php 
$_POST['bl']=intval($_POST['bl']);
$_POST['at']=intval($_POST['at']);
?>

@Sima175 · 27.05.2013, 02:19

data: bl=+"bl"+&at=+"at",
кудато туда копать надо

@Y_egor · 27.05.2013, 11:32 **[ТС]**

Пробовал оставлять одну переменную, а не 2 - не помогло. Ошибка где-то глубже

DrobyshevAlex · 27.05.2013, 12:45

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

return false;

Это нужно не для ready документа возвращать, а для функции submit.
Не туда строку вставили, выше перенесите на строку

@Y_egor · 27.05.2013, 14:07 **[ТС]**

Изменил return false, теперь страница обновляется и зависает, при это выводит пустой экран

Измененный код:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script type="text/javascript">
$(document).ready(function() {
 $("#ramka").submit(function(){
 var bl = $("#bl").attr('value');
 var at = $("#at").attr('value');
$.ajax({
 url: "find.php",
 type: "POST",
 data: "bl="+bl+"&at="+at,
 success: function(data) {
 $("div#result").html(data);
 }
 }); 
 return false;
 });
 });
 
</script>

DrobyshevAlex · 27.05.2013, 14:25

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

Добавлено через 43 секунды
откройте консоль хрома и посмотрите, может есть ошибки.

@Y_egor · 27.05.2013, 14:26 **[ТС]**

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

DrobyshevAlex · 27.05.2013, 14:30

Ну в данном куске JS ошибки нет, значит ошибка в другом месте.

@Y_egor · 27.05.2013, 14:36 **[ТС]**

Думаю о нескольких местах:
1. Может в форме где-то ошибка ? Но без яваскрипта она передает методом ПОСТ, но с перезагрузкой страницы
2. Или в выводе данных может ?
3. или из за charset=windows-1251

Уже 4 дня "мучаю" и так и сяк.

DrobyshevAlex · 27.05.2013, 14:40

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

3. или из за charset=windows-1251

ЖС работать будет, просто русские символы не будут передаваться через ajax.

Выложили бы не кусками, а полный код страницы, было бы проще, а лучше ещё и ссылку на сайт в живую дали бы.

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

@Y_egor · 27.05.2013, 14:55 **[ТС]**

Вот полный код:

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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
<?php include ("bd.php");/*Соединяемся с базой данных*/?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Мониторинг кредитных автоматов вебмани - выбери лучший кредит Webmoney</title>
<meta name="description" content="Мониторинг кредитных автоматов MonitoringCredit.ru - это самая полная информация о кредитных сервисах, которые выдают кредиты Webmoney." />
<meta name="keywords" content="кредит webmoney, кредит вебмани формальный аттестат, кредит webmoney с начальным аттестатом"  />
<!--Общий стиль-->
<link href="style.css" rel="stylesheet" type="text/css" />
 
<!--Поиск-->
<style type="text/css">
    input {border:1px solid #666; font:12px arial; width:50px;}
    div {padding-bottom:15px; font:11px tahoma;}
    label {width:300px; display:block; float:left;}
    #ramka {-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px; border:solid  #00F; width:560px; margin:10px; padding:10px;
behavior: url(FC_TrackBar/pie/PIE.htc);}
</style>
<link rel="stylesheet" type="text/css" href="FC_TrackBar/trackbar.css" />
<script type="text/javascript" src="FC_TrackBar/trackbar.js"></script>
<!--Быстрый поиск-->
<script type="text/javascript" src="FC_TrackBar/jquery-1.5.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
 $("#ramka").submit(function(){
 var bl = $("#bl").attr('value');
 var at = $("#at").attr('value');
$.ajax({
 url: "find.php",
 type: "POST",
 data: "bl="+bl+"&at="+at,
 success: function(data) {
 $("div#result").html(data);
 }
 }); 
 return false;
 });
 });
 
</script>
 
</head>
 
<body>
 
        <p>&nbsp;</p>
    <form action="" name="find"  method="POST" width="600"  id="ramka" >
      <div class="fld">
        <label>Ваш уровень BL в Webmoney</label>
            <input type="text" id="bl" name="bl" value="0" readonly="readonly" />
            <div id="bl_t">tracker here</div>
        </div>
        <div class="fld">
            <label>Сколько дней Вашему аттестату </label>
            <input type="text" id="at" name="at" value="0" readonly="readonly" />
            <div id="al_t">tracker here</div>
        </div>
    <input type="submit" value="Отправить" />
    </form>
    <div id="result"></div> 
 
                <script type="text/javascript">
                //<![CDATA[
                trackbar.getObject('bl_obj').init({
                    onMove : function() {
                        document.getElementById("bl").value = this.leftValue;
                    },
                    dual : false, // two intervals
                    width : 500, // px
                    leftLimit : 0, // unit of value
                    leftValue : 0, // unit of value
                    rightLimit : 300, // unit of value
                    rightValue : 300, // unit of value
                    clearLimits : true,
                    clearValues : true,
                    hehe : ":-)"
                },'bl_t');
 
                trackbar.getObject('at_obj').init({
                    onMove : function() {
                        document.getElementById("at").value = this.leftValue;
                    },
                    dual : false, // two intervals
                    width : 500, // px
                    leftLimit : 0, // unit of value
          leftValue : 0, // unit of value
          rightLimit : 730, // unit of value
          rightValue : 730, // unit of value
                    clearLimits : true,
                    clearValues : true,
                    hehe : ":-)"
                },'al_t');
                // -->
                </script>
 
        <p>&nbsp;</p>
 
<
 <?php 
$_POST['bl']=intval($_POST['bl']);
$_POST['at']=intval($_POST['at']);
 
$b =  $_POST['bl'] ; 
$c = $_POST['at'] ;
 
echo $b ;
 ?>
</body>
</html>

DrobyshevAlex · 27.05.2013, 15:02

У Вас что, скрипт шлёт запрос на эту же страницу? Так он получит в ответ полных код страницы, так не делают.
Почитайте про AJAX. Вам нужно возвращать только новые данные, а вы всю страницу принимаете, отсюда может быть конфликт ID тегов и js скриптов, не считая того что у вас в одном окне будет два раза загружен код страницы.

@Y_egor · 27.05.2013, 15:09 **[ТС]**

Да, у меня скрипт отправляет повторно данные в это же окно, но по идее, он меняет то только данные формы и исходя из новых данных изменяет таблицу, которая идет ниже. Про ajax уже много прочитал, пробывал уже 2-мя способами данные обновлять, но вот пока стою на месте? Где мне нужно дописать и что (если знаете) - все никак "прорваться не могу!
А почему всю страницу принимает, если я скрипт привязываю только к к кнопке отправки в форме ?

DrobyshevAlex · 27.05.2013, 15:24

Видимо вам нужно для начала про то что такое веб страница, веб сервер, браузер и html почитать

Вы не понимаете как оно работает.

У вас есть скрпит, генерирующий вэб страницу. Браузер послал запрос на сервер. Сервер отдал ему страницу.
Потом ajax послал опять запрос на сервер. Естественно сервер опять отдаст страницу.

Всё что скрипт отдаёт на запрос, вам и вернётся.
Как я и писал выше

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

Вам нужно возвращать только новые данные

Для этого либо помещайте скрипт обработки формы в отдельный файл, либо проверяйте HTML заголовки, при ajax запросе, у вас будет заголовок X-Requested-With со значением XMLHttpRequest.
Но в таком стиле написания сайта, как у Вас, отсекать весь лишний код будет не удобно, у вас нет шаблонизации.
Так тчо лучше делайте отдельный скрипт обработчик формы.

@Y_egor · 27.05.2013, 15:42 **[ТС]**

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

DrobyshevAlex · 27.05.2013, 15:46

Ну видимо вы плохо читали про Ajax.

JavaScript
1
2
3
success: function(data) {
 $("div#result").html(data);
 }

в переменной data будет содержаться весь тест, который отдаст вэб сервер.

То есть в этой функции вы помещаете в div с id = result, весь текст который пришел в ответ на ajax запрос.

@Y_egor · 27.05.2013, 16:44 **[ТС]**

Буду пробовать - результат напишу.

Новые блоги и статьи Все статьи Все блоги /
Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Programma_Boinc 28.12.2025 Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Налог на собак: https:/ / ********/ gallery/ V06K53e Финансовый отчет в Excel: https:/ / ********/ gallery/ bKBkQFf Пост отсюда. . .	Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США. Programma_Boinc 26.12.2025 Нашел на реддите интересную статью под названием Anyone know where to get a free Desktop or Laptop? Ниже её машинный перевод. После долгих разбирательств я наконец-то вернула себе. . .	Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка. Programma_Boinc 23.12.2025 Рецензия / Мнение/ Перевод Нашел на реддите интересную статью под названием The Thinkpad X220 Tablet is the best budget school laptop period . Ниже её машинный перевод. Thinkpad X220 Tablet —. . .	PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Как объединить две одинаковые БД Access с разными данными VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.
Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .	Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .

@Sima175 65 / 65 / 18 Регистрация: 10.03.2013 Сообщений: 188
	27.05.2013, 02:19
	data: bl=+"bl"+&at=+"at", кудато туда копать надо 0

@Y_egor 0 / 0 / 0 Регистрация: 09.05.2013 Сообщений: 11
	27.05.2013, 11:32 [ТС]
	Пробовал оставлять одну переменную, а не 2 - не помогло. Ошибка где-то глубже 0

DrobyshevAlex 1178 / 1128 / 94 Регистрация: 31.05.2012 Сообщений: 3,060
	27.05.2013, 14:25
	а что должно быть? что значит пустой экран? пропадает форма? Или не чего не выводит в результат? Добавлено через 43 секунды откройте консоль хрома и посмотрите, может есть ошибки. 0

@Y_egor 0 / 0 / 0 Регистрация: 09.05.2013 Сообщений: 11
	27.05.2013, 14:26 [ТС]
	Должно выводить данные из формы без перезагрузки страницы, а сейчас, после внесения изменения, которые мне написали, вообще страницу не отображает (тексты, таблицы, данные и т.д.) 0

DrobyshevAlex 1178 / 1128 / 94 Регистрация: 31.05.2012 Сообщений: 3,060
	27.05.2013, 14:30
	Ну в данном куске JS ошибки нет, значит ошибка в другом месте. 0

@Y_egor 0 / 0 / 0 Регистрация: 09.05.2013 Сообщений: 11
	27.05.2013, 14:36 [ТС]
	Думаю о нескольких местах: 1. Может в форме где-то ошибка ? Но без яваскрипта она передает методом ПОСТ, но с перезагрузкой страницы 2. Или в выводе данных может ? 3. или из за charset=windows-1251 Уже 4 дня "мучаю" и так и сяк. 0

DrobyshevAlex 1178 / 1128 / 94 Регистрация: 31.05.2012 Сообщений: 3,060
	27.05.2013, 15:02
	У Вас что, скрипт шлёт запрос на эту же страницу? Так он получит в ответ полных код страницы, так не делают. Почитайте про AJAX. Вам нужно возвращать только новые данные, а вы всю страницу принимаете, отсюда может быть конфликт ID тегов и js скриптов, не считая того что у вас в одном окне будет два раза загружен код страницы. 0

@Y_egor 0 / 0 / 0 Регистрация: 09.05.2013 Сообщений: 11
	27.05.2013, 15:09 [ТС]
	Да, у меня скрипт отправляет повторно данные в это же окно, но по идее, он меняет то только данные формы и исходя из новых данных изменяет таблицу, которая идет ниже. Про ajax уже много прочитал, пробывал уже 2-мя способами данные обновлять, но вот пока стою на месте? Где мне нужно дописать и что (если знаете) - все никак "прорваться не могу! А почему всю страницу принимает, если я скрипт привязываю только к к кнопке отправки в форме ? 0

@Y_egor 0 / 0 / 0 Регистрация: 09.05.2013 Сообщений: 11
	27.05.2013, 15:42 [ТС]
	Отдельный скрипт обработчика формы я могу сделать, а как же тогда результаты переменной вернуть из того скрипта сюда без перезагрузки страницы ? 0

@Y_egor 0 / 0 / 0 Регистрация: 09.05.2013 Сообщений: 11
	27.05.2013, 16:44 [ТС]
	Буду пробовать - результат напишу. 0