Question

您好，感谢您的光临。

我为复选框（boostrap3）提供了光滑的新切换效果。我想在每次单击切换时更新我的数据库。简单的On或OFF条目将是完美的。当然，它需要没有页面刷新。

HTML：

<span id="setQuickVar1">Enable Notifications<input id="QuickVar1" type="checkbox" class="make-switch" data-size="small" data-on-color="success" data-on-text="ON" data-off-color="default" data-off-text="OFF" ></span>
                                  <div id="resultQuickVar1"></div>

的Javascript / AJAX：

var handleQuickSidebarToggler2 = function () {
        // quick sidebar toggler
        $('#setQuickVar1').click(function (e) {
            $('body').toggleClass('make-switch');
            $.post("quickRightSidebarDBUpdate.php", {"quickVar1a": $('#QuickVar1').val()}, 
            function(data) {
                $('#resultQuickVar1').html(data);
            });
        });
    }

（我添加了一个div来显示我的结果）

quickRightSidebarDBUpdate.php

if ($_POST['quickVar1a']):
    $quickVar1a = $_POST['quickVar1a'];
    $query2 = "UPDATE test SET field1 = " . $quickVar1a . ""; 
endif;

我认为我很接近，因为Db确实获得了＃34;＆＃34;的输入。我可以将复选框设置为＆＃34;选中＆＃34;或者在代码中保留它，并且每次进入＆＃34; on＆＃34;到BD。

我不确定＆＃34;＆＃34;的输入是什么？甚至产生了。

非常感谢您的帮助。

下面的答案......好吧它有用..但它不够漂亮

我做了一个我想要的丑陋版本并且它正在工作。这就是我的所作所为。

HTML

 <span id="setQuickVar1">Enable Notifications<input id="QuickVar1" type="checkbox" class="make-switch" data-size="small" data-on-color="success" data-on-text="ON" data-off-color="default" data-off-text="OFF" <?php echo $checked;?>  ></span>
                                  <div id="resultQuickVar1"></div>

的Javascript / AJAX

    // Handles quick sidebar toggler2
    var handleQuickSidebarToggler2 = function () {
        // quick sidebar toggler
        $('#setQuickVar1').click(function (e) {
            $('body').toggleClass('make-switch');
            //$(this).toggleClass('make-switch');
            $.post("quickRightSidebarDBUpdate.php", {"quickVar1a": $('#QuickVar1').val()}, 
            function(data) {
                $('#resultQuickVar1').html(data);
            });
        });
    }

quickRightSidebarDBUpdate.php

$sql = "SELECT * FROM `test`";
$result = mysql_query($sql)or die(mysql_error());
$r = mysql_fetch_array($result);
echo 'Finding:'.$r['quickVar1'].'<br>';
if($r['quickVar1'] == 'ON')
$quickVar1a = 'OFF';
else
$quickVar1a = 'ON';
$sql = "UPDATE test SET quickVar1 ='" . $quickVar1a . "'";
$result = mysql_query($sql)or die(mysql_error());
echo 'Updating To: '.$quickVar1a.'<br>';

Answer 1

这样做：

<强> JS

$('#setQuickVar1').on('click', function() {
    var checkStatus = this.checked ? 'ON' : 'OFF';

    $.post("quickRightSidebarDBUpdate.php", {"quickVar1a": checkStatus}, 
    function(data) {
        $('#resultQuickVar1').html(data);
    });
});

<强> PHP

if (isset($_POST['quickVar1a'])):
    $quickVar1a = $_POST['quickVar1a'];
    $query2 = "UPDATE test SET field1 = '" . $quickVar1a . "'"; 
endif;

代码未经过测试，请告知我是否有效：）

更新2

以下是切换的正确SQL查询：

$query2 = "UPDATE test SET field1 = '".$quickVar1a."' where field1 != '".$quickVar1a."'";

Answer 2

尝试一下：

HTML：

<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>

<input type="checkbox"  data-toggle="toggle" data-onstyle="success" data-offstyle="danger"  id="h_activate" name="host" value="1">
<p id="just"></p>

Ajax：

$('#h_activate').on('change', function(event, state) {

   var checkStatus = this.checked ? 'ON' : 'OFF';

$.ajax({
            url:"check.php",
            method:"POST",
            data:{"toogle": checkStatus},
            success:function(data){
                
                $('#just').html(data);
                
            }
        });

});

PHP：check.php

 var_dump($_POST); //Allow you to see if php page getting post value or not.

 $toogle= mysqli_real_escape_string($conn,$_POST['toogle']);

    if(isset($toogle) && $toogle!=='')
    {
        $sql="update status set toogle='$toogle'";
        if($conn->query($sql))
        {
         echo 'updated success';
        }

    }else{
         echo 'error: not updated';
    }

首先检查ajax是否给出任何响应，而不是直接更新数据库。

Bootstrap3切换开关，ajax更新到mysql

下面的答案......好吧它有用..但它不够漂亮

2 个答案:

更新2