提交表单数据的切换（） div 元素答案

【问题标题】：toggle() div element with submitting form data提交表单数据的切换（） div 元素
【发布时间】：2015-02-19 13:54:39
【问题描述】：

这是我的问题：提交表单后，我想从数据库 (MySQL) 中查看 div 元素中所选对象的一些数据。页面启动时，此元素设置为“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>

【问题讨论】：

为了让事情更简单，为什么不使用 if (isset ($_POST ['submit'])){ //让隐藏的 div 在这里可见 } ?
您好，这听起来不错。但是我有一个问题：第一次没问题。如果用户再次单击按钮 $_POST 仍然具有该值，因此
将永远不会消失。你知道如何重置 $_POST 吗？
现在我在下方的开头使用 unset($_POST) 进行了尝试。但是 $_POST ['submit'] 总是未设置并且不会显示 div。
@ArthurMeier：所以您要做的是两件事，首先，提交表单并在不刷新页面的情况下获得响应，其次，当您使用响应数据时出现一个 div单击提交，并在再次单击时消失。对吗？
你好 anthonygore - 是的，这是正确的。知道出了什么问题吗？

标签： javascript php jquery togglebutton

【解决方案1】：

默认情况下，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);
    }
});

（另外，由于这是一篇测试文章，您可能没有在实际代码中执行此操作，但看在老天的份上，对于向用户显示其内部工作信息的脚本或将用户提供的内容（未转义）回显到网页的脚本。这些是迈向相当重大安全漏洞的第一步。）

【讨论】：

【解决方案2】：

你可以试试这个：

不要在 CSS 中使用display: none;，而是通过 JQuery 来实现。

<style>
#wbtogdiv {
    width:30%; 
    height:100px;
    border:6px solid green;
}
</style>

这就是你要做的：

<div id="wbtogdiv" form-submitted = "no">KASTEN: <?php echo print_r($_POST)?></div>

<script>
$(document).ready(function(){
    if($('#wbtogdiv').attr('form-submitted') == "no") {
       $('#wbtogdiv').hide(); 
    }   
});

$(document).ready(function(){
    $("#btn").submit(function(event){
        $("#wbtogdiv").fadeToggle(20);
        return true;

        $("#wbtogdiv").attr('form-submitted', "yes");
    });  
});
</script>

【讨论】：

将$("#wbtogdiv").attr('form-submitted', "yes"); 放在return true; 之前