php - 使用ajax获取javascript变量

Question

我正在尝试使用ajax获取一个javascript变量(并最终将其传递给php)。我已经尝试了几件事。我试图在用户更改 Jquery 范围 slider 后立即获取它的值(以便稍后保存值)。这是 JavaScript:

$("#slider").bind("userValuesChanged", function(e, data){
  console.log( + data.values.min );
});

一旦我更改最小 slider ，日志就会输出正确的值。现在我尝试使用 ajax 获取此 userValuesChanged:

  $.ajax({
   type: "GET",
   dataType: "json",
   url: "test.php",
   data: "{userValuesChanged}",
   async: false,
   success: function(data){
     alert(data);
     return true;
   }
 });

由于这是我第一次使用 ajax，所以这不起作用。我不确定如何在数据标记处写入正确的值。如何获取userValuesChanged？或者具体的 + data.values.minv 值？

Answer 1

在 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 中的其他值，您也可以包含它们。)

<小时/>

不过，每次 slider 更改时都这样做可能有点多。如果 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
}

在保存值之前会等待半秒，如果在半秒内出现新值，则会取消保存。