如何显示加载程序动画3秒,然后处理process.php?我在ajaxStart块和ajaxStop块中用setTimeout()方法尝试过,但没有用。
<script type="text/javascript">
$(document).ready(function(){
$('#loading')
.hide() // hide it initially
.ajaxStart(function() {
$(this).show();
})
.ajaxStop(function() {
$(this).hide();
});
$("#myform").validate({
debug: false,
rules: {
name: "required",
email: {
required: true,
email: true
}
},
messages: {
name: "Please let us know who you are.",
email: "A valid email will help us get in touch with you.",
},
submitHandler: function(form) {
// do other stuff for a valid form
$.post('process.php', $("#myform").serialize(), function(data) {
$('#results').html(data);
});
}
});
});
</script>
这是表格:
<form name="myform" id="myform" action="" method="POST">
<!-- The Name form field -->
<label for="name" id="name_label">Name</label>
<input type="text" name="name" id="name" size="30" value=""/>
<br>
<!-- The Email form field -->
<label for="email" id="email_label">Email</label>
<input type="text" name="email" id="email" size="30" value=""/>
<br>
<!-- The Submit button -->
<input type="submit" name="submit" value="Submit">
</form>
<!-- We will output the results from process.php here -->
<div id="results"><div>
<div id="loading">Loading</div>
这是我的一个脚本的摘要。
$(document).ready(function() {
$.ajaxSetup ({
cache: false
});
$("#header-ajaxload").ajaxStart(function() {
$(this).html(ajax_load);
});
$("#header-ajaxload").ajaxStop(function() {
$(this).html('');
});
$("#header-ajaxload").ajaxError(function() {
$(this).text( "Triggered ajaxError handler." );
});
});
var ajax_load = "<img src='home/img/ajax_load.gif' alt='loading...' />";