我遇到了以这种形式实现loader gif的问题,我的表单正在提交到另一个页面,即处理器页面。这是代码:
形式:
<form name="myform" id="myform" action="" method="POST">
<!-- The Name form field -->
<div align='center'>
<form name="myform" id="myform" action="" method="POST">
<!-- The Name form field -->
<font face='candara' size='3' color='#6382A1'>Ime ili prezime:</font>
<input type="text" name="name" id="name" value="">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#myform").validate({
debug: false,
rules: {
name: "required",
},
messages: {
name: "Unesite podatke.",
},
submitHandler: function(form) {
// do other stuff for a valid form
$.post('process.php', $("#myform").serialize(), function(data) {
$('#results').html(data);
});
}
});
});
</script>
<style>
label.error { width: 250px; display: inline; color: red; font-family:candara;}
</style>
<!-- We will output the results from process.php here -->
<br><div id="results"></div>
所以我想知道在搜索结果之前显示加载程序gif的位置和方法?
这是加载程序gif:
<!--LOADER!-->
<br><div id="loadingGif" style="display:none; background: url(slike_izgled/transparent_loader.png);" align="center"><img src='ajax-loader.gif'>
<br><font face='candara' size='3'><b>Pretražujem bazu podataka, molim pricekajte...</b></font></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script>
$("form").submit(function(e) {
//e.preventDefault();
$("#loadingGif").show();
});
</script>
<!--LOADER END!-->
答案 0 :(得分:1)
$.ajax
代替$.post
,您将能够使用beforeSend
$.ajax({
type : 'post',
url : 'your url',
data : 'your data',
beforeSend : function(){
$('#loadingGif').show();
},
success : function(data){
$('#loadingGif').hide();
// do your stuff here
}
});