Question

首先，我确定这个问题已经以这种或那种方式得到了解答，我找到了一些线索，但由于我在javascript方面有点迷失，我似乎无法想象出来。因此我需要一些帮助。

这里是：

我有一个包含jQuery UI范围滑块的表单，其中包含两个不同输入字段中的最小值和最大值。（修改后的版本：https://jqueryui.com/slider/#range）

当我按下“设置”按钮时，我希望jQuery范围滑块中的两个值发布到php文档，然后更新我的数据库。我不确定该怎么做。下面的代码没有做到这一点。

这是我的HTML和Javascript。 PHP文档可以在下面找到。

<html>
<head></head>
<body>

<center>

<header id="layout_header"> </header>

<article id="layout_section_1"> </article>

<article id="layout_section_2">

<form action="foo.php" method="post">

    <input type="text" id="amount" class="input-field" readonly style="width: 60px;">

    <div id="slider-range"></div>

    <input type="text" id="amount2" class="input-field" readonly style="width: 60px;">

<input name="submit" type="submit" value="Set">

</form>

</article>


<article id="layout_section_3"> </article>

<article id="layout_section_4"> </article>

<footer id="layout_footer"></footer>

</center>


<!-- Place any per-page javascript here -->

<script>
  $( function() {
        $( "#slider-range" ).slider({
          range: true,
          min: 0,
          max: 100,
          values: [ 20, 80 ],
          slide: function( event, ui ) {
            $( "#amount" ).val(ui.values[ 0 ] + "%" );
            $( "#amount2" ).val(ui.values[ 1 ] + "%" );
          }

        });
        $( "#amount" ).val( "" + $( "#slider-range" ).slider( "values", 0 ) 
+ "%" );
        $( "#amount2" ).val( "" + $( "#slider-range" ).slider( "values", 1 ) 
+ "%" );
      });
</script>

</body>
</html>

这是PHP文档：

<?php
if(isset($_POST["submit"])){
$servername = "server";
$username = "user";
$password = "pass";
$dbname = "db";
$valueone = $_POST['amount'];
$valuetwo = $_POST['amount2'];

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
} 

$sql = "UPDATE table SET valueone='$valueone',valuetwo='$valuetwo'";

$conn->close();
}
?>

Answer 1

假设您想要一个AJAX样式活动，可以使用$.post()。这看起来像是：

<强>的JavaScript

$(function() {
  $("#slider-range").slider({
    range: true,
    min: 0,
    max: 100,
    values: [20, 80],
    slide: function(event, ui) {
      $("#amount").val(ui.values[0] + "%");
      $("#amount2").val(ui.values[1] + "%");
    }

  });
  $("#amount").val("" + $("#slider-range").slider("values", 0) + "%");
  $("#amount2").val("" + $("#slider-range").slider("values", 1) + "%");
  $("form[action='foo.php'] [type='submit']").button();
  $("form[action='foo.php']").submit(function(e) {
    e.preventDefault();
    var myData = {
      submit: true,
      amount: $("#slider-range").slider("values", 0),
      amount2: $("#slider-range").slider("values", 1)
    };
    $.post($(this).attr("action"), myData, function(result) {
      alert("Values Saved.");
    }).fail(function() {
      alert("Error");
    });
    return false;
  });
});

测试示例：https://jsfiddle.net/Twisty/thnfgn0w/

关于PHP，它易受SQL Injection的影响。您需要确保在代码中防止这种情况发生。我会建议像：

<强> PHP

<?php
if(isset($_POST["submit"])){
    $servername = "server";
    $username = "user";
    $password = "pass";
    $dbname = "db";
    $valueone = (int)$_POST['amount'];
    $valuetwo = (int)$_POST['amount2'];
    // Create connection
    $conn = new mysqli($servername, $username, $password, $dbname);
    // Check connection
    if ($conn->connect_error) {
        die("Connection failed: " . $conn->connect_error);
    } 
    if ($stmt = $conn->prepare("UPDATE table SET valueone='?',valuetwo='?'"){
        $stmt->bind_param("ii", $valueone, $valuetwo);
        $stmt->execute();
        $stmt->close();
    }
    $conn->close();
}
?>

Javascript滑块值到数据库

1 个答案: