Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Оформить скрипт (https://javascript.ru/forum/dom-window/62171-oformit-skript.html)

ureech 28.03.2016 08:59

Оформить скрипт
 
Здравствуйте.Написал скрипт, спасибо за помощь laimas, можно как то по другому его "оформить", а то как то не красиво. Скрипт состоит из нескольких запросов.Вот два для примера
$('select[name="brend"]').change(function() {
         var data = this.name + '=' + this.value;
          var index = this.options.selectedIndex;
            var id = this.options[index].text;
    sessionStorage.setItem('type_title', id); 
         $.ajax({
              type:"POST",
              url:"/modules/mod_search_auto/ajax.php",
             data: data,
             success:function(data){                            
                $('#bod').html(data);		
              }
         })

    });


$('select[name="mark"]').change(function() {
         var data = this.name + '=' + this.value;	
          var index = this.options.selectedIndex;
            var id = this.options[index].text;
    sessionStorage.setItem('model_title', id);	
		 
         $.ajax({
              type:"POST",
              url:"/modules/mod_search_auto/ajax.php",
             data: data,
             success:function(data){                            
                $('#brn').html(data);
               			
              }
         })

    });

Может можно повторения как то систематизировать, что ли?

destus 28.03.2016 09:36

Слишком много одинаковых HTTP запросов на сервер. Почему результаты не кэшируются?

Dilettante_Pro 28.03.2016 10:30

ureech,

В select`ы добавить класс и атрибуты data- (http://htmlbook.ru/blog/atribut-data)
(можно и без класса, только атрибуты data-, в т.ч. и общий для группы селектов вместо класса)
В этих атрибутах задавать имя хранимого параметра, id размещения результата и т.п., например:
<select data-class="group" data-name="type_title" data-resid="#bod">


При таких атрибутах для всех селектов с data-class="group" легко пишется одна универсальная функция запроса.

ureech 28.03.2016 11:49

Dilettante_Pro,OK, спасибо.Буду разбираться.

Цитата:

Сообщение от destus
Слишком много одинаковых HTTP запросов на сервер. Почему результаты не кэшируются?

Только адрес одинаковый, но там разные параметры передаются и обрабтываются по разному.

destus 28.03.2016 11:55

Цитата:

Только адрес одинаковый, но там разные параметры передаются и обрабтываются по разному.
Вы меня не поняли. Допустим у вас в селекте 200 значений. В вашем случае при каждом изменении селекта будет запрос к серверу.

Выбрал в селекте значение A => запрос к серверу
Выбрал в селекте значение B => запрос к серверу
Выбрал в селекте опять значение A => опять запрос к серверу?

Зачем последняя операция, если был выбор на первом шаге и её можно в каком-нибудь буфере сохранить и отдавать клиенту?

ureech 28.03.2016 19:50

Решил кешировать первый запрос. Переписал ф-цию так

$(function() {
	var cache
     callback = function (data) {
     $('#brn').html(data);
                               };
        $('select[name="mark"]').change(function() {
         var data = this.name + '=' + this.value;
           if (cache) { 
         callback(cache); 
                      } else {
         $.ajax({
              type:"POST",
              url:"/modules/mod_search_auto/ajax.php",
			  dataType:"html",
             data: data,
			 cache:true,
         success: function(data) {
          cache = data; 
          callback(cache); 
        }

         })
	}
    });
 });

Но что то не хочет кешировать, что нужно поправить?

destus 28.03.2016 20:12

Цитата:

что нужно поправить?
Да много всего. Почему переменная callback создается в глобальном пространстве? Зачем строка 16?

Идея такая: Пусть на этапе инициализации cache = []. Считали значение из select[name="mark"] (например, номер опции).
Номер есть в массиве cache? Достали по номеру инфу записали в #brn. Иначе выполнили HTTP запрос и в функции обратного вызова success записали инфу по номеру в массив и в #brn.

И вот таким образом создается разреженный массив, который позволяет уменьшить нагрузку на сервер, да и клиенту не придется ждать, пока придет ответ с сервера, если он есть в кэше. А если есть желание, лучше юзать фичи Set/Map в ES6. Скажем в Set номера опций, а в Map - отображение их в данные.

ureech 28.03.2016 20:44

ОК, понял, сенкс.

ureech 28.03.2016 21:55

Сделал так
$('select[name="mark"]').change(function() {
			var cache =[];
         var data = this.name + '=' + this.value;
		 if(cache[data]){
		 $('#brn').html(cache[data]);
		 //alert('11111111')
                      } else {
         $.ajax({
              type:"POST",
              url:"/modules/mod_search_auto/ajax.php",
			  dataType:"html",
             data: data,
         success: function(data) {
		 $('#brn').html(data);
          cache[data] = data;
		 // alert(cache[data])
           }
         })
	   }		 
    });

Но не кеширует.

destus 28.03.2016 22:27

потому что массив cache всегда пустой. Да и 15 строчка весьма странная, учитывая что в js нет ассоциативных массивов.


Часовой пояс GMT +3, время: 22:24.