Question

再次出现小问题（或大问题）

我正在使用一个简单的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>

Answer 1

您可以将.ajaxStart()和.ajaxStop()方法与jQuery

一起使用

$('.log').ajaxStart(function() {
    $(this).text('Triggered ajaxStart handler.');
});

在加载php脚本时显示加载图像

1 个答案: