JQuery/AJAX 切换 POST 到 php 文件，无需导航答案

【问题标题】：JQuery/AJAX Toggle Switch POST to php file without navigationJQuery/AJAX 切换 POST 到 php 文件，无需导航
【发布时间】：2016-12-13 13:36:21
【问题描述】：

我一直在尝试使用多种方法（例如 Javascript 中的 $.ajax）和使用此处找到的 jQuery 插件来实现此功能：http://jquery.malsup.com/form/

我已经搜索了 stackoverflow 和 google 的解决方案，但无济于事。

基本上，我要做的是制作一个切换开关（启用/禁用），单击该开关时，通过 AJAX 将结果发送到 PHP 脚本，而无需导航或重新加载页面。

准确地说是其中一个切换开关：http://www.bootstraptoggle.com/

下面我可以让它在复选框“切换”时运行 PHP 脚本，但它会导航到空白的 PHP 文件页面（我没有让 PHP 脚本在成功时执行任何操作）。

<html>
<head>
  <link href="css/bootstrap.min.css" rel="stylesheet">
  <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  <script type="text/javascript">window.jQuery || document.write('<script src="classes/commons/jquery/jquery-1.7.1.min.js"><\/script>')</script>
  <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>
  <script src="http://malsup.github.com/jquery.form.js"></script> 
</head>
<body>
  <form  id="form" method="post" action="audio_alarm.php"> 
    <input type="checkbox" name="toggle" id="toggle" data-toggle="toggle" data-off="Disabled" data-on="Enabled" checked>
  </form>
  <script>
    $('#toggle').change(function(){
      $('#form').submit(); 
    });
  </script> 
</body>
</html>

现在下面是我认为应该确保它工作的内容，但 jQuery 插件似乎没有像宣传的那样工作.. 除非我做了一个简单的疏忽..

<html>
<head>
  <link href="css/bootstrap.min.css" rel="stylesheet">
  <script type="text/javascript"     src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  <script type="text/javascript">window.jQuery || document.write('<script src="classes/commons/jquery/jquery-1.7.1.min.js"><\/script>')</script>
  <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>
  <script src="http://malsup.github.com/jquery.form.js"></script> 


</head>
<body>
  <form id="myForm" name="myForm" action="audio_alarm.php" method="post"> 
    <input type="checkbox" name="toggle" id="toggle" data-toggle="toggle" data-off="Disabled" data-on="Enabled" checked>
  </form>
  <script>
    $('#toggle').change(function(){
      // submit the form 
      $(#myForm).ajaxSubmit(); 
      // return false to prevent normal browser submit and page navigation 
      return false; 
    });
  </script>
</body>
</html>

【问题讨论】：

您在更改事件中返回 false，而不是提交。看here
这似乎只在用户单击提交按钮时才有效，我没有使用提交按钮..
现在您的代码是正确的，但是您看不到任何更改，因为您在 jQuery 发布成功后没有事件处理程序。
PHP 脚本在我的数据库中输入了一个条目，所以当我使用第一个代码块时，它会生成条目，但是当使用 .ajaxSubmit 代码时，它不会输入条目..

标签： javascript jquery ajax twitter-bootstrap

【解决方案1】：

以下是适合您的完整解决方案。

HTML

  <html>
  <head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script type="text/javascript"     src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript">window.jQuery || document.write('<script src="classes/commons/jquery/jquery-1.7.1.min.js"><\/script>')</script>
    <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>
    <script src="http://malsup.github.com/jquery.form.js"></script> 


  </head>
  <body>
    <form id="myForm" name="myForm" action="audio_alarm.php" method="post"> 
      <input type="checkbox" name="toggle" id="toggle" data-toggle="toggle" data-off="Disabled" data-on="Enabled" checked>
    </form>
    <br><br>
    <div class="panel panel-default">
    <div class="panel-heading" id="heading"></div>
    <div class="panel-body" id="body"></div>
  </div>
    <div></div>
    <script>
      $('#toggle').change(function(){
        var mode= $(this).prop('checked');
        // // submit the form 
        // $(#myForm).ajaxSubmit(); 
        // // return false to prevent normal browser submit and page navigation 
        // return false; 
        $.ajax({
          type:'POST',
          dataType:'JSON',
          url:'audio_alarm.php',
          data:'mode='+mode,
          success:function(data)
          {
            var data=eval(data);
            message=data.message;
            success=data.success;
            $("#heading").html(success);
            $("#body").html(message);
          }
        });
      });
    </script>
  </body>
  </html>

当您启用或禁用按钮时，它会使ajax 调用audio_alarm.php。并使用ajax 检索数据。希望对您有很大帮助。

audio_alarm.php的代码如下：

 <?php

$mode=$_POST['mode'];

if ($mode=='true') //mode is true when button is enabled 
{
    //Retrive the values from database you want and send using json_encode
    //example
    $message='Hey my button is enabled!!';
    $success='Enabled';
    echo json_encode(array('message'=>$message,'$success'=>$success));
}

else if ($mode=='false')  //mode is false when button is disabled
{
    //Retrive the values from database you want and send using json_encode
    //example
    $message='Hey my button is disabled!!';
    $success='Disabled';
    echo json_encode(array('message'=>$message,'success'=>$success));

} 
 ?>

【讨论】：