Question

所以，我会试着描述我想要做的事情。

表单应显示在顶部。只需一个输入和一个提交按钮。单击“提交”时，应显示带有结果的弹出窗口。

这是我的代码：

<html>
    <head>

        <script type="text/javascript">
            $(document).ready(function(){
                $(".show").click(function(){
                $("#popup").fadeIn();
                return false; 
                });
            });
        </script>
    </head>

    <body>    
        <form action="<?php echo $_SERVER['PHP_SELF'];?>" method="post">
            Number: <input type="number" name="number" />
            <input class="show" type="submit" name="submit" />
        </form>

        <div id="popup">    
            <?php
                if(isset($_POST["number"])) {
                    echo $_POST["number"];
                }
            ?>
              <a id="iks">Close</a>
        </div>
    </body>
</html>

（我移除了<head>的一部分以使其更小，但是有display:none;的{{1}}的样式

问题是它不会更新：它保持不变。弹出窗口有效，但无论我输入什么内容，它都会提供相同的数字。

我试过没有jQuery，它有效，所以它不是关于php / html。

Answer 1

您的.show是提交按钮，但您在点击事件中return false;（有效停止提交，因此不会出现新值）。

我要么将show绑定到一个新按钮，要么可以使用AJAX提交值，并在返回后在#popup中显示结果。

为了冗余和进一步说明，这里有一个working example以及代码：

首先，将其添加到当前PHP文件的顶部：

<?php
  // check if a value is being submitted
  if (isset($_REQUEST['number'])){
    // there is one, output it then exit PHP (so we don't output the
    // rest of the page--an ajax call only needs the response, not
    // the layout)
    echo $_REQUEST['number'];
    exit;
  }
?>

请注意，我不检查有效值，也不检查它来自哪个方法。这样您就可以将method="POST"更改为method="GET"并让示例仍然有用。否则，您可能希望坚持$_POST[]超全局并验证输入。

现在，修改您的<script></script>以使用以下内容而不是您拥有的内容：

$(document).ready(function(){

// we want to trigger this function when the form's submitted
$('form').on('submit',function(e){
     // store the form element
     var $form = $(this);

     // make an AJAX call to the action of the form
     // using the method supplied.
     $.ajax({
         'type': $form.prop('method'),
         'url': $form.prop('action'),
         'data': $form.serialize(), // send the value of "number"
         'dataType': 'html',
         'success': function(html){
            // we now have the value back, let's add it to the #popup
            // element, add a close button and then fade both in.
            $('#popup').html(html).append(
                $('<a>',{'href':'#','html':'Close','id':'iks'}).on('click',function(e){
                     $(this).parent().fadeOut();
                })
            ).fadeIn();
        }
    });
    // prevent the form from submitting the traditional way
    e.preventDefault();
});

});

因为上面的内容利用了表单所指定的内容（在action和method属性中），所以不需要太多自定义。现在它将使用AJAX来POST / GET数字输入中的值，因为我们添加了将重新输出数字的PHP代码，success函数将接收它，将其添加到{{1} }元素（连同关闭按钮）并淡入。

Answer 2

嗯，你是以错误的方式做到的。除了显示弹出窗口，您需要向您的PHP脚本发送AJAX请求，等待结果然后在弹出窗口中显示它。所以总结一下你需要的是 - 一个php脚本和一个html文件。它可能看起来像

<强> ajax.php

<?php
if (isset($_POST['number'])){
    echo $_POST['number'];
}

<强> form.html

<html>
<head>
<script type="text/javascript">
    $(document).ready(function(){
        $('#form').on('submit',function(e){
            e.preventDefault();
            $.post('ajax.php', $(this).serialize(), function(response){
                $('#result').html(response);
                $('#popup').fadeIn();
            }
        });
    });
</script>
</head>
<body>

<form id="form" method="post">
    Number: <input type="number" name="number" />
    <input class="show" type="submit" name="submit" />
</form>

<div id="popup">
  <div id="result"></div>
  <a id="iks">Close</a>
</div>
</body>
</html>

Answer 3

您将客户端代码与服务器端代码混淆。您的所有PHP都在任何JavaScript之前运行。一旦JavaScript开始运行，PHP就会完成，并且不会在此页面中执行任何其他操作。

您必须将Web开发视为一种元编程。也就是说，生成软件的软件。您的PHP是在您的服务器上运行的代码，并生成要在浏览器中运行的代码。您的PHP为每个HTTP Web请求运行一次。您的JavaScript是根据浏览器中发生的事情运行的。您的JavaScript对Web请求或服务器一无所知。它只知道它所在的页面，浏览器，DOM。同样，PHP对浏览器或JavaScript正在做什么一无所知。 JavaScript和PHP完全独立运行，没有交互。

也就是说，直到你介绍AJAX。 AJAX样式编程提供了一种让JavaScript与PHP通信的机制。

专门创建一个PHP页面来处理AJAX请求。你想要一个单独的页面，因为你不会返回一个完整的html页面，而是只返回少量数据，可能是html，但通常是JSON，或者是XML。

如果您的Ajax处理程序PHP页面如下所示：

AjaxHandler.php

<?php 
    if(isset($_POST["number"])) { 
        echo $_POST["number"]; 
    } 
?>

然后你可以像这样ajax-ify你的JavaScript：

$(".show").click(function(){ 
    $.post("ajaxHandler.php", { number: $("input[name=number]").val() }, function (response) {
        $("#popup").text(response).fadeIn(); 
    });
    return false;  
});

此代码发出http请求，将number=[n]发布到ajaxHandler.php。响应将提供给它需要使用的回调函数。

使用jQuery在同一页面上显示表单并获取输入

3 个答案: