Отправка POST запроса через Ajax

@Compaq · Регистрация: 14.02.2013

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

Добрый день,

Я новичок в jQuery и Ajax соответственно.

На сайте потребовался калькулятор, для расчета доставки, данные по странам, стоимость и тип доставки находятся в БД.

Подключил библиотеку jquery.form.min.js, хотел сформировать запрос к БД без перезагрузки страницы, однако парюсь с Ajax, перепробовал сформировать запрос через json или простым методом, но ничего не получается.

Собственно код страницы HTML:

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
<div class="calc_left">
<form action="" method="post">
<div class="block_col">
Страна доставки:
</div>
<div class="block_col">
<select id="calc_country_rate" name="country_name">
<option value="RU">Россия</option>
<option value="UA">Украина</option>
<option value="BY">Беларусь</option>
</select>
</div>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p><br/></p>
<div class="block_col">
Вес:
</div>
<div class="block_col_weight_amount">
<input type="text" name="weight" id="weight_amount" value="1"/>
</div>
<div class="block_col_weight_type">
<select id="weight_type" name="weight_type">
<option value="kg">kg, килограмм</option>
<option value="lb">lb, фунт</option>
</select>
</div>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p><br/></p>
<div class="block_col">
&nbsp;
</div>
<div class="block_col">
<input type="submit" value="Посчитать"/> 
</div>
</form>

Код PHP:

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<?php
$country_name=$_POST['country_name'];
$weight=$_POST['weight'];
$weight_type=$_POST['weight_type'];
$weight=strip_tags($weight);
$weight-trim($weight);
if($weight_type=='kg'){
$weight=2.20462262*$weight;
}
$weight=ceil($weight);
$price_group=getPricegroup($country_name);
$cost=getCostEms($price_group,$weight);
$cost2=getCostPriority($price_group,$weight);
$cost3=getCostTnt($weight);
?>

Так как я подключил библиотеку jquery.form.min.js, то соответственно пытался выполнить запрос без перезагрузки, не могли бы Вы помочь с правильным Javascript?

С уважением,

@sMockingbird · 19.08.2013, 08:37

JavaScript
1
2
3
$.post('my.php', function(data) {
 
});

это стандартный запрос к my.php через ajax.
в тело {

}

надо вставить функцию.
У Вас пхп файл вообще данные возвращает какие то?

@Compaq · 19.08.2013, 09:06 **[ТС]**

Добрый день,

