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文件返回的内容将加载到这个div中，因为我们在Javascript中传递了它：$("#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。

在PHP代码

2 个答案: