Отправка 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 другое значение

Новые блоги и статьи Все статьи Все блоги /
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 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .	Ломающие изменения в C#.NStar Alpha Etyuhibosecyu 20.11.2025 Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .	Мысли в слух kumehtar 18.11.2025 Кстати, совсем недавно имел разговор на тему медитаций с людьми. И обнаружил, что они вообще не понимают что такое медитация и зачем она нужна. Самые базовые вещи. Для них это - когда просто люди. . .

@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