这是我的问题: 提交表单后，我想在 div 元素中查看所选对象的数据库 (MySQL) 中的一些数据。该元素在页面启动时设置为“display:none”。
如果用户点击按钮 <div>应该变得可见并且应该看到数据。再次单击 <div>应该再次变得不可见。为此，我使用 jQuery 函数 toggle() .
如果我将输入元素与 “type=submit” 一起使用由于 <div> 中的 php 语句，表单已提交并且我得到了数据.但不幸的是 <div>会立即消失。我想默认情况下提交会再次启动页面，因此 <div>设置为 “display:none”再次。
如果我改用按钮元素，我可以切换 <div>但表单未提交，$_POST 未填写，因此我没有从该对象的数据库中获取任何数据。这个想法是使用对象的名称来设置 $id 变量的值以启动 SQL 语句。
我试图让源代码非常简短，因此我没有在这里编写与数据库相关的语句。这不是问题所在——当我使用普通提交时我能够获取对象的数据并且没有为 <div> 切换功能.
如您在源代码中所见，我尝试了三种不同的输入类型。但是没有一个像我希望的那样工作。
我知道使用另一个额外的页面来显示数据一切都会很容易。但我想用 <div> 来实现它.
我该如何解决这种情况？ 这是我的源代码:
<!DOCTYPE html>
<html>
<head>
<style>
#wbtogdiv {
width:30%;
height:100px;
border:6px solid green;
display:none;
}
</style>
<script language="JavaScript" src="jquery-1.11.2.js"></script>
<script language="JavaScript">$(document).ready(function(){$("#btn").click(function(){$("#wbtogdiv").fadeToggle(20);return true;});});</script>
</head>
<body style="color:#FF004C;">
<!-- I tried also with this
action="<?php $_SERVER['PHP_SELF']?>"
but of course then the page is fired again and the <div> is not visible due to the
CSS-->
<form method="post">
<input type="text" name="customer">
<input type="submit" id="btn" value="submit:Toggle div green">
<!--
<input type="submit" id="btn" value="submit:Toggle div green">
<input type="button" id="btn" value="input button: Toggle div green">
<button type="button" id="btn">Button: Toggle div green</button>
-->
</form>
<div id="wbtogdiv">KASTEN: <?php echo print_r($_POST)?></div>
</body>
</html>
最佳答案
默认情况下，button 元素将提交表单，但是，您可以通过设置 type="button" 来覆盖该行为。 (有点违反直觉，我同意。)
由于您已经在使用 jQuery，您可以利用其内置的 AJAX 支持并覆盖默认的表单提交行为。这是一种优雅降级的方法:如果用户在不执行 JavaScript 的环境中运行，他们将使用默认浏览器行为提交表单并仍然看到结果。 (在这种情况下，您可以调整 CSS 以使您的 div 默认可见，并使用 JS 在页面加载期间隐藏它。) DEMO jsFiddle
var $form = $('form');
var $resultDiv = $('#wbtogdiv');
$resultDiv.hide();
var successHandler = function(data, textStatus, jqXhr) {
$resultDiv.html(data);
$resultDiv.fadeToggle(200);
};
$form.submit(function(ev) {
ev.preventDefault();
if (! $resultDiv.is(':visible')) {
$.post(
'/path/to/your/script',
$form.serialize(),
successHandler
);
} else {
$resultDiv.fadeToggle(200);
}
});
(此外，由于这是一篇测试文章，您可能没有在实际代码中执行此操作，但看在上帝的份上，请格外小心向用户显示有关其内部工作信息的脚本，或者将用户提供的内容(未转义)回显到网页的脚本。这些是迈向相当大的安全漏洞的第一步。)
关于javascript - 提交表单数据的 toggle() div 元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27586210/