gpt4 book ai didi

php - 当 JQuery slider 中的值更改时运行 MySQL 查询

转载 作者:行者123 更新时间:2023-11-29 03:05:24 25 4
gpt4 key购买 nike

每次用户完成屏幕上 slider 位置的更改时,我都希望运行 SQL 查询。例如,假设我将 slider 设置为 1,然后我希望检索 ID 也为 1 的所有行。我希望在您滑动 slider 时在屏幕上更新此信息。

我正在使用 JQueryUI slider 。这是我正在使用的代码。执行此操作的最佳方法是什么?

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Slider - Vertical slider</title>
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
<script src="../../jquery-1.9.1.js"></script>
<script src="../../ui/jquery.ui.core.js"></script>
<script src="../../ui/jquery.ui.widget.js"></script>
<script src="../../ui/jquery.ui.mouse.js"></script>
<script src="../../ui/jquery.ui.slider.js"></script>
<link rel="stylesheet" href="../demos.css">
<script>
$(function() {
$( "#slider-vertical" ).slider({
orientation: "vertical",
range: "min",
min: 0,
max: 100,
value: 60,
slide: function( event, ui ) {
$( "#amount" ).val( ui.value );
}
});
$( "#amount" ).val( $( "#slider-vertical" ).slider( "value" ) );
});
</script>
</head>
<body>

<p>
<label for="amount">Volume:</label>
<input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" />
</p>

<div id="slider-vertical" style="height:200px;"></div>

<div class="demo-description">
<p>Change the orientation of the slider to vertical. Assign a height value via <code>.height()</code> or by setting the height through CSS, and set the <code>orientation</code> option to "vertical."</p>
</div>
</body>
</html>

非常感谢:)

最佳答案

在您的slide 函数中,您需要向您的服务器发出ajax 请求。该请求显然取决于您的应用程序的设置方式,但在应用程序中,您可以只运行查询以获取所需的数据,并将查询结果返回给 ajax 调用。然后有了那个回应,你就可以做任何你想做的事了。因此,例如,我会执行以下操作:

slide: function(event, ui) {
$.get({
url: "/app/address?id=" + ui.value,
success: function(data, status, xhr) {
... Handle response here ...
}
});
}

虽然我同意@vlzvl 的观点,但在 slide 方法上运行它并不是一个好主意。更改方法会好得多,因为您将大大减少 ajax 请求的数量,因为它只会在您停止滑动时触发,而不是在 slider 的每次移动时触发

关于php - 当 JQuery slider 中的值更改时运行 MySQL 查询,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16391876/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com