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

Question

我有2个桌子，这些桌子存储了SkyTV和NowTV的电影ID，海报和运行时间。他们保持和ID号和海报路径。单击" NowTV复选框"时，NowTV电影显示。SkyTV点击时，SkyTV电影显示。

我也有一个范围滑块，代表最大运行时间。

我有2页(见下文(-prist.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中的脚本，该脚本创建表并返回HTML值发送到submit.php。请原谅功能说"员工"，我正在遵循一个教程。

<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返回的位置＆lt;滑块的值。

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