0

I am using jQuery and PHP to save content that the user inputs in a database. While the PHP is doing its thing I want to show a loading GIF image just to show that it is saving their data. I realize that it probably does take that long for it to run the code so i want to be able to show the image for at least 1 second if it takes less time than that

4

1 に答える 1

1

たとえば、次のスクリプトをデータベースのライブ検索フォームとして使用しています。
ユーザーが文字を入力すると、スクリプトはその名前の学生がデータベースに存在するかどうかを検索します。

ファイルindex.php

<head>
//call to jquery.js
<script type='text/javascript'>
$(document).ready( function() {
 $('#q').keyup( function(){
  $field = $(this);
  $('#results').html('');
  $('#ajax-loader_e').remove();

  if( $field.val().length > 1 )
  {
    var str='q='+$(this).val();
    $.ajax({
      type : 'GET',
      url : 'ajax_search.php' ,
      data : str ,
      beforeSend : function() {
       $field.after('<img src="../img/ajax-loader.gif" alt="loader" id="ajax-loader_e" />');
      },
      success : function(data){
        $('#ajax-loader_e').remove();
        $('#results').html(data);
      }
    });//end ajax
  }//end if     
 });//end keyup
});//end ready
</script>
</head>
<body>
<form class="quick_search">
  <input type="text" value="Name" id="q" name="q" onfocus="if(!this._haschanged){this.value=''};this._haschanged=true;">
</form>
<div id="results_e"></div>

ファイル ajax_search.php

if(isset($_GET['q'])){
  $nom='%'.safe($_GET['q']).'%';
  $req=$connexion->prepare("SELECT * FROM students WHERE name LIKE :name LIMIT 0,10 ");
  $req->execute(array('name'=>$name));
  echo "<ul>";
  while($row=$req->fetch(PDO::FETCH_ASSOC)){
    if(empty($row)){
      echo "<h4 class='alert_error'>No one with that name!</h4>";
    }
    else{
      echo "<li><strong><a href='?id=".$row['id']."'>".clean($row['nom']).' '.clean($row['prenom'])."</a></strong></li>";
    }
  }
  echo "</ul>";
}

そのスクリプトを使用して、ajax 経由でフォームを保存し、待機中にローダー gif を表示できます。重要な部分は次のとおりです。

  • 最初にローダーを削除します
  • beforeSend でローダーを表示する
  • ローダーの削除に成功
于 2012-07-24T10:01:06.387 に答える