Ссылка на страницу с заполненными полями формы?

Question

[Евгений Ромашкан]

Добрый день!
Есть форма для поиска с кучей полей. При submit`е происходит ajax запрос на сервер за данными.

Необходимо реализовать возможность создания ссылки на эту страницу, чтобы человек перешедший по ссылке увидел те же результаты поиска и таким же образом заполненную форму. Самым логичным вариантом мне кажется с помощью JS прописывать заполненные поля в виде параметров в URL.
Может есть какие-то готовые решения?

Comments

[Сергей Соколов]

у вас пока не SPA? Какие-то JS фреймворки/библиотеки уже используются?

Хотя вопрос вроде бы простой, решеним тут будет React/Angular/Vue приложение с рендерингом на стороне сервера - когда запрашивают страницу с параметрами формы, с сервера сразу возвращать отрендеренную страницу результатов.

А в общем надо сериализовать форму и записывать её в URL как hash или GET-параметры. При наличии таких параметров в запросе, отдавать заполненную форму с результатами поиска (из кэша, если повезёт). Костыльно – после загрузки страницы с пустой формой смотреть, есть ли параметры, и тогда выполнять ajax-запрос.

[Евгений Ромашкан]

Сергей Соколов, лапшекод на jQuery. Подключать фреймворки не могу. Видимо придётся делать сериализацию.

[Сергей Соколов]

Евгений Ромашкан, в форме только текстовые поля или есть и другие контролы?

[Евгений Ромашкан]

Сергей Соколов, Текстовые, чекбоксы и мультиселекты

Answer 1

[Евгений Ромашкан]

UPD от автора вопроса:
Проблему решил так:
По клику на кнопку берутся все параметры формы и пихаются в url в виде GET запроса, сервер теперь может принимать как GET, так и POST параметры. Таким образом URl можно с покойно копировать и переходить по нему с другой машины.
При переходе по ссылке происходит валидация формы на сервере, и клиенту отдаётся HTML-ка с уже заполненной формой.

Answer 2

[shmatuan]

Ссылка вида ?param1=test1&param2=test2&param3=test3

https://stackoverflow.com/questions/5448545/how-to...

function getSearchParameters() {
      var prmstr = window.location.search.substr(1);
      return prmstr != null && prmstr != "" ? transformToAssocArray(prmstr) : {};
}

function transformToAssocArray( prmstr ) {
    var params = {};
    var prmarr = prmstr.split("&");
    for ( var i = 0; i < prmarr.length; i++) {
        var tmparr = prmarr[i].split("=");
        params[tmparr[0]] = tmparr[1];
    }
    return params;
}

var params = getSearchParameters();

Comments

[Евгений Ромашкан]

В URL нет параметров. Если только скриптом их туда пихать из формы. А потом парсить и вставлять в форму.

[shmatuan]

Евгений Ромашкан,

Если только скриптом их туда пихать из формы. А потом парсить и вставлять в форму

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

Как пример
ek.ua/ek-list.php?katalog_=239&minPrice_=500&maxPr...

[Emil Revencu]

если форма и результат поиска на одной странице: зачем делать через AJAX?
Делайте на форме POST или GET запрос на саму же страницу и заполняйте форму с данными из запроса

[Евгений Ромашкан]

Emil Revencu, Да, спасибо, так в итоге сделал. Получение результатов Аяксом оставил, но добавил серверу возможность заполнять форму поиска из GET-параметров, помимо POST..

Answer 3

[Денис И.]

мне кажется вы не верно ставите задачу.
и второе - какие у вас технологии?
и какой ajax вы делаете (перенаправление на новую страницу или какой аналог rest-запроса который отдает увам json)?(подозреваю что первое)

далее - вам нужно ссылку реализовать, или что бы форма содержащая результаты поиска содержала форму поиска заполненную параметрами поиска ?

если второе, то генерируйте на сервере части html напрямую из параметров поискового запроса.

готовые решения? простите, но с вашим уровнем понимания технологии вам пока лучше не лезть в "готовые решения", потому что не разберетесь.

Comments

[Евгений Ромашкан]

Через Ajax идет обращение к API, которое возвращает результаты поиска в JSON.
На стороне клиента происходит парсинг JSON и формирование таблицы.