如何：在 js 验证后显示处理 img答案

【问题标题】：How to: After js validation showing processing img如何：在 js 验证后显示处理 img
【发布时间】：2011-06-08 15:07:01
【问题描述】：

我试图在成功提交后显示处理图像，并由 gen_validatorv4.js 验证。

问题是 formdata 将发送到一个 php 文件，该文件将数据发布到谷歌电子表格。这需要 3-10 秒，所以人们再次点击提交按钮。这就是为什么我想要一个处理图像。任何想法如何做到这一点？

$(document).ready(function(){ $('#ajax_loading').show();}

??????

或者欢迎任何帮助！

【问题讨论】：

在通过 ajax 发布之前（例如 click(function() { }) 或 submit(function(){ })），加载容器并显示加载图像，成功后：function(data) { / *删除加载图像*/ }

标签： php javascript jquery ajax validation

【解决方案1】：

将点击事件绑定到提交按钮，并在点击事件中显示 ajax_loading 图像。隐藏它的唯一方法是在您收到响应事件时。当您收到响应时，您可以隐藏 ajax_loading 图像。

【讨论】：

【解决方案2】：

对于这些问题，我是 jQuery 的粉丝，您可以尝试 jQuery NimbleLoader 加载图像，我还建议尝试 how to enable/disable an element using jQuery 启用或禁用表单以防止重复提交。

【讨论】：

【解决方案3】：

访问此站点：http://www.ajaxload.info/ 并为自己生成一张图片。

假设图像被称为 loader.gif

如果你的表格是这样的<form id="myform"> 您的 jquery 将如下所示：

$('#myform').submit(function(){
       $('#myform').prepend("<div id=\"loader\"></div>");
       ... do stuff here ...
        $('#loader').remove();
})

你将拥有这个 CSS：

#loader {
    position: absolute;
    z-index: 100;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    background: url("loader.gif") no-repeat center center;
}

【讨论】：