如何在来自 HTML 的 JSON AJAX 请求中添加滑块

Question

我有 2 个表格，用于存储来自 SKYTV 和 NOWTV 的电影 ID、海报和运行时间。他们持有身份证号码和海报路径。单击 NOWTV 复选框时，将显示 NOWTV 电影。单击 SkyTV 时，将显示 SKYTV 电影。

我还有一个范围滑块，它表示最大运行时间。

我有 2 个页面（见下文）- submit.php 和 ajax.html

问题：

在 HTML 页面上，有一个滑块。当用户移动滑块时，我希望这代表返回时允许的最大运行时间的变化。运行时存储在两个表中。

ajax.html 中的滑块是：

<script>
var slider = document.getElementById("runtime");
var output = document.getElementById("runtime_");
output.innerHTML = slider.value;

slider.oninput = function() {
output.innerHTML = this.value;
}
</script>

滑块如下：

<div class="slidecontainer">
<input type="range" min="1" max="360" value="120" class="slider" id="runtime">
<p>Runtime: <span id="runtime_"></span></p>

这是 ajax.html 中的脚本，它创建表并返回要发送到 submit.php 的 HTML 值。请原谅函数说“员工”，我正在学习教程。

<script>
  function makeTable(data){
    var tbl_body = "";
    for (var i = 0; i < data.length; i++)  {
      var tbl_row = "";
      var t = i;
      for (var j=0; j<2; j++) {
      //tbl_row +=("<td>" + data[i].tmdbid + "</td>");
        tbl_row +=("<td><IMG SRC='my link goes here"+ data[i].poster +"'></td>");
        i++;
      }
      tbl_body += "<tr>"+tbl_row+"</tr>" 
    }
    return tbl_body;
  }
  function getEmployeeFilterOptions(){
    var opts = [];
    $checkboxes.each(function(){
      if(this.checked){
        opts.push(this.name);
      }
    });
    var slider = document.getElementById("runtime");
    opts.push(slider.value);
    return opts;
  }
  function updateEmployees(opts){
    $.ajax({
      type: "POST",
      url: "submit.php",
      dataType : 'json',
      cache: false,
      data: {
        filterOpts: opts
      },
      success: function(records){
        $('#employees tbody').html(makeTable(records));
      }
    });
  }
  var $checkboxes = $("input:checkbox");
  $checkboxes.on("change", function(){
    var opts = getEmployeeFilterOptions();
    updateEmployees(opts);
  });
  updateEmployees();
</script>

我的提交页面然后根据返回创建 SQL，用于我当前拥有的滑块：

if (in_array("runtime", $opts)) {
  $where .= ' AND runtime < VALUE OF THE SLIDER?????';
}

预期结果是滑块的移动会改变 SQL 返回的 WHERE 运行时

Answer 1

在您的代码中，范围输入的值与复选框名称一起发送到一个数组中，因此对于更多的数字数据，很难判断哪个值是 SQL 查询所需的值。 来自输入的数据可以以更具关联性的方式发送：

function getEmployeeFilterOptions(){
// here we're creating an object instead of an array
  var opts = {
    checkboxes: [],
    sliderValue: null
  };
  $checkboxes.each(function(){
    if(this.checked){
      opts.checkboxes.push(this.name);
    }
  });
  var slider = document.getElementById("runtime");
  opts.sliderValue = slider.value;
  return opts;
}
function updateEmployees(opts){
  $.ajax({
    type: "POST",
    url: "submit.php",
    dataType : 'json',
    cache: false,
    data: opts,
    success: function(records){
      console.log(records);
      $('#employees tbody').html(makeTable(records));
    }
  });
}
// we'll sent an event listener for all inputs so the updateEmployees function will be invoked also after the slider is moved
var $checkboxes = $("input");
$checkboxes.on("change", function(){
  var opts = getEmployeeFilterOptions();
  updateEmployees(opts);
});

这样在 AJAX 请求中传递的数据将如下所示：

{checkboxes: Array(1), sliderValue: "120"}

然后，在后端，您将能够像这样修改您的 SQL 查询：

$checkboxes = $_POST["checkboxes"];
$slider_value = $_POST["sliderValue"];
if (in_array("runtime", $checkboxes)) {
    $where .= ' AND runtime < '  . $slider_value;
}

将范围输入值设置为，例如273，$where 变量将保持：

AND runtime < 273