通过 AJAX 提交表单并显示加载进度？答案

【问题标题】：Submit form via AJAX with loading progress?通过 AJAX 提交表单并显示加载进度？
【发布时间】：2010-09-20 11:24:06
【问题描述】：

只需要有关如何制作通过 AJAX 提交请求并带有加载进度图像的表单的提示。我正在使用带有 AJAX 框架的更新面板。我想知道推荐的方法。通过 JQuery 或 AJAX 工具包？

请提供建议，示例对我来说是一个额外的好处。

【问题讨论】：

标签： asp.net jquery asp.net-ajax

【解决方案1】：

1- 准备一个带有“display:none”样式属性的客户端 div。把你的加载图像放在里面。

2 - 当用户或页面提交请求时，将 div 显示属性更改为“阻止”。

3- 在响应中添加某种“收到信息”标志并从客户端检查此响应，然后将 div 显示属性更改回“无”

【讨论】：

我认为这不会阻止制表符和空格键。

【解决方案2】：

我想知道推荐方法

嗯，这取决于您在做什么，您要更新表单的哪些部分，表单有多大，您要向服务器发送什么值。

一般来说，如果你想更新一些简单的东西（下拉列表、列表框等），你通常会使用 JavaScript（或 jQuery）来调用支持 AJAX 的 Web 服务。这样，您只需向服务器发送它需要的数据，诸如 ViewState/cookies 之类的东西不会通过网络发送。您还可以完全控制执行前/执行后的事件（因此您可以添加加载图像、调用 WS，然后清除它们）。

但是，如果您想异步更新整个表单（其中有很多控件），您可能使用 UpdatePanel 是正确的。 GridView 之类的东西非常适合 UpdatePanel（因为您通常需要异步处理编辑、绑定和分页）。

使用以下代码可以轻松制作进度图像：

<ProgressTemplate>
   <img src="someloadingimage.gif" alt="Loading" />
</ProgressTemplate>

把它贴在你的 UpdatePanel 中，每当调用 AJAX 时，就会显示加载图像。

HTH

【讨论】：

谢谢 RPM1984。您的回复非常详细，对我帮助很大。我将采用第二种方法（使用大量网格视图/下拉列表等更新整个表单）。我想 JQuery 和 updatepanel 的一点混合将解决我的问题。
您知道如何在导致回发的按钮旁边显示进度图像吗？我的更新面板中有很多按钮，每个按钮都会触发一个单独的事件，我想在引发事件的按钮旁边显示图像。
@Popo - 这是一个示例，当您想要“调整它”时，UpdatePanel 并不是那么好。 =) 不幸的是，ProgressTemplate 会在任何时候显示图像，异步更新已经发生（不管是谁触发了它）。如果您想自定义哪个按钮显示加载图像，您需要使用 javascript 来完成。看看我发布的一个问题：stackoverflow.com/questions/3571173/…。我找出“哪个更新面板触发了回发”-您需要找出“哪个按钮触发了回发”

【解决方案3】：

如果您使用 JQuery 进行 AJAX 请求，那么您可以使用以下事件 -

$.ajax({ url: "test.html",
 type: "GET",
 beforeSend: function(){
             -----load your loader here-----
             });,
 success: function(){
      ------remove your loader here -----------  
      Remaining code
      }});

您也可以使用 POST。在上面的示例中，我使用了 GET。

有关详细文档，您可以参考 - http://api.jquery.com/jQuery.ajax/

【讨论】：

【解决方案4】：

像这样为你的加载器创建一个小插件。

$.fn.ShowLoader = function(on){
    switch(on)
    {
        case true:
            $(this).show();
        break;
        default:
            $(this).hide();
        break;
    }
}

然后使用以下内容：

$('form').submit(function(){
    var Form = $(this);

    $('.loader',Form).ShowLoader(true);

    //Gather some params
    Location = Form.attr('src');
    Data = Form.Serialize();

    $.post(Location,Data,function(result){
        result = result || false;
        if(result)
        {
             $('.loader',Form).ShowLoader(false); //Disable the loader
             //Process result
        }
    });
})

html 只是一个常规形式，里面有一个图像/div，类为loader

【讨论】：