php - Bootstrap Toggle 使用 AJAX 无需刷新页面即可更改 MySQL TINYINT

Question

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

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

现在，查看代码示例:

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;
}
}

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

Answer 1

如果我的理解正确的话，你没有在toggle_track.php上得到你的帖子，对吗？你的想法是正确的，但我会这样:

在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>

抱歉，如果我没有正确解释自己，英语不是我的母语。我会尽力回答您的任何问题。