我一直在尝试使用多种方法来实现此功能，例如 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>
最佳答案
以下是为您提供的完整解决方案。
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));
}
?>
关于javascript - JQuery/AJAX Toggle 将 POST 切换到 php 文件，无需导航，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41122502/