我的HTML文件中有以下内容：
except
变量<div class="panel-body panel-refine">
<span id="price-left" class="price-left pull-left" data-currency="€">500</span>
<span id="price-right" class="price-right pull-right" data-currency="€">5000</span>
<div class="clearfix"></div>
和＆＃39;价格权利＆＃39;来自JavaScript滑块。
price-left我喜欢传递＆＃34; laagsteprijs＆＃34;和＆＃34; hoogsteprijs＆＃34;到我在HTML文件中调用的search.php文件，其中包含以下内容：
$(document).ready(function(){
var slider2 = document.getElementById('sliderRefine');
noUiSlider.create(slider2, {
start: [2000, 3000],
connect: true,
range: {
'min': [30],
'max': [5000]
}
});
var limitFieldMin = document.getElementById('price-left');
var limitFieldMax = document.getElementById('price-right');
var xhr;
slider2.noUiSlider.on('update', function( values, handle ){
if (handle){
limitFieldMax.innerHTML= $('#price-right').data('currency') + Math.round(values[handle]);
document.getElementById("hoogsteprijs").innerHTML = Math.round(values[handle]);
} else {
limitFieldMin.innerHTML= $('#price-left').data('currency') + Math.round(values[handle]);
document.getElementById("laagsteprijs").innerHTML = Math.round(values[handle]);
}
// Abort the previous asynchronous ajax call in case it hasn't finished loading
if(xhr && xhr.readyState != 4){
xhr.abort();
}
xhr = $.ajax({
url: 'search.php',
type: 'GET',
data:{
minPrice: document.getElementById("laagsteprijs").innerHTML,
maxPrice: document.getElementById("hoogsteprijs").innerHTML
},
success:function(response){
// do something with response from search.php
}
});
});
});
答案 0 :(得分：0)
使用jQuery $ .ajax函数将数据传递到search.php脚本以获取每个滑块更新：
var xhr;
slider2.noUiSlider.on('update', function( values, handle ){
if (handle){
limitFieldMax.innerHTML= $('#price-right').data('currency') + Math.round(values[handle]);
document.getElementById("hoogsteprijs").innerHTML = Math.round(values[handle]);
} else {
limitFieldMin.innerHTML= $('#price-left').data('currency') + Math.round(values[handle]);
document.getElementById("laagsteprijs").innerHTML = Math.round(values[handle]);
}
// Abort the previous asynchronous ajax call in case it hasn't finished loading
if(xhr && xhr.readyState != 4){
xhr.abort();
}
xhr = $.ajax({
url: 'search.php',
type: 'GET',
data:{
minPrice: document.getElementById("laagsteprijs").innerHTML,
maxPrice: document.getElementById("hoogsteprijs").innerHTML
},
success:function(response){
// do something with response from search.php
}
});
});