引导切换以使用 AJAX 在不刷新页面的情况下更改 MySQL TINYINT

Posted 2023-05-09

【中文标题】引导切换以使用 AJAX 在不刷新页面的情况下更改 MySQL TINYINT

【英文标题】：Bootstrap Toggle to Change MySQL TINYINT Without Page Refresh Using AJAX

【发布时间】：2018-04-11 23:07:07

【问题描述】：

在我的应用程序中，我想通过使用bootstrap toggle plugin 更改样式为切换的复选框的状态，将我的 mysql 数据库中保存的布尔状态更改为 TINYINT [0,1]。哇……真是一口。

诀窍是我希望 TINYINT 在后台更新而不可见页面刷新。我一直试图通过 AJAX 解决这个问题。我可以检查切换的状态并可以控制台记录状态更改，但我无法让 AJAX 部分实际执行 POST 到我的 toggle_track.php 页面，该页面将更新数据库。我对任何想法都持开放态度，并且愿意尝试几乎任何事情。

现在，代码示例：

ma​​in.php

<input id="toggle-event" type="checkbox" data-toggle="toggle" data-on="On" data-off="Off">
<div id="console-event"></div>
<script type="text/javascript">
  $(function() 
    $('#toggle-event').change(function() 
      console.log('state checked: ' + $(this).prop('checked'));

      if($(this).prop('checked')) 
        var visible = 1;
       else 
        var visible = 0;
      
      console.log('variable checked: ' + visible);

      var xhttp;
      if (window.XMLHttpRequest) 
        // code for modern browsers
        xhttp = new XMLHttpRequest();
       else 
        // code for IE6, IE5
        xhttp = new ActiveXObject("Microsoft.XMLHTTP");
      

      console.log('browsers checked: ' + xhttp);

// xhttp.onreadystatechange = function() 
//   if (this.readyState == 4 && this.status == 200) 
//     document.getElementById("demo").innerhtml = this.responseText;
//   
// ;

     xhttp.open("POST","../private/dynamic/toggle_track.php?visible="+visible,true);
     console.log('Open: ' + xhttp.open);

     xhttp.send();

     console.log('POST run');
   )
  )
</script>

toggle_track.php

<?php

  require_once('../initialize.php');

?>

<script type="text/javascript">
 window.alert('made it');
</script>

<?php

if(isset($_POST['visible'])) 


$incident['visible'] = $_POST['visible'];

  $incident_id = $_SESSION['incident_id'];

  // update the entire associative array in the db.
  $result = update_incident($incident_id);
  if($result === true)     // Check to see if the UPDATE was successful.
    // Yes, the UPDATE was successful.
    // load a message to be displayed.
    // $step_updated = 'Incident: ' . $incident['id'] . ' was updated.  Step #' . $step['id'] . ' was added.  The array should now show: ' . $sa_load;
    // $ans_updated = ' and the answer for #' . $step['id'] . ' was added.  The array should now show: ' . $ans_load;
  
    // No, the UPDATE failed.
    else 
    // load message to show what failed.
    $errors = $result;
    // end else




 ?>

query_functions.php 在上面的require_once('../initialize.php'); 语句中与数据库建立连接后：

function update_incident($incident) 
global $db;

$sql = "UPDATE incidents SET ";
$sql .= "visible='" . db_escape($db, $incident['visible']) . "', ";
$sql .= "note='" . db_escape($db, $incident['note']) . "', ";
$sql .= "resolved='" . db_escape($db, $incident['resolved']) . "', ";
$sql .= "step_array='" . db_escape($db, $incident['step_array']) . "',";
$sql .= "ans_array='" . db_escape($db, $incident['ans_array']) . "',";
$sql .= "lastStep='" . db_escape($db, $incident['lastStep']) . "',";
$sql .= "valid='" . db_escape($db, $incident['valid']) . "' ";
$sql .= "WHERE id='" . db_escape($db, $incident['id']) . "' ";
$sql .= "LIMIT 1";

