我以分页格式显示 CSV 数据。根据我的 CSV 文件中的列数,我有很多滑块来选择范围。显示初始 CSV 文件和根据 CSV 列数动态生成滑块的代码如下。
<!DOCTYPE html>
<html>
<div id = "myDiv">
<!-- Include jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="js/simple-slider.js"></script>
<?php include 'index.php'; ?>
<?php
$totalcolumns = $_SESSION["totalcolumns"];
?>
<!-- Include Simple Slider JavaScript and CSS -->
<link href="css/simple-slider.css" rel="stylesheet" type="text/css" />
<link href="css/simple-slider-volume.css" rel="stylesheet" type="text/css" />
<script src="css/simple-slider.js"></script>
<link href="css/simple-slider.css" rel="stylesheet" type="text/css" />
<!-- Activate Simple Slider on your input -->
<h2>Keyword Scores</h2>
<?php
$i = 1;
while (++$i <= $_SESSION['totalcolumns']) {
$range = $_SESSION["min-column-$i"] . ',' . $_SESSION["max-column-$i"];?>
<br><?php echo "Keyword" ?>
<?php echo $i -1 ?>
<br><input type="text" data-slider="true" data-slider-range="<?php echo $range ?>" data-slider-step="1">
<?php } ?>
<button type="button" >Update</button>
<script>
var masterdata;
$("[data-slider]")
.each(function () {
var range;
var input = $(this);
$("<span>").addClass("output")
.insertAfter(input);
range = input.data("slider-range").split(",");
$("<span>").addClass("range")
.html(range[0])
.insertBefore(input);
$("<span>").addClass("range")
.html(range[1])
.insertAfter(input);
})
.bind("slider:ready slider:changed", function (event, data) {
$(this).nextAll(".output:first")
.html(data.value.toFixed(2));
masterdata = data.value;
});
</script>
<script>
function loadXMLDoc()
{
$.ajax({
type: "POST",
url: "update.php",
data: { value : masterdata },
success: function(data)
{
alert(data);
}
});
}
$("button").on('click',function(){ loadXMLDoc(); });
</script>
</div>
</html>
上述代码的工作示例在这里。但是,在选择滑块范围后,我只需要显示符合条件的值。为此,我使用 ajax 将其传递给另一个 PHP 文件。但是,我只能传递一个变量而不是值数组。我对 Web 开发非常陌生,对 ajax 或 json 编码一无所知。有人可以告诉我下一步应该做什么,以便我可以更新 CSV 文件的显示吗?