0

我正在使用 jQuery 和 PHP 来保存用户在数据库中输入的内容。当 PHP 正在做它的事情时，我想显示一个正在加载的 GIF 图像，只是为了表明它正在保存他们的数据。我意识到它运行代码可能确实需要很长时间，所以我希望能够显示图像至少 1 秒，如果它需要的时间少于那

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 回答