HTML5 History + Ajax + Формы?

Question

[Lumore]

Есть проект, относится к недвижимости, на странице поиска работает принцип:

var $buyMethod = $('#search__buy-method').val();
var $category = $('#search__buy-category').val();
var $cityId = $('#search__city').val();
var $square = $('#search__square').val();
var $squareType = $('#search__square-type').val();

history.replaceState({},'','/search?city='+$cityId+'&buy-method='+$buyMethod+'&category='+$category+'&square='+$square+'&square-type='+$squareType);

Значения берутся с hidden input'ов. Сделал, работает. Но мне нужно как-то автоматизировать этот процесс, т.к. сюда добавляется кол-во этажей/комнат в зависимости от типа(дом/квартира), а выглядит это так:

<div class="search__checkbox-label">Комнат</div>
    <div class="search__checkbox-items">
    <div class="search__checkbox-item" data-rooms="1">Одна</div>
    <div class="search__checkbox-item" data-rooms="2">Две</div>
    <div class="search__checkbox-item" data-rooms="3">Три</div>
    <div class="search__checkbox-item" data-rooms="4+">Четыре и более</div>
</div>

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

Answer 1

[Константин Б.]

<script>
		$(function () {

			$('form').submit(function( event ) {
			  
			    var data =  $(this).serialize().replace(/[^&]+=&/g, '').replace(/&[^&]+=$/g, '');

			    $.ajax({
			    	type: 'GET',
	        		url: '/search'+data,
	        		data: data,
	          		success: function(output, status, xhr) {
	            		
						
						history.pushState({foo: 'bar'}, 'title', '/search'+data);
					
	          		},

	          		error: function (xhr, ajaxOptions, thrownError) {
	            		alert(xhr.status + thrownError);
          			}
	        	});

	        	return false;

			});
		});
	</script>

Еще можно использовать ответ сервера

history.pushState({foo: 'bar'}, 'title',  this.url);

Comments

[Lumore]

Большое спасибо