jqueryUI 滑块值未保存到数据库中答案

【问题标题】：jqueryUI Slider Value isn't saved into DBjqueryUI 滑块值未保存到数据库中
【发布时间】：2013-06-20 18:43:08
【问题描述】：

我正在使用 jQuery ui 滑块构建一个简单的页面。目标很容易达到：用户移动滑块，然后他/她点击提交按钮并使用 Ajax 将值存储在 DB 中。

我的问题是数据库中实际上没有保存任何值。

所以：滑块+PHP表单+Ajax

如果在完全重写我的愚蠢代码后有更好的方法来实现我的目标，请这样做。

这是我的代码：

索引.php

<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>UI test</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script> 
        <style type="text/css"> 
#container{
background:url(bg.jpg)!important;
padding:100px 50px 0px 50px;
}

/*the slider background*/
.slider {
width:230px;
height:11px;
background:url(slider-bg.png);
position:relative;
margin:0;
padding:0 10px;
}

/*Style for the slider button*/
.ui-slider-handle {
width:24px;
height:24px;
position:absolute;
top:-7px;
margin-left:-12px;
z-index:200;
background:url(slider-button.png);
}

/*Result div where the slider value is displayed*/
#slider-result {
font-size:50px;
height:200px;
font-family:Arial, Helvetica, sans-serif;
color:#fff;
width:250px;
text-align:center;
text-shadow:0 1px 1px #000;
font-weight:700;
padding:20px 0;
}

/*This is the fill bar colour*/
.ui-widget-header {
background:url(fill.png) no-repeat left;
height:8px;
left:1px;
top:1px;
position:absolute;
}

a {
outline:none;
-moz-outline-style:none;
}


        </style> 
</head>
<body>  
    <div class="slider"></div> 
    <div id="slider-result">50</div>   
    <form method="post">
        <input type="hidden" id="hidden" name="hidden" class="pasui"/>
        <input type="button" id="bottone" value="Send data">
    </form>
    <script>
        $( ".slider" ).slider({
            animate: true,
            range: "min",
            value: 50,
            min: 10,
            max: 100,
            step: 10,
            //this gets a live reading of the value and prints it on the page
            slide: function( event, ui ) {
                $( "#slider-result" ).html( ui.value );
            },
            //this updates the hidden form field so we can submit the data using a form
            change: function(event, ui) { 
                $('#hidden').attr('value', ui.value);
            }
        });
        $("#bottone").click(function(e) {
            e.preventDefault();
            var name = $("#hidden").val(); 
            /* var last_name = $("#last_name").val();*/
            var dataString = 'name='+name;
            $.ajax({
                type:'POST',
                data:dataString,
                url:'scrividb.php',
                success:function(data) {
                    alert(data);
                }
            });
        });
    </script> 
    <div id="risultato"></div>
</body>
</html>

scrividb.php

<?php
$link = mysql_connect('localhost', 'username', 'pass');
$database = testui;

mysql_select_db($database,$link); 

$name = $_POST['hidden'];
  $insert = "insert into slivalui values('$name')";
  if(mysql_query($insert)) {
   echo "Success, value:".$name."";
  } else {
   echo "Cannot Insert";
  };?>

【问题讨论】：

标签： php sql forms jquery jquery-ui-slider

【解决方案1】：

尝试更改您的var dataString = 'name='+name; 到var dataString = {name:name}; 在 PHP 端使用 $name = $_POST['name']; 捕获它

另外：使用 val(new_val) 而不是 attr() 更新表单字段值；更改事件中的代码应为：

change: function(event, ui) { $('#hidden').val(ui.value); //set value of form field }

【讨论】：

还要注意，您应该使用$name = mysql_real_escape_string($_POST['name']); 保护您的用户输入数据，请参阅php.net/manual/en/function.mysql-real-escape-string.php
隐藏字段中没有value=""
仍在接收：无法插入
@amigura 我没有任何价值，因为它是由滑块动态生成的
调试时间。检查是否正在发布预期值。见stackoverflow.com/questions/4423061/…。如果这很好，您就知道问题出在 php 方面。如果您将 sql 语句中的 $name 硬编码为字符串；它插入了吗？您的 INSERT 可能需要更详细。INSERT INTO table_name (which_column) VALUES ($name);

【解决方案2】：

你通过 jq 发送名字而不是隐藏

$name = mysql_real_escape_string($_POST['name']);

INSERT INTO slivalui (field name) VALUES ('$name');

【讨论】：