再次出现小(或大)问题
我使用的是一个简单的html表单,在提交操作时调用php(邮件)脚本。。现在这个脚本需要一段时间才能完成,因为在发送另一封邮件之前有一些时间限制。。我希望它加载一个空白页面,或者至少在循环之前显示所有内容。。但它没有,相反,它有点"挂起"在表单上(尽管你可以在浏览器栏中看到脚本的url正在加载),一旦脚本完成,它就会加载页面上的所有输出。。所以我开始研究如何制作这个加载图像的方法。。或者至少让用户知道发生了什么事情,并且脚本正在运行。
我在stackover流上看到了一些东西,并包含了这个,它本应显示提交按钮所在的加载图像,但我认为它不起作用,因为它不再加载带有表单的页面。。但是运行php循环,尽管我无论如何都会让你看到它,希望。。什么:
$('#loading_image').show(); // show loading image, as request is about to start
$.ajax({
url: '..',
type: '..',
complete: function() {
// request is complete, regardless of error or success, so hide image
$('#loading_image').hide();
}
});
$('#myform').submit(function() {
$('#loading_image').show(); // show animation
return true; // allow regular form submission
});
和我的表格
<form method="post" action="sendeveryone.php" id="myform" onReset="return confirm('Do you really want to reset the form?')">
<fieldset>
Please note: All e-mails start with "Dear {MEMBER_NAME}, " If you would like to mention their username in the body of your email, all you have to do is type '{MEMBER_NAME}' and it will replace it to their username.<br><br>
<br>
<label class="control-label" for="subject">Subject</label>
<input id="subject" name="subject" class="span5" type="text">
<label class="control-label" for="body">Body</label>
<div class="row-fluid">
<div class="utopia-widget-content-nopadding">
<div class="span12 text-editor">
<textarea id="input" name="input"></textarea>
</div>
</div>
</div>
<br><img src="myloadingimage.gif" style="display: none;" id="loading_image">
<button class="btn btn-large btn-primary span5" type="submit">Send</button>
<button class="btn btn-large span5" type="reset">Cancel</button>
</fieldset>
</form>
您可以将.ajaxStart()
和.ajaxStop()
方法与jQuery 一起使用
$('.log').ajaxStart(function() {
$(this).text('Triggered ajaxStart handler.');
});