
17.05.2017, 23:05
|
Новичок на форуме
|
|
Регистрация: 17.05.2017
Сообщений: 7
|
|
Ajax ответ разбить и разместить в нескольких местах сайта.
Привет товарищи! Помоги пожалуйста!
Стоит задача, второй день не могу решить. Посмотрел тонну информации, но ничего рабочего не нашел.
Задача: Сделать корзину на сайте, при нажатие + и - количества = менять цену за каждый товар и общую цену заказа.
Отправку делаю по нажатию на div c + и -:
<div id="price">2990</div>
<div id="price_zakaz">13200</div>
<div id="quantity">1</div>
<div onclick="SendPlus();">+</div>
<div onclick="SendMinus();">-</div>
Дальше сам ajax, где передаю в переменную quantity текущее количество товара, ну и цену товара:
function SendPlus(){
var quantity = document.getElementById("quantity").innerHTML;
var price= document.getElementById("price").innerHTML;
var price_zakaz= document.getElementById("price_zakaz").innerHTML;
$.ajax({
type: "POST",
url: "cartaction.php?quantity-plus",
data: ({quantity : quantity, price: price, price_zakaz: price_zakaz}),
success: function(response){
$('#quantity').html(response);
}
});
};
...
function SendMinus(){
...
в cartaction.php:
if (isset($_GET["quantity-plus"])) {
$summ = $_POST["quantity-plus"]+1;
if ($summ < 1) {$summ = 1;};
echo $summ;
}
В таком виде меняется количество все отлично. Но мне нужно сделать чтоб так же менялась сумма за несколько товаров и конечная стоимость заказа.
Как мне разбить ответ от ajax на несколько полей на сайте? К сожалению в javascript совсем не силен.
Мои предположения как можно сделать:
1.
- Передать строку такого вида echo "$summ,$price,$price_zakaz"; С целью разбить ее потом ","
- В ответе ajax сделать что-то подобное:
...
success: function(data){
data = data.split(',');
$('#quantity').html(data[0]);
$('#price').html(data[1]);
$('#price_zakaz').html(data[1]);
}
Но этот вариант почему-то не работает. Что можно сделать? Как правильно разбить строку и передать по ID div правильно?
Пробовал еще как-то так:
var myString = "coming,apart,at,the,commas";
var substringArray = myString.split(","); // ["coming", "apart", "at", "the", "commas"]
Но тоже не получалось.
Читал много про JSON, но тоже не получилось найти толкового примера как это должно работать в моем случае. Да и вариант выше мне кажется почти правильным.
Помогите, пожалуйста. Уже сил нет.
|
|

17.05.2017, 23:45
|
Профессор
|
|
Регистрация: 04.12.2012
Сообщений: 3,807
|
|
Что возвращает сервер?
Если это все, что сервер возвращает, то о разбиении каких данных идет речь?
if (isset($_GET["quantity-plus"])) {
$summ = $_POST["quantity-plus"]+1;
if ($summ < 1) {$summ = 1;};
echo $summ;
}
С JSON работать не сложно.
К примеру:
callback.php
$response=array();
if(isset($_GET['return_json'])){
$response=array('result'=>'success','message'=>'All right');//Массив, который будет отдан клиенту
echo json_encode($response);
exit;
};
index.js
$(function(){
//Отправляю запрос на callback.php
$.post('/callback.php?return_json=1',{},function(res){
try{
if(typeof res=='string') res=JSON.parse(res);
//В этой строке res - тот самый массив, который отдал сервер
if(res.result=='success')
alert(res.message);
else
throw new Error('Unexpected response');
} catch(e){
console.error(e);
}
});
});
|
|

18.05.2017, 00:31
|
Новичок на форуме
|
|
Регистрация: 17.05.2017
Сообщений: 7
|
|
Сообщение от Nexus
|
Что возвращает сервер?
Если это все, что сервер возвращает, то о разбиении каких данных идет речь?
if (isset($_GET["quantity-plus"])) {
$summ = $_POST["quantity-plus"]+1;
if ($summ < 1) {$summ = 1;};
echo $summ;
}
|
Возвращает он "количество,цену,цену заказа" (quantity,price,price_zakaz )
$price= $_POST["price"];
$price_zakaz = $_POST["price_zakaz "];
$quantity = $_POST["quantity "];
... // действия с переменными
echo "$quantity,$price,$price_zakaz"; // К примеру так
То есть на сервере сделаю необходимое с переменными и дальше должен передать обратно клиенту 3 значения в переменных, которые потом необходимо вставить в div блоки по id блока. Но как это сделать, пока ума не приложу. Простая задача на плохо знакомом языке ставит в тупик)
Сейчас мне кажется что все же проще разбить строку от сервера на части с помощью split(",") и распихать по div'ам.
Но допустим я сейчас разберусь как передать переменные с JSON клиенту. Как я понимаю JSON это своего рода массив данных.
Можете мне подсказать как будет выглядеть success: в ajax. Как вытащить переменные и распихать по div блокам.
Последний раз редактировалось AVAV84, 18.05.2017 в 00:34.
|
|

18.05.2017, 02:12
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,989
|
|
Сообщение от AVAV84
|
Дальше сам ajax, где передаю в переменную quantity текущее количество товара, ну и цену товара
|
А с каких пор цену товара задает клиент?
|
|

18.05.2017, 02:51
|
Новичок на форуме
|
|
Регистрация: 17.05.2017
Сообщений: 7
|
|
Сообщение от laimas
|
А с каких пор цену товара задает клиент?
|
Немного не суть, но при клике покупателя (к примеру на +) меняется количество товара - Соответственно меняются некоторые показатели на странице - "Стоимость только одного товара" по количеству, "Стоимость всего заказа" и тд. Например:
Часы цена 1000р. - 3 + 3000 р.
Плойка цена 300р. - 2 + 600 р.
Общая сумма заказа 3 600 р.
Вот. Получается что покупатель нажимает + и мне нужно подставить новые значения в блоки. Я понимаю, что это возможно покажется немного раком, но хочу именно такое решение. Товары будут разные и было бы круто написать один раз обработку на стороне сервера.
Чтоб можно было управлять скидкой, подстраиваться под разные акции (например каждый второй товар со скидкой и тд.), записывать в базу некоторые значения ну и другие ништяки.
Так что в идеале понять как через ajax загонять любые значения со страницы и принимать их обратно в неограниченном количестве ) За этим к вам и пришел, как у гуру своего дела)
|
|

18.05.2017, 02:56
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,989
|
|
Сообщение от AVAV84
|
Немного не суть
|
Ну нифига себе не суть. А можете ответить такие вопросы:
1) если корзину хранит сервер, что следует из кода, то каким образом сервер может догадаться каким именно товаром нужно оперировать, если передается количество, нечто plus, и цена?
2) если цену товара определяет клиент, можете ли вы по аналогии с этим совершить покупку в реальном магазине, сообщив на кассе о покупке коллекционного коньяка, определив самостоятельно цену его в 3 рубля?
|
|

18.05.2017, 03:30
|
Новичок на форуме
|
|
Регистрация: 17.05.2017
Сообщений: 7
|
|
Сообщение от laimas
|
Ну нифига себе не суть. А можете ответить такие вопросы:
1) если корзину хранит сервер, что следует из кода, то каким образом сервер может догадаться каким именно товаром нужно оперировать, если передается количество, нечто plus, и цена?
2) если цену товара определяет клиент, можете ли вы по аналогии с этим совершить покупку в реальном магазине, сообщив на кассе о покупке коллекционного коньяка, определив самостоятельно цену его в 3 рубля?
|
Каким именно товаром оперировать, какая у него цена, скидка и тд сервер узнает по id товара, которое тоже передается на сервер по нажатию кнопки. Это уже все отлично работает. Количество переключается по +/-. На сервере все уже считается как надо.
Застопорился только как вывести остальные переменные и повставлять их в разные части сайта. Вы в этом может помочь? )
|
|

18.05.2017, 03:40
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,989
|
|
Сообщение от AVAV84
|
Каким именно товаром оперировать, какая у него цена, скидка и тд сервер узнает по id товара, которое тоже передается на сервер
|
Вот именно - id товара и его количество, это единственно что необходимо передавать серверу, цена же это полный абсурд. Но тогда почему вы в коде это передаете?
Но у вас копки определяют режим операции - добавление/удаление, то есть по одному. Следовательно серверу передается не количество товара, а знак определяющий операцию. Исходя из этого на клиенте не должно быть две функции SendPlus() и SendMinus(), должен быть единый обработчик для этих кнопок, который отправляет серверу идентификатор товара и либо 1, либо -1. Это все что требуется.
Возвращать же сервер должен JSON, если расширенная корзина, это выгоднее для клиента. Если же возврат, это общее количество товара и общая цена, можно и строковое значение.
|
|

18.05.2017, 04:30
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,989
|
|
AVAV84, если на сервере единый обработчик состояния корзины (краткого и расширенного представления), то выгоднее всегда возвращать JSON.
Пусть сервер хранит корзину таким образом:
$basket = [
10 => ['quantity' => 2, 'price' => 200],
20 => ['quantity' => 5, 'price' => 150],
30 => ['quantity' => 3, 'price' => 300]
];
if(array_key_exists($_POST['id'], $basket)) {
$basket[$_POST['id']]['quantity'] += (int)$_POST['mode'];
exit(json_encode(['quantity' => array_sum(array_column($basket, 'quantity')),
'total' => array_sum(array_map('array_product', $basket))]
)
);
}
На клиенте элементы с идентификаторами quantity и total отображают количество товара в корзине и их сумму соответственно.
Все кнопки добавления/уменьшения товара имеют имя класса mode, режим операции в атрибутах data-mode: 1 и -1 соответственно, и единый обработчик. Тогда:
$('div.mode').click(function() {
$.ajax({
....,
dataType: 'json',
data: {id: получить в чем-то хранящийся id товара, mode: $(this).data('mode')},
success: function(response) {
$.each(response, function(k, v) {
$('#'+k).text(v)
})
}
})
})
То есть, таким образом клиент может одним обработчиком управлять отображением как краткого так и полного представления корзины.
PS. Пример РНР для версии не ниже 5.5.
|
|

18.05.2017, 11:29
|
Новичок на форуме
|
|
Регистрация: 17.05.2017
Сообщений: 7
|
|
Сообщение от laimas
|
Вот именно - id товара и его количество, это единственно что необходимо передавать серверу, цена же это полный абсурд. Но тогда почему вы в коде это передаете?
|
Справедливое замечание! Учту, сегодня постараюсь переделать.
С success до конца не понял, ну попробую сегодня что-то сделать. Отпишусь о результатах.
Низейший поклон, друзья.
|
|
|
|