1

それで、私が作ろうとしていることを説明しようと思います。

上部にフォームが表示されます。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 します。数値が再出力され、success関数がそれを受け取るように PHP コードを追加したため、それを#popup(閉じるボタンと共に) 要素に追加し、フェードインします。

于 2012-09-08T23:16:00.270 に答える
0

さて、あなたはそれを間違った方法でしました。ポップアップを表示するとともに、AJAXリクエストをPHPスクリプトに送信し、結果を待ってからポップアップで表示する必要があります。したがって、必要なものを要約すると、1つのphpスクリプトと1つの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>
于 2012-09-08T23:31:55.100 に答える
0

クライアント側のコードとサーバー側のコードが混同されています。すべての PHP は、どの JavaScript よりも前に実行されます。JavaScript が実行を開始すると、PHP は長い間完了しており、このページではそれ以上何もしません。

Web 開発は一種のメタプログラミングと考える必要があります。つまり、ソフトウェアを生成するソフトウェアです。PHP は、サーバー上で実行され、ブラウザーで実行されるコードを生成するコードです。PHP は、HTTP Web リクエストごとに 1 回実行されます。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 に答える