PHPスクリプトを実行しているときにイメージを表示する

私はこの質問の答えを読んできましたが、わかりません。私はゼロAJAXとjavascriptを知っているからです。PHPスクリプトを実行しているときにイメージを表示する

私は、ボタンをクリックすると、ボタンを持つページを持っています... PHPスクリプトは、サーバー内のフォルダをスキャンし、データベースですべての種類のものを行います。

これが発生している間、読み込み中のGIFを表示したいと思います。ユーザーは情報を送信したり、ボタンをクリックするだけでは何も受信しません。

私の最初の試みは、ユーザーをphpファイルに送信することでした。これは、このようなものです（一例）。 DOMがロードされている間に画像を表示するdivを配置します。しかし、それは実際には、空白のページを表示されません、私はまだボタンをクリックし、PHPスクリプトの最後にリダイレクトを持っているので、私は起こっていることの指標としてブラウザのアイコンを読み込んでいます。

<html> 
    <head> 
     <title></title> 
     <script type="text/javascript"> 
      $(window).load(function() { 
       $(".loader").fadeOut("slow"); 
      }) 
     </script> 
     <style type="text/css"> 
      .loader { 
       position: fixed; 
       left: 0px; 
       top: 0px; 
       width: 100%; 
       height: 100%; 
       z-index: 9999; 
       background: url('images/page-loader.gif') 50% 50% no-repeat rgb(249,249,249); 
      } 
     </style> 
    </head> 
    <body> 
     <div class="loader"></div> 
     <!-- PHP SHOULD DO STUFF HERE THEN REDIRECT BACK TO WHERE THE BUTTON WAS CLICKED--> 
    </body> 
</html>

私は、「ビュー」部分からPHP部分を分離する必要があることを理解しています。だから私の質問は...どのようにボタンをロードGIFを表示させるか...何らかの方法で私はサーバー側からPHPスクリプトを実行します。

私も試してみた：

<script type="text/javascript"> 
$('#buttonid').click(function(){ 
    $('.loader').show(); 
    $.ajax({ 
    type: 'POST', 
    url: 'script.php', 
    success:function(result){ 
     $('.loader').hide(); 
    } 
} 
</script>

をしかし、それはどちらか動作していないです。私はスクリプトのリダイレクトを無効にして、実行が終了すると、私が呼び出したものに残るのではなく、そのページに移動します。

出典

2017-01-25 Nikko Clavaguera

Ajax。インターネット上には多くのチュートリアルがあります。いくつかの研究を行います。 –

あなたが表示するJavascriptはうまくいき、正しいアプローチです。リダイレクトしないでください。他のJSは含めないでください。

スクリプトのリダイレクトを無効にして、実行が終了すると、呼び出し元のページのままではなく、そのページに移動します。

あなたのボタンをクリックすると、script.phpに送信されます。ボタンHTMLは含まれていませんが、あなたのボタンは<form>の中にあると思います。あなたがそれをクリックすると、あなたのjQuery clickハンドラが起動されますが、Javascriptをまったく持っていない場合と同様に、フォームが送信されています。それはscript.phpに送られます。これはあなたが見ているものです。

Javascriptハンドラのみが起動されるように、デフォルトのフォーム送信を停止する必要があります。あなたは次のようにそれを行うことができます：

// Event handlers are passed an event object as a parameter 
$('#buttonid').click(function(e){ 

    // Prevent the normal action this event would cause, in this case 
    // submitting the form 
    e.preventDefault(); 

    // ... continue with the rest of your code 
    $('.loader').show();

さらに詳しい情報はthe jQuery docsです。

出典

2017-01-25 22:34:40

PHPスクリプトを実行しているときにイメージを表示する

答えて

関連する問題