Question

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

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

Answer 1

1-使用“display：none”样式属性准备客户端div。把你的加载图像放在里面。

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

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

Answer 2

我想了解一下推荐的方法

那么，这取决于你在做什么，你正在更新表单的哪些部分，表单有多大，你发送给服务器的值是什么。

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

但是，如果要异步更新整个表单（具有大量控件），则可能正确使用UpdatePanel。像GridView这样的东西是UpdatePanel的一个很好的例子（因为你通常需要异步处理编辑，绑定和分页）。

使用以下代码轻松完成进度图像：

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

将其粘贴在UpdatePanel中，无论何时进行AJAX调用，都会显示加载图像。

HTH

Answer 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/

Answer 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只是一个普通的表单，里面有一个image / div，类为loader

通过AJAX提交表单并加载进度？

4 个答案: