Как отправить форму через сабмит, но перед сабмитом отправить пост запрос?

Question

[semki096]

Есть форма. При нажатии на которую я попадаю на страницу платежного сервиса. Но одновременно с сабмитом надо запустить очистку корзины. Я добавил к этой форме такой скрипт

$('#formid').on('submit', function(e) {
$.ajax({
  type: 'POST',
  url: 'url'
});
e.preventDefault();
    });

То есть перед сабмитом я отправляю пост запрос на страничку со скриптом который очищает корзину. В таком виде корзина очищается, но форма не сабмитится. Убираю e.preventDefault(); - теперь естественно форма сабмитится, но аякс запрос не чистит корзину. В чем моя ошибка?

Answer 1

[Михаил Шведков]

В подходе ошибка)
2 пути, быстрый и верный. Верный - чистить корзину при получении callback от платежного сервиса с сообщением об успешном платеже (ну вот нет у меня денег на вебмани, а я 276 позиций каталога набивал полтора часа. Да я скорее клаву об стол разобью, чем повторю процедуру при ошибке на стадии оплаты)
Быстрый - кидать пост по клику на кнопку, которая должна творить сабмит. Тут как раз надо будет preventDefault - чтоб не отправилось, $.post() - чтоб ушло и $("form").submit(); - ручками отправить форму

Comments

[Roman]

Если совсем правильно, то следует из всех товаров в корзине сформировать отдельную сущность "заказ" при оформлении и очищать корзину. Покупатель в ИМ оплачивает заказ, а не набор отдельных товаров, имхо.

[semki096]

думал сделать по ответу сервера, но у меня корзина в сессии, наверно надо айди сессии передавать итд, решил поискать проще метод.

[Михаил Шведков]

Роман: Ну так-то оно и есть - мы ничего не делаем с товарами отдельными, мы чистим ту самую сущность "корзина". Конечно, у "заказа" есть плюс - его можно хранить на сервере, скажем, в логах или для отслеживания состояния - не суть. Но это процесс, который можно запустить смежно - т.е. "заказ" мы создаем и пакуем на сервер, а "корзина" живет на клиенте до того момента, как с ней не сделают что-то - либо пока не оплатят, либо пока не очистят принудительно

[Михаил Шведков]

semki096: тем более стоит задуматься насчет хранения заказов на стороне сервера. Если чел готов заплатить за набор - сохраните его в БД, в случае чего проще будет вернуться. А если сохранение на сервере прошло хорошо - то у вас есть уже ИД заказа, который будет оплачивать клиент. Корзина к этому моменту вообще не нужна - можно смело обнулять сессию ДО отправки запроса к платежному серверу. С одной стороны - человек ничего не сможет сделать между нажатием на "оплатить" и переходом к оплате, а с другой - за это время создастся сущность "заказ", очистится "корзина" и в платежку пойдет уже не сессия, а ид из бд. Все надежнее как-то (знания не академические, но чую, это будет привлекательнее, чем предлагать оплату с ИД сессии, которая внезапно может прерваться)

Answer 2

[Roman]

Что-то типа такого можно сделать:

$('#formid').on('submit', function(e) {
var self = this;
if(!self.hasOwnProperty('xajaxsubmitted')){
e.preventDefault();
$.ajax({
  type: 'POST',
  url: 'url',
  success : function(){
    self.xajaxsubmitted = true;
    $(self).submit();
  }
  });
}
});

Comments

[semki096]

спасибо большое буду пробовать, а не подскажете логику в 2х словах, впервые с такими функциями столкнулся.

[Roman]

semki096: навешивается обработчик на submit. В хендлере проверяем наличие свойства у объекта формы. Если свойства "xajaxsubmitted" нет, то отменяем действие по-умолчанию и запускаем АДЖАКС-запрос. В коллбеке запроса присваиваем свойство объекту и вызываем обработчик снова. При этом действие по-умолчанию не будет отменено и форма сработает как и должна.

[semki096]

Роман: спасибо

Answer 3

[Максим Бабичев]

По моему корзину лучше хранить не на сервере, а на клиенте(например в куках). Проблема сразу же пропадет сама собой.

А вот мысль по текущей задаче:

e.preventDefault();
         return true; // добавить return, как подтверждение для отправки формы
    });

и в options $.ajax добавить async: false

Comments

[semki096]

корзина в сессии