Передача методом 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 **[ТС]**

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

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами 8Observer8 20.02.2026 Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .	Конвертировать закладки radiotray-ng в m3u-плейлист damix 19.02.2026 Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .	Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI Eddy_Em 18.02.2026 Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .
И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»	SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .

@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