在PHP代码中动态使用jquery变量

Question

我有这个jQuery脚本。 这是一个范围滑块，可创建介于1到25之间的值。

JavaScript代码

<script>
$( function() {
$( "#slider-range-max" ).slider({
    range: "max",
    min: 1,
    max: 25,
    value: 1,
    slide: function(event, ui) {
        $("#amount").val(ui.value);
    }
   });
   $( "#amount" ).val( $("#slider-range-max").slider("value") );
 });
</script>

HTML代码

 <input type="text" id="amount" readonly style="border:0; color:#f6931f; 
 font-weight:bold;">

 <div id="slider-range-max"></div>

现在，我需要在以下php脚本中动态地获取当前值（当前选择）。 当滑块值更改时，php脚本内的链接需要动态更改。

PHP代码的一部分

<?php

$str = file_get_contents('https://example.de/?id=DYNAMIC SLIDER VALUE');
.....

 ?>

这怎么可能？ 谢谢您的帮助。

Answer 1

浏览器中的动态行为不会直接在服务器上创建动态结果。 为此，您必须将滑块的值发送到服务器。 执行此操作的机制是AJAX。 因此，在滑块的事件处理程序中，您可以将当前值发送到服务器，如下所示：

slide: function(event, ui) {
  fetch("/url/to/your/php/script.php", {
    body: JSON.stringify({value: ui.value}), 
    headers: {
      'content-type': 'application/json'
    },
    method: 'POST'
  });
}

届时，您的PHP脚本将需要使用该值来修改URL，以用滑块中的值替换DYNAMIC SLIDER VALUE 。

请注意，在执行此操作时应采取预防措施，因为这将影响服务器。 您应该限制请求以避免这种情况。 您可以研究Underscore的节流方法。

Answer 2

好的。 要使PHP中的内容进入HTML网页而不进行重新加载，您将需要Ajax。 Ajax允许您向PHP文件发送数据（例如滑块值），并将结果检索回Javascript变量。 之后，您只需使用该变量即可将内容放置在HTML网页上的任何位置。

首先是Javascript：

<script>
$( function() {
    $( "#slider-range-max" ).slider({
        range: "max",
        min: 1,
        max: 25,
        value: 1,
        slide: function(event, ui) {
            $("#amount").val(ui.value);
            /* Here we send the slider value towards PHP */
            $.ajax({
                method: "POST",
                url: "your_php_file.php",
                data: { sliderVal: ui.value }
            })
            /* Here we receive the data back */
            .done(function(data) {
                /* Here you can do whatever you want with the data */
                $("#content").html(data);
            });
        }
    });
    $( "#amount" ).val( $("#slider-range-max").slider("value") );
});
</script>

您必须将your_php_file.php更改为上面的PHP文件。 现在，假设您的HTML代码中包含以下div元素：

<div id='content'></div>

那么无论是通过你的PHP文件中返回的，因为我们上面通过它在Javascript将这个div里面加载： $("#content").html(data);

接下来，我们将不得不查看PHP文件：

<?php

$str = file_get_contents('https://example.de/?id='. $_POST['sliderVal']);

echo $str;

?>

如果回头看一下Javascript代码，您会看到我们对php文件进行了POST method: "POST"请求，其中的变量sliderVal包含滑块值： data: { sliderVal: ui.value } 。 因此，我们要做的就是使用$_POST['sliderVal']在PHP文件中检索该值。 现在它将动态地将您请求的文件内容加载到$str变量中。 剩下要做的就是通过简单的echo将其返回给Javascript。