Как работает наш сайт...

Наша общая задача такова : есть контент , который грузится сразу с сервера (по GET , POST) и есть подгружаемый впоследствии динамический контент (через js ajax). Делается это для того , чтобы сайт быстрее показывал морду и пользователь мог уже видеть и планировать действия с сайтом.

Традиционно , когда не было js использовали формы для управления сайтом. Правильным стилем считается оставить такую технологию как основу и над ней (если поддерживается js) строить управление сайтом через js. То есть пользователь в идеале не должен заметить разницы работает он без или с js.

Сначала сделаем форму для отправки на чистом на html (то есть без js ). Потом надо добавить вариант динамического варианта отправки этой же формы через ajax .

Если браузер клиента не поддерживает js (такое бывает) , то форма нормально будет функционировать через (html GET), а если js работает , то должен работать механизм динамической подгрузки содержания страницы (ajax) и поведение страницы должно быть одинаковым в любом случае.

Различие в поведении с кнопками submit

Проблема в том, что на чистом html кнопки submit добавляются в параметры вызываемой GET строки . Более того если есть несколько кнопок submit с разными value , то добавляется только та кнопка , по которой щелкнули (другие не добавляются). И это нормально , это нас вполне устраивает.

При ajax запросе мы обычно предварительно получаем от формы #mainfilterForm все выбранные параметры в объект _formData :

<_formData=new FormData($('#mainfilterForm')[0]);

, чтобы получить все установленные в форме выборы.
Но ситуация такова , что элементы формы с типом submit не добавляются в _formData. При использовании serialize для формы ситуация аналогичная.

Если использовать подход как ниже , то элементы с одинаковыми name при serialize будут добавляться столько раз сколько таких элементов и это точно не есть гут.




Поэтому придется добавлять к ajax запросу значения кнопок submit программно , отслеживая click кнопки (событие логично будет до вызова form submit).

Для восстановления состояния предыдущей страницы по кнопке назад используем технологию history.state . Поддерживается вроде всеми браузерами.