Bootstrap JQuery/AJAX Toggle切换POST到php文件，无需导航

smdncfj3 于 12个月前发布在 Bootstrap

关注(0)|答案(1)|浏览(144)

我一直在尝试使用几种方法来实现这一点，例如JavaScript中的$. aQuery和使用jQuery插件：http://jquery.malsup.com/form/
我已经搜索了stackoverflow和谷歌的解决方案，但无济于事。
基本上，我试图做的是做一个切换开关（启用/禁用），当点击，发送结果通过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>

型

twitter-bootstrap

来源：https://stackoverflow.com/questions/41122502/jquery-ajax-toggle-switch-post-to-php-file-without-navigation

1条答案

按热度按时间

w51jfk4q1#

以下是为您提供的完整解决方案。
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。数据使用aerogram检索。希望它能对您有很大帮助。
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));

} 
 ?>

型

赞(0）回复(0）举报 11个月前

我来回答

Bootstrap JQuery/AJAX Toggle切换POST到php文件，无需导航

1条答案

相关问题

热门标签

最新问答