Question

这是我的问题：提交表单后，我想从数据库（MySQL）中查看div元素中所选对象的一些数据。页面启动时，此元素设置为“display：none”。

如果用户点击按钮，则<div>应该可见，并且应该看到数据。再次单击，<div>将再次变为不可见。为此，我使用jQuery函数toggle()。

如果我使用带有“type=submit”的输入元素，则会提交表单，并且由于<div>中的php语句而获取数据。但不幸的是<div>会立即消失。我猜默认情况下提交会再次启动页面，因此<div>再次设置为“display:none”。

如果我使用button-element而不是我可以切换<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>

Answer 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);
    }
});

（另外，由于这是一个测试帖，你可能不会在你的实际代码中这样做，但是出于上天的考虑，要非常小心一个脚本，它会向用户显示有关其内部工作的信息，或者脚本，回显用户提供的内容，未转义，回到网页。这是迈向相当大的安全漏洞的第一步。）

Answer 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>

toggle（）div元素，提交表单数据

2 个答案: