Форум программистов, компьютерный форум, киберфорум
PHP для начинающих
Форум программистов и сисадминов Киберфорум > Форум вебмастеров > PHP > PHP для начинающих
Войти
Регистрация
Восстановить пароль
Карта форума Темы раздела Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.69/26: Рейтинг темы: голосов - 26, средняя оценка - 4.69
0 / 0 / 0
Регистрация: 09.05.2013
Сообщений: 11
1

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

27.05.2013, 02:16. Показов 5033. Ответов 16
Метки нет (Все метки)
Author24 — интернет-сервис помощи студентам
Всем привет !

Написал обработчик через 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']);
?>
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
 27.05.2013, 02:16
Ответы с готовыми решениями:

Переделываь часть страницы без перезагрузки страницы
И так у меня есть код &lt;?php $file = &quot;./toolbar.php&quot;; $contents = file($file); $string =...

Исполнение PHP-скрипта без перезагрузки страницы и без знания JavaScript(!) - Xajax
Приветствую! Решил запостить отдельной темой, а в прилепленной (про Ajax) просто разместить на нее...

Пример простейшего калькулятора на PHP без перезагрузки страницы (чистый Ajax, без jQuery и других библиотек)
Привет. Это, в каком-то смысле, продолжение креатива...

Метод POST/GET без перезагрузки страницы
В вк есть api, запрос выглядит так, как сделать так, чтобы по нажатию кнопки выполнялась отправка...

16
65 / 65 / 18
Регистрация: 10.03.2013
Сообщений: 188
27.05.2013, 02:19 2
data: bl=+"bl"+&at=+"at",
кудато туда копать надо
0
0 / 0 / 0
Регистрация: 09.05.2013
Сообщений: 11
27.05.2013, 11:32  [ТС] 3
Пробовал оставлять одну переменную, а не 2 - не помогло. Ошибка где-то глубже
0
1178 / 1128 / 94
Регистрация: 31.05.2012
Сообщений: 3,060
27.05.2013, 12:45 4
Цитата Сообщение от Y_egor Посмотреть сообщение
return false;
Это нужно не для ready документа возвращать, а для функции submit.
Не туда строку вставили, выше перенесите на строку
0
0 / 0 / 0
Регистрация: 09.05.2013
Сообщений: 11
27.05.2013, 14:07  [ТС] 5
Изменил 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>
0
1178 / 1128 / 94
Регистрация: 31.05.2012
Сообщений: 3,060
27.05.2013, 14:25 6
а что должно быть? что значит пустой экран? пропадает форма?
Или не чего не выводит в результат?

Добавлено через 43 секунды
откройте консоль хрома и посмотрите, может есть ошибки.
0
0 / 0 / 0
Регистрация: 09.05.2013
Сообщений: 11
27.05.2013, 14:26  [ТС] 7
Должно выводить данные из формы без перезагрузки страницы, а сейчас, после внесения изменения, которые мне написали, вообще страницу не отображает (тексты, таблицы, данные и т.д.)
0
1178 / 1128 / 94
Регистрация: 31.05.2012
Сообщений: 3,060
27.05.2013, 14:30 8
Ну в данном куске JS ошибки нет, значит ошибка в другом месте.
0
0 / 0 / 0
Регистрация: 09.05.2013
Сообщений: 11
27.05.2013, 14:36  [ТС] 9
Думаю о нескольких местах:
1. Может в форме где-то ошибка ? Но без яваскрипта она передает методом ПОСТ, но с перезагрузкой страницы
2. Или в выводе данных может ?
3. или из за charset=windows-1251

Уже 4 дня "мучаю" и так и сяк.
0
1178 / 1128 / 94
Регистрация: 31.05.2012
Сообщений: 3,060
27.05.2013, 14:40 10
Цитата Сообщение от Y_egor Посмотреть сообщение
3. или из за charset=windows-1251
ЖС работать будет, просто русские символы не будут передаваться через ajax.

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

