Question

我一直在尝试使用Javascript中的$ .ajax等几种方法，并使用此处的jQuery插件：http://jquery.malsup.com/form/

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

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

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

下面我可以通过复选框＆＃34;切换＆＃34;来运行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>

Answer 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检索数据。希望它会对您有所帮助。

<{1}}的代码如下：

audio_alarm.php

JQuery / AJAX切换切换到没有导航的PHP文件

1 个答案: