在您的ajax
通话中,您只是发送字符串"{userValuesChanged}"
。
如果要发送新值,请在对象中指定这些值:
$("#slider").bind("userValuesChanged", function (e, data) {
$.ajax({
type: "GET",
dataType: "json",
url: "test.php",
data: { minValue: data.values.min },
async: false,
success: function (data) {
alert(data);
return true;
}
});
});
上面的关键位是:
data: { minValue: data.values.min },
...它创建了一个对象,该对象具有一个名为的属性,该属性minValue
设置为data.values.min
您从滚动条接收到的值。您的服务器端脚本将查找名为minValue
. (当然,如果您还想要来自 的其他值data.values
,也可以包含它们。)
但是,每次滑块更改时都这样做可能有点多。如果userValuesChanged
事件只触发一次,当值停止变化时,上面的绝对没问题。如果它在用户移动滚动条时不断触发,那就不好了,因为你会触发很多ajax
调用。
如果是这种情况(当用户更改值时它会重复触发),请查看当用户停止更改时它是否提供不同的事件。
如果没有,您可以改为限制速率。如有必要,请执行以下操作:
$("#slider").bind("userValuesChanged", function (e, data) {
saveNewValues(data.values.min);
});
var pendingSaveTimer = 0;
function saveNewValues(minValue) {
// cancel any previous save we have pending
clearTimeout(pendingSaveTimer);
pendingSaveTimer = 0;
// Schedule saving the new value in half a second
pendingTimer = setTimeout(function() {
// Clear our timer var
pendingTimer = 0;
// Do it
$.ajax({
type: "GET",
dataType: "json",
url: "test.php",
data: { minValue: minValue },
async: false,
success: function (data) {
// Do something here if needed
}
});
}, 500); // 500 = 500 milliseconds = half a second
}
在保存值之前等待半秒,如果在半秒内有新值进入,则取消保存。