当文本框 textchange 事件发生时，我想在 asp.net 中使用 jquery 显示一个圆形进度指示器答案

【问题标题】：I want to display a circular progress indicator using jquery in asp.net when textbox textchange event occurs当文本框 textchange 事件发生时，我想在 asp.net 中使用 jquery 显示一个圆形进度指示器
【发布时间】：2010-06-24 14:40:00
【问题描述】：

当文本框 textchange 事件发生时，我想在 asp.net 中使用 jquery 显示一个圆形进度指示器。当用户在文本框中输入某个值并发生 textchange 事件或当用户失去对该文本框的关注时，系统会检查数据库中的值。我想在查询进行时为用户提供进度指示器类型。

我怎样才能用 jquery 做到这一点？

代码在这里：

 $("#Txturl").blur(function() { 
  $.ajax({
        type: "POST",
        url: "Default.aspx/Getvalue",
        data: "{}",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        async: true,


        success: function(msg) {                  
            ///to to do here? i ve no idea;                    
        }
  });
  return false;
});

【问题讨论】：

这是一个 ajax 应用程序吗？您想在文本框失去焦点时发送更新数据库的请求，还是想在页面加载时加载预定义的值列表？
我想根据文本框中输入的值检查数据库中的值。（我没有显示它）我已经编写了用于值匹配的函数。我只关心 Jquery 、进度指示器以及当值匹配时如何停止或隐藏指示器。

标签： asp.net jquery

【解决方案1】：

这相对简单。您将首先为您的指标创建动画 GIF（或下载免费的）并将其添加到您的站点。然后在您的 Javascript 中，您将添加类似于以下内容的内容：

$('#yourTextBox').change(
    function(){
        $("#yourProgressImg").show(); 
        $.ajax({
            type : "get",
            url : <your request uri>,
            success: <what to do if it comes back happy>
            fail: <what to do if it fails>
            complete: function(){ $("#yourProgressImg").hide(); }
        });
     }
);

$.ajax()函数的完整功能在这里：http://api.jquery.com/jQuery.ajax/

【讨论】：

谢谢。我会试试的。实际上我是 jquery 的新手，想离开更新面板。

【解决方案2】：

不确定其他网站是如何做到的，但我会在 textchange 事件上显示动画 GIF 并将其隐藏在 AJAX 成功（或失败）函数中。

为您的动画 GIF 隐藏一个 div。

<style>.hidden { display: none; }</style>
<div class="hidden"><img src="spinner.gif" /></div>

然后在更改时显示它并在成功或错误回调中隐藏它。

$('#mytextbox').change(function(){
    $('#divwithGIF').show();
    $.ajax({
        type: 'POST',
        url: 'Default.aspx/Getvalue',
        data: '{}',
        contentType: 'application/json; charset=utf-8',
        dataType: 'json',
        async: true,
        complete: function(msg){
            $('#divwithGIF').hide();
        };
    });
});

对 blur() 事件重复。

【讨论】：

【解决方案3】：

请参阅我对此的回答：jquery submit and loading gif，了解如何为 ajax 构建全局（页面上）事件监视器以显示您所描述的动画 gif。您可以根据自己的需要自定义活动。

【讨论】：