我使用jQuery和PHP将用户输入的内容保存到数据库中。当PHP正在做它的事情时，我想显示一个加载的GIF图像，只是为了表明它正在保存他们的数据。我意识到它运行代码可能需要那么长的时间，所以如果它比花费的时间更少，我希望能够显示图像至少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中，显示加载程序
- 成功删除加载程序