Спасибо за ответ. Я написал пока вот это, а дальше не знаю как. Данные возвращает, это калькулятор расчета стоимости, php код внедрен в html файл, запросы к MySQL выполняются в отдельном файле.

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$(document).ready(function()
{
    $('#calctext').ajaxForm(
    {
        dataType:"json",
        success: function(data)
        {
            $("#calc_country_rate").val(data.country_name);
            $("#weight_amount").val(data.weight);
            $("#weight_type").val(data.weight_type);
            var temp=data.cost+"" - стоит вопрос тут
            $("#calc_result_ems").text(temp);
        }
    })
}

@sMockingbird · 19.08.2013, 09:24

А что происходит вообще?
Что вот так выведет?

JavaScript
1
2
3
4
5
6
7
8
9
10
11
$(document).ready(function()
{
    $('#calctext').ajaxForm(
    {
        dataType:"json",
        success: function(data)
        {
  alert(data.country_name);
        }
    })
}

@Compaq · 19.08.2013, 09:29 **[ТС]**

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

@Soldado · 19.08.2013, 10:39

Не нужно дополнительных плагинов, только библиотека jQuery
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
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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head> <title>Подсчёт</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
 
<script type="text/javascript">
$(document).ready(function(){
 
/*отправка формы*/
$('#myForm').submit(function(event){
        event.preventDefault();/*предотвращаем стандартную отправку*/
        
var dan=$(this).serialize();/*упорядочиваем данные из формы*/
 
    $.post(
        'phpscript.php',
          dan,
        function(data){
            $("#result").html(data);/*сюда возврат отправленных данных - демонстрация*/
            }
        )
});
});/*end  ready*/
</script>
 
</head>
<body>
<div class="calc_left">
    <form  id="myForm">
            <div class="block_col">
                                    Страна доставки:
            </div>
            <div class="block_col">
                    <select id="calc_country_rate" name="country_name">
                            <option value="RU">Россия</option>
                            <option value="UA">Украина</option>
                            <option value="BY">Беларусь</option>
                    </select>
            </div>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p><br/></p>
            <div class="block_col">
                        Вес:
            </div>
            <div class="block_col_weight_amount">
                    <input type="text" name="weight" id="weight_amount" value="1"/>
            </div>
            <div class="block_col_weight_type">
                    <select id="weight_type" name="weight_type">
                                <option value="kg">kg, килограмм</option>
                                <option value="lb">lb, фунт</option>
                    </select>
            </div>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p><br/></p>
            <div class="block_col">
                        &nbsp;
            </div>
            <div class="block_col">
                    <input type="submit" value="Посчитать"/> 
            </div>
    </form>
</div>
<div id="result"></div>
 
 
</body>
</html>

phpscript.php страница обработчика (для демонстрации просто возвращаю назад полученное)

PHP
1
2
3
4
5
6
7
8
9
10
<?php
 if(isset($_POST['country_name'],$_POST['weight'],$_POST['weight_type'])){
    // фильтрация обработка и подсчёт
        $country_name=$_POST['country_name'];
        $weight=$_POST['weight'];
        $weight_type=$_POST['weight_type'];
        
     echo "Страна: $country_name. Вес: $weight ($weight_type)";    
  }
?>

Тоже самое в формате json

Кликните здесь для просмотра всего текста

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head> <title>Подсчёт</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
 
<script type="text/javascript">
$(document).ready(function(){
 
/*отправка формы*/
$('#myForm').submit(function(event){
        event.preventDefault();/*предотвращаем стандартную отправку*/
        
var dan=$(this).serialize();/*упорядочиваем данные из формы*/
 
    $.post(
        'phpscript.php',
          dan,
        function(data){
            $("#result").html(data.country_name);
            $("#result1").html(data.weight);
            $("#result2").html(data.weight_type);
            
            },
             "json"
        )
});
});/*end  ready*/
</script>
 
</head>
<body>
<div class="calc_left">
    <form  id="myForm">
            <div class="block_col">
                                    Страна доставки:
            </div>
            <div class="block_col">
                    <select id="calc_country_rate" name="country_name">
                            <option value="RU">Россия</option>
                            <option value="UA">Украина</option>
                            <option value="BY">Беларусь</option>
                    </select>
            </div>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p><br/></p>
            <div class="block_col">
                        Вес:
            </div>
            <div class="block_col_weight_amount">
                    <input type="text" name="weight" id="weight_amount" value="1"/>
            </div>
            <div class="block_col_weight_type">
                    <select id="weight_type" name="weight_type">
                                <option value="kg">kg, килограмм</option>
                                <option value="lb">lb, фунт</option>
                    </select>
            </div>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p><br/></p>
            <div class="block_col">
                        &nbsp;
            </div>
            <div class="block_col">
                    <input type="submit" value="Посчитать"/> 
            </div>
    </form>
</div>
<div id="result"></div>
<div id="result1"></div>
<div id="result2"></div>
</body>
</html>

Кликните здесь для просмотра всего текста

PHP
1
2
3
4
5
6
7
8
9
10
<?php
 if(isset($_POST['country_name'],$_POST['weight'],$_POST['weight_type'])){
    // фильтрация обработка и подсчёт
        $res["country_name"]=$_POST['country_name'];
        $res["weight"]=$_POST['weight'];
        $res["weight_type"]=$_POST['weight_type'];
        
    echo json_encode($res); 
  }
?>

@Compaq · 19.08.2013, 11:42 **[ТС]**

Он почему-то открывает в странице новую страницу, как-бы делая наслоение, вместо вывода в необходимых id

Добавлено через 57 минут
Soldado, не подскажите как исправить ошибку, он открывает целое окно, вместо вывода информации

@Soldado · 19.08.2013, 13:15

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

Soldado, не подскажите как исправить ошибку, он открывает целое окно, вместо вывода информации

Он - это о чём речь, о каком коде? Те варианты, что я показал - всё правильно выводят. Ajax удобно отслеживать с помощью Firebug для браузера Firefox. Откройте Firefox перейдите по ссылке и жмите "+Добавить в Firefox" . После добавления заходите на Вашу страницу и кликом правой кнопкой мышки из контекстного меню выбираете "Инспектировать элемент с помощью Firebug". Включите консоль. И жмите на кнопку отправления формы. Отслеживайте, что уходит и, что возвращается.

@sMockingbird · 19.08.2013, 13:16

Compaq, Вы это всё на сайте тестите или у себя на локалке где то?

@Compaq · 20.08.2013, 06:31 **[ТС]**

Soldado, у меня есть firebug, я протестил несколько раз выводит новым окном в том же окне целую страницу, вместо одной переменной cost.

Добавлено через 19 секунд
sMockingbird, тестю на сайте и на локалке, результат один и тот же

Добавлено через 1 час 23 минуты
Разобрался, надо было скрипт PHP вывести в отдельный файл, Спасибо всем. Думаю, получится исправить

Добавлено через 4 часа 19 минут
Soldado, А можете посоветовать как распределить, у меня просто 3 блока, чтобы к примеру к DIV ID 1 равнялось значение $cost1, блоку DIV ID 2 значение $cost2, DIV ID 3 значение $cost3.

У меня получилось допилить, чтобы из БД рассчитывалась стоимость, но пока она это делает только для одной позиции или все три пихает в один блок.

JavaScript
1
2
3
4
5
6
7
 $.post(
        'calc.php',
          dan,
        function(data){
            $("#tnt").html(data);/*сюда возврат отправленных данных - демонстрация*/
            }
        )

Добавлено через 59 секунд
А можете посоветовать как распределить, у меня просто 3 блока, чтобы к примеру к DIV ID 1 равнялось значение $cost1, блоку DIV ID 2 значение $cost2, DIV ID 3 значение $cost3.

У меня получилось допилить, чтобы из БД рассчитывалась стоимость, но пока она это делает только для одной позиции или все три пихает в один блок.

JavaScript
1
2
3
4
5
6
7
$.post(
        'calc.php',
          dan,
        function(data){
            $("#tnt").html(data);/*сюда возврат отправленных данных - демонстрация*/
            }
        )

@Zazu · 20.08.2013, 12:54

Compaq, тоесть у вас в data содержится информация, которую нужно разделить на 3 части, правильно я вас понял?

@Compaq · 20.08.2013, 19:53 **[ТС]**

Добрый день, да, совершенно верно. В блок 1 вставить одно значение, в блок 2 другое значение

Новые блоги и статьи Все статьи Все блоги /
Отчёт о спецтехнике находящейся в ремонте Maks 20.04.2026 Отчёт из решения ниже размещен в конфигурации КА2. Задача: отобразить спецтехнику, которая на данный момент находится в ремонте. Есть нетиповой документ "Заявка на ремонт спецтехники" который. . .	Памятка для бота и "визитка" для читателей "Semantic Universe Layer (Слой семантической вселенной)" Hrethgir 19.04.2026 Сгенерировано для краткого описания по случаю сборки и компиляции скелета серверного приложения. И пусть после этого скажут, что статьи сгенерированные AI - туфта и не интересно. И это не реклама -. . .	Запрет удаления строк ТЧ документа при определенном условии Maks 19.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "Аккумуляторы", разработанного в конфигурации КА2. У данного документа есть ТЧ, в которой в зависимости от прав доступа. . .	Модель заражения группы наркоманов alhaos 17.04.2026 Условия задачи сформулированы тут Суть: - Группа наркоманов из 10 человек. - Только один инфицирован ВИЧ. - Колются одной иглой. - Колются раз в день. - Колются последовательно через. . .
Мысли в слух. Про "навсегда". kumehtar 16.04.2026 Подумалось тут, что наверное очень глупо использовать во всяких своих установках понятие "навсегда". Это очень сильное понятие, и я только начинаю понимать край его смысла, не смотря на то что давно. . .	My Business CRM MaGz GoLd 16.04.2026 Всем привет, недавно возникла потребность создать CRM, для личных нужд. Собственно программа предоставляет из себя базу данных клиентов, в которой можно фиксировать звонки, стадии сделки, а также. . .	Знаешь почему 90% людей редко бывают счастливыми? kumehtar 14.04.2026 Потому что они ждут. Ждут выходных, ждут отпуска, ждут удачного момента. . . а удачный момент так и не приходит.	Фиксация колонок в отчете СКД Maks 14.04.2026 Фиксация колонок в СКД отчета типа Таблица. Задача: зафиксировать три левых колонки в отчете. Процедура ПриКомпоновкеРезультата(ДокументРезультат, ДанныеРасшифровки, СтандартнаяОбработка) / / . . .

@Compaq 2 / 2 / 0 Регистрация: 14.02.2013 Сообщений: 218
	19.08.2013, 09:29 [ТС]
	Вот так ничего, вкратце, у меня калькулятор доставки, при выборе страны в БД выбирается категория, а уже по ней рассчитывается доставка, исходя из метода доставки и веса. 0

@Compaq 2 / 2 / 0 Регистрация: 14.02.2013 Сообщений: 218
	19.08.2013, 11:42 [ТС]
	Он почему-то открывает в странице новую страницу, как-бы делая наслоение, вместо вывода в необходимых id Добавлено через 57 минут Soldado, не подскажите как исправить ошибку, он открывает целое окно, вместо вывода информации 0

@sMockingbird 284 / 283 / 73 Регистрация: 06.05.2013 Сообщений: 1,613
	19.08.2013, 13:16
	Compaq, Вы это всё на сайте тестите или у себя на локалке где то? 0

@Zazu 24 / 24 / 8 Регистрация: 27.02.2012 Сообщений: 492
	20.08.2013, 12:54
	Compaq, тоесть у вас в data содержится информация, которую нужно разделить на 3 части, правильно я вас понял? 0

@Compaq 2 / 2 / 0 Регистрация: 14.02.2013 Сообщений: 218
	20.08.2013, 19:53 [ТС]
	Добрый день, да, совершенно верно. В блок 1 вставить одно значение, в блок 2 другое значение 0