В хроме есть удобная консоль JS, смотрите ошибки, выводите логи из скрипта, смотрите что не так работает...
0
0 / 0 / 0
Регистрация: 09.05.2013
Сообщений: 11
27.05.2013, 14:55  [ТС] 11
Вот полный код:

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>
0
1178 / 1128 / 94
Регистрация: 31.05.2012
Сообщений: 3,060
27.05.2013, 15:02 12
У Вас что, скрипт шлёт запрос на эту же страницу? Так он получит в ответ полных код страницы, так не делают.
Почитайте про AJAX. Вам нужно возвращать только новые данные, а вы всю страницу принимаете, отсюда может быть конфликт ID тегов и js скриптов, не считая того что у вас в одном окне будет два раза загружен код страницы.
0
0 / 0 / 0
Регистрация: 09.05.2013
Сообщений: 11
27.05.2013, 15:09  [ТС] 13
Да, у меня скрипт отправляет повторно данные в это же окно, но по идее, он меняет то только данные формы и исходя из новых данных изменяет таблицу, которая идет ниже. Про ajax уже много прочитал, пробывал уже 2-мя способами данные обновлять, но вот пока стою на месте? Где мне нужно дописать и что (если знаете) - все никак "прорваться не могу!
А почему всю страницу принимает, если я скрипт привязываю только к к кнопке отправки в форме ?
0
1178 / 1128 / 94
Регистрация: 31.05.2012
Сообщений: 3,060
27.05.2013, 15:24 14
Видимо вам нужно для начала про то что такое веб страница, веб сервер, браузер и html почитать
Вы не понимаете как оно работает.

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

Всё что скрипт отдаёт на запрос, вам и вернётся.
Как я и писал выше
Цитата Сообщение от DrobyshevAlex Посмотреть сообщение
Вам нужно возвращать только новые данные
Для этого либо помещайте скрипт обработки формы в отдельный файл, либо проверяйте HTML заголовки, при ajax запросе, у вас будет заголовок X-Requested-With со значением XMLHttpRequest.
Но в таком стиле написания сайта, как у Вас, отсекать весь лишний код будет не удобно, у вас нет шаблонизации.
Так тчо лучше делайте отдельный скрипт обработчик формы.
0
0 / 0 / 0
Регистрация: 09.05.2013
Сообщений: 11
27.05.2013, 15:42  [ТС] 15
Отдельный скрипт обработчика формы я могу сделать, а как же тогда результаты переменной вернуть из того скрипта сюда без перезагрузки страницы ?
0
1178 / 1128 / 94
Регистрация: 31.05.2012
Сообщений: 3,060
27.05.2013, 15:46 16
Ну видимо вы плохо читали про Ajax.
Javascript
1
2
3

success: function(data) {
 $("div#result").html(data);
 }
в переменной data будет содержаться весь тест, который отдаст вэб сервер.

То есть в этой функции вы помещаете в div с id = result, весь текст который пришел в ответ на ajax запрос.
0
0 / 0 / 0
Регистрация: 09.05.2013
Сообщений: 11
27.05.2013, 16:44  [ТС] 17
Буду пробовать - результат напишу.
0
27.05.2013, 16:44
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
 27.05.2013, 16:44
Помогаю со студенческими работами здесь

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

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

Select передача выбранного значения на сервер без перезагрузки страницы
Доброго времени суток всем! Гуру помогите разобраться с основами ajax. задача наверное для многих...

ASP.NET Core. Передача данных на сервер без перезагрузки страницы
Разбираюсь с асп. Делаю онлайн стор. Есть вьюшка - список товаров с ссылкой &quot;добавить в корзину&quot;....


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

Или воспользуйтесь поиском по форуму:
17
Ответ Создать тему
КиберФорум - форум программистов, компьютерный форум, программирование
Поддержать - Реклама - Обратная связь
Powered by vBulletin
Copyright ©2000 - 2024, CyberForum.ru