Javascript滑块值到数据库答案

【问题标题】：Javascript slider value to databaseJavascript滑块值到数据库
【发布时间】：2017-05-25 14:53:23
【问题描述】：

首先，我确定这个问题已经以某种方式得到了回答，并且我找到了一些线索，但是由于我对 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();
}
?>

【问题讨论】：

WHERE foo = bar 真的吗？
欢迎来到 Stack Overflow。我看到您缺少按钮的回调。你试过什么？我们可以帮助您编写代码；人们不会为你写的。你想$.post() 还是.submit() 表格？你需要更清楚。是的，这个具体的问题，我相信以前已经回答过了。
例如：stackoverflow.com/questions/9694608/…

标签： php jquery jquery-ui

【解决方案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();
}
?>

【讨论】：