1

因此，我将尝试描述我正在尝试制作的内容。

一个表格应该出现在顶部。只有一个输入和一个提交按钮。当您单击提交时，应该会出现一个带有结果的弹出窗口。

这是我的代码：

<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;#popup

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

我尝试不使用 jQuery，它可以工作，所以它与 php/html 无关。

4

3 回答 3

4

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

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

为了冗余和进一步解释，这里有一个工作示例以及代码：

首先，将其添加到当前 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函数将接收它，将其添加到#popup元素（以及关闭按钮）和淡入淡出。

于 2012-09-08T23:16:00.270 回答
0

您将客户端代码与服务器端代码混合在一起。您的所有 PHP 在您的任何 JavaScript 之前运行。一旦 JavaScript 开始运行，PHP 早就完成了，不会在这个页面上做更多的事情。

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

也就是说，直到您引入 AJAX。AJAX 风格的编程提供了一种让 JavaScript 与 PHP 对话的机制。

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

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

AjaxHandler.php

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

然后你可以像这样对你的 JavaScript 进行 ajax 化：

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

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

于 2012-09-09T00:11:23.607 回答
0

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

ajax.php

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

表单.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>
于 2012-09-08T23:31:55.100 回答