Оформить скрипт
Здравствуйте.Написал скрипт, спасибо за помощь 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);
}
})
});
Может можно повторения как то систематизировать, что ли? |
Слишком много одинаковых HTTP запросов на сервер. Почему результаты не кэшируются?
|
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" легко пишется одна универсальная функция запроса. |
Dilettante_Pro,OK, спасибо.Буду разбираться.
Цитата:
|
Цитата:
Выбрал в селекте значение A => запрос к серверу Выбрал в селекте значение B => запрос к серверу Выбрал в селекте опять значение A => опять запрос к серверу? Зачем последняя операция, если был выбор на первом шаге и её можно в каком-нибудь буфере сохранить и отдавать клиенту? |
Решил кешировать первый запрос. Переписал ф-цию так
$(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);
}
})
}
});
});
Но что то не хочет кешировать, что нужно поправить? |
Цитата:
Идея такая: Пусть на этапе инициализации cache = []. Считали значение из select[name="mark"] (например, номер опции). Номер есть в массиве cache? Достали по номеру инфу записали в #brn. Иначе выполнили HTTP запрос и в функции обратного вызова success записали инфу по номеру в массив и в #brn. И вот таким образом создается разреженный массив, который позволяет уменьшить нагрузку на сервер, да и клиенту не придется ждать, пока придет ответ с сервера, если он есть в кэше. А если есть желание, лучше юзать фичи Set/Map в ES6. Скажем в Set номера опций, а в Map - отображение их в данные. |
ОК, понял, сенкс.
|
Сделал так
$('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])
}
})
}
});
Но не кеширует. |
потому что массив cache всегда пустой. Да и 15 строчка весьма странная, учитывая что в js нет ассоциативных массивов.
|
Блин, не выходит.Как не изголяюсь , либо ошибка, либо не кешерует.
$(function() {
var cache =[];
var url = "/modules/mod_search_auto/ajax.php";
$('select[name="mark"]').change(function() {
var m_id = this.name + '=' + this.value;
if(cache=[data]){$('#brn').html(cache);}
else{
$.ajax({
type:"POST",
url:url,
data: m_id,
success:function(data){
cache = [data];
$('#brn').html(cache);
// }
}
})
}
});
})
|
так и не смог добиться кеширования. Может кто подскажет почему.Последний вариант такой.
var cache=[];
$(function(data) {
var url = "/modules/mod_search_auto/ajax.php";
var cacheData = cache[data];
$('select[name="mark"]').change(function() {
// var cacheData = cache[data]; пробовал и сюда ставить
var mid = this.name + '=' + this.value;
if(cacheData){
$('#brn').html(cacheData);
}else{
$.ajax({
type:"POST",
url:url,
data: mid,
success:function(data){
$('#brn').html(data);
cache[data] = data;
}
})
}
})
})
|
Вернемся к варианту пост#9 (потому что последний - действительно... последний)
Цитата:
Потом, мне кажется, вы запутались с переменными data: data в строках 3 - 12 и в строках 13-16 - это разные переменные, Первая - это значение, которое вы берете из html и передаете в запросе на сервер. (но не проверяли кеш на ее наличие и не запомнили в кеш ). Вторая - определяется в строке 13 как параметр функции и представляет ответ сервера (что там - я, например, не знаю). Поэтому строка 15 cache[data] = data; - что это значит? Эту переменную, во избежание путаницы, лучше обозвать по-другому. С учетом вышеизложенного можете попробовать снова. В разных ваших вариантах есть отдельные правильные мысли, но они перемешаны с ошибками |
ureech,
(function(){
var cache ={};
$('select[name="mark"]').change(function() {
var data0 = this.name + '=' + this.value;
if(cache[data0]){
$('#brn').html(cache[data0]);
} else {
$.ajax({
type:"POST",
url:"/modules/mod_search_auto/ajax.php",
dataType:"html",
data: data0,
success: function(response) {
$('#brn').html(response);
cache[data0] = response;
// alert(cache[data0])
}
});
}
});
})();
|
Ни хрена не хочет, по разному пробовал и как Alex_63, написал тоже. Может где запрет на кеширование, в заголовках ответа
Cache-control:no-cache... Pragma:"no-cache" Это результат или причина? |
Цитата:
<option id='Vulcan' value='1002' >Vulcan</option><option id='Rapide S' value='1002' >Rapide S</option> |
Цитата:
Cache-control:no-cache... Pragma:"no-cache" здесь совершенно ни при чем - ваш кеш - совсем не кеш, а просто переменная типа массив. Вариант Alex_63 почти правильный, он устранил все ошибки, за исключением одной:
var data0 = this.name + '=' + this.value;
if(cache[data0]){
Индекс массива - это целое число, начиная с 0. В качестве индекса вам нужно использовать целые числа, однозначно связанные с парой this.name this.value. Пример реализации такой индексации пар this.name this.value
<head>
<title>Untitled Page</title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
window.onload = function () {
$('select').change(function () {
alert($(this).data("ind") + $(this)[0].selectedIndex);
});
}
</script>
<body>
mark
<select data-ind="100" name="mark">
<option >Выберите вариант</option>
<option value="11">первый</option>
<option value="22">второй</option>
<option value="33">третий</option>
<option value="44">четвертый</option>
</select>
<br />
brend
<select data-ind="200" name="brend">
<option >Выберите вариант</option>
<option value="11">первый</option>
<option value="22">второй</option>
<option value="33">третий</option>
<option value="44">четвертый</option>
</select>
</body>
</html>
|
Блин,слва Богу и Dilettante_Pro, добил, эти массивы.
$(function() {
var url = "/modules/mod_search_auto/ajax.php";
var cache ={};
$('select[name="mark"]').change(function() {
var data = this.name + '=' + this.value;
var index = this.options.selectedIndex;
if(cache[index]){
$('#brn').html(cache[index]);
}else{
$.ajax({
type:"POST",
url:url,
data: data,
success:function(response){
$('#brn').html(response);
cache[index] = response;
}
})
}
})
Всем спасибо :) |
ureech,
В таком варианте var index = this.options.selectedIndex; нужен отдельный кеш для каждого селекта а в варианте из пост№17 var index = $(this).data("ind") + $(this)[0].selectedIndex - один кеш для всех |
Понял, поправлю.
|
ureech,
(function(){
var cache ={};
$('select[name="mark"]').change(function() {
var data0 = this.name + '=' + this.selectedIndex.value;
if(cache[data0]){
$('#brn').html(cache[data0]);
} else {
$.ajax({
type:"POST",
url:"/modules/mod_search_auto/ajax.php",
dataType:"html",
data: data0,
success: function(response) {
$('#brn').html(response);
cache[data0] = response;
// alert(cache[data0])
}
});
}
});
})();
|
Alex_63,
Спасибо, за желание помочь, но твой вариант не работает, у меня по крайней мере.:) |
| Часовой пояс GMT +3, время: 06:58. |