$result = mysqli_query($db, $sql);
// For UPDATE statements, $result is true/false
if($result)
  return true;
 else 
  //UPDATE failed
  echo mysqli_error($db);
  db_disconnect($db);
  exit;

我希望这段代码足以解释我的想法，以帮助得出答案。

【问题讨论】：

你已经把它标记为jquery，那么为什么不直接使用$.post() 或$.ajax() 而不是那些XMLHttpRequest 废话呢？

借用了 W3Schools AJAX 教程。我很想使用这两种方法，但显然我似乎缺少这样做的信息。有什么想法吗？

为自己节省大量时间和挫折，停止使用 w3schcools。他们被广泛认为拥有糟糕、过时甚至完全错误的信息。尽可能参考官方文档（例如我之前评论中的链接），使用 SO 上已经存在的许多 许多 示例，如果需要，是的，有时甚至是付费 i>，著名的课程/教程/网络研讨会/等。

感谢 Patrick Q。实际上，我使用了所有这些的组合。尤其是付费课程 [Lynda.com & Udemy]。最近我遇到了一个障碍，决定在这里问一个关于 SO 的问题，而不是筛选其他不太有效的解决方案 [我尝试了大约十几个]。

好的，你能试着澄清你的问题到底出在哪里吗？您说“但我无法让 AJAX 部分实际执行 POST 到我的 toggle_track.php 页面”，这是否意味着您已经检查了浏览器的网络选项卡并看到当您点击切换时没有发出请求？你有许多console.log 语句，这很好。他们生产什么？你点击“浏览器检查”吗？ “打开：”那个呢？ “开机自检”？

【参考方案1】：

如果我理解正确，您不会在 toggle_track.php 上获得 POST 对吗？你有正确的想法，但我会这样：

在 ma​​in.php

      //Same code until console.log();

        //Not really needed in this case to be sent in an array, but I kinda like it :P 
        var dataToSend = 
            visible: visible
        ;

        //Sending data using jQuery AJAX
        $.ajax(
            url: 'toggle_track.php',  //Where to
            type: "POST",  //Method
            data: dataToSend, //The array I created with the "visible" variable
            //A success function, for when the CONNECTION WITH THE URL was succesfull
            success:  function (response) 
                //If COMMUNICATION was successful (Doesn't mean it went all right)
            ,
            //An error function, for when the CONNECTION WITH THE URL 
            //wasn't succesfull (couldn't be found, etc)
            error: function(response)
              //If COMMUNICATION had an error
            
        );
       )
      )
    </script>

对不起，如果我没有正确解释自己，英语不是我的第一语言。我会尽力回答您的任何问题。

【讨论】：

谢谢。您的回答是正确的，我没有将我的 POST 发送到 toggle_track.php。我希望看到一个警告框弹出确认我已经进入页面。我试过你的代码部分，但我似乎遇到了同样的问题。 ://

如果您试图获得警报，它需要在 .ajax() 函数的“成功”或“错误”方法上。为什么？因为即使您的脚本被触发，它也不在您当前正在查看的同一文件中。你可以做一个测试。制作一个虚拟的 toggle_tracker.php 文件： if (isset($_POST['visible'])) echo "It's ok"; 其他 回声“好”；现在，在 main.php 上，在 ajax 函数中的成功或错误方法上，添加一个 console.log(response);它应该在控制台上打印您要返回的内容，如果它是“好的”，那么您的帖子正在发送和接收正常。

【参考方案2】：

嗯...非常感谢 Patrick Q，他让我走上了正轨。以下是使它起作用的编辑：

ma​​in.php

我做了以下改动：

if($(this).prop('checked')) 
  var visible = "true";
 else 
  var visible = "false";

然后在 toggle_track.php 我做了这个改变：

$incident = [];

$raw_visible = $_POST['visible'];

if($raw_visible == "true") 
  $incident['visible'] = 1;
 elseif($raw_visible == "false") 
  $incident['visible'] = 0;