使用PHP将范围滑块值传递给MySQLI

时间:2017-07-19 22:53:51

标签: javascript php rangeslider

我花了一天时间试图弄清楚如何获取四个范围滑块值并将它们发布到我的数据库表中。我成功地创建了一个版本,我将值保存到文本文件,但它更适合我将值保存到我的数据库。

到目前为止我所拥有的:

post.php中

<!doctype html public "-//w3c//dtd html 3.2//en">
<html>
<head>
<title>In The Mood?</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>

<body>

<script>
   $(document).ready(function() {
    $("#b1").click(function(event){
$.post( "postck.php", {"t1":$('#t1').val(),"t2":$('#t2').val(),"t3":$('#t3').val(),"t4":$('#t4').val()});
        });
   });

</script>

<div id="stress">
<label for="stress">Stress</label>
<div id="sliders1">
<label class="range1" for="r1"></label><input id="range1" type="range" min="0" max="100"/>
<output for="fader" id="t1" name=t1>50</output>


<div id="desire">
<label for="desire">Desire</label>
<div id="sliders2">
<label class="range2" for="range2"></label><input id="range2" type="range" min="0" max="100"/>
<output for="fader" id="t2" name=t2>50</output>


<div id="energy">
<label for="energy">Energy</label>
<div id="sliders3">
<label class="range3" for="range3"></label><input id="range3" type="range" min="0" max="100"/>
<output for="fader" id="t3" name=t3>50</output>


<div id="affection">
<label for="affection">Affection</label>    
<div id="sliders4">
<label class="range4" for="range4"></label><input id="range4" type="range" min="0" max="100"/>
<output for="fader" id="t4" name=t4>50</output>

<div id="submit">
<input type="button" id="b1" value="Submit">

<script>
  document.querySelector("#sliders1","#sliders2","#sliders3","#sliders4").addEventListener("change", function(e) {
  var cur = event.target;

  document.querySelector("#t1").textContent = document.querySelector("#range1").value * 1
  document.querySelector("#t2").textContent = document.querySelector("#range2").value * 1
  document.querySelector("#t3").textContent = document.querySelector("#range3").value * 1
  document.querySelector("#t4").textContent = document.querySelector("#range4").value * 1

})
</script>
</div>
</body>
</html>

这是我的PHP代码,用于将值保存到.txt文件中:

<?php
  $t1 = $_POST['t1'];
  $t2 = $_POST['t2'];
  $t3 = $_POST['t3'];
  $t4 = $_POST['t4'];
  $str = "$t1 $t2 $t3 $t4";
  echo $str;

  $body_content = $str; // Store some text to enter inside the file
  $file_name = "test_file.txt"; // file name
  $fp = fopen ($file_name, "w"); // Open the file in write mode, if file does not exist then it will be created.
fwrite ($fp,$body_content); // entering data to the file
fclose ($fp); // closing the file pointer
chmod($file_name,0777); // changing the file permission.
?>

我已尝试使用此PHP代码将值发布到MySql数据库,但它无效。我的桌子已全部设置好了;我现在只需要在我的桌子上获取滑块值。

对我不起作用的代码:

<?php
  $link = mysqli_connect('localhost','user','pass','my_db');

  if (isset($_POST['submitattr'])) {
   $t1 = $_POST['stress'];
   $t2 = $_POST['desire'];
   $t3 = $_POST['energy'];
   $t4 = $_POST['affection'];

   $sql = "INSERT INTO lisa (stress,desire,energy,affection) VALUES('$t1','$t2','$t3','$t4')";

    $query = mysqli_query($link, $sql);
    if (!$query) {
      echo "Couldn't enter data";
    } else {
      echo "Data entered";
    }
  }

非常感谢任何帮助!

1 个答案:

答案 0 :(得分:0)

您的php文件中的$ _POST值与您发布的内容不匹配。看起来你在JavaScript中发布了t1,t2,t3 ......但是你在PHP文件中寻找$_POST['stress']$_POST['desire']等。也无法找到您发送submitattr的位置。还要小心SQL注入!

试试这个:

<?php

 $link = mysqli_connect('localhost','user','pass','my_db');


 if (isset($_POST['submit']) {

     $t1 = mysqli_real_escape_string($link, $_POST['t1']);
     $t2 = mysqli_real_escape_string($link, $_POST['t2']);
     $t3 = mysqli_real_escape_string($link, $_POST['t3']);
     $t4 = mysqli_real_escape_string($link, $_POST['t4']);

     $sql = "INSERT INTO lisa (stress,desire,energy,affection) 
        VALUES('$t1','$t2','$t3','$t4')";

     $query = mysqli_query($link, $sql);

     if (!$query) {
        echo "Couldn't enter data";
     } else {
        echo "Data entered";
     }
  }
?>

同时将其添加到您的HTML提交按钮:

<input type="button" id="b1" name="Submit" value="Submit">

并将其添加到您的Ajax调用

$(document).ready(function() {
  $("#b1").click(function(event){
    $.post( "postck.php",

{"t1":$('#t1').val(), "t2":$('#t2').val(),"t3":$('#t3').val(),"t4":$('#t4').val(), "Submit":'Submit'});
    });

});