当前位置: 首页 > 面试题库 >

在AngularJS中的$ http请求期间显示微调框G​​IF?

欧阳高昂
2023-03-14
问题内容

我正在使用$httpAngularJS 的服务来发出Ajax请求。

在执行Ajax请求时如何显示微调器GIF(或其他类型的忙碌指示器)?

ajaxstartevent在AngularJS文档中看不到任何类似的内容。


问题答案:

这是 当前 过去的AngularJS咒语:

angular.module('SharedServices', [])
    .config(function ($httpProvider) {
        $httpProvider.responseInterceptors.push('myHttpInterceptor');
        var spinnerFunction = function (data, headersGetter) {
            // todo start the spinner here
            //alert('start spinner');
            $('#mydiv').show();
            return data;
        };
        $httpProvider.defaults.transformRequest.push(spinnerFunction);
    })
// register the interceptor as a service, intercepts ALL angular ajax http calls
    .factory('myHttpInterceptor', function ($q, $window) {
        return function (promise) {
            return promise.then(function (response) {
                // do something on success
                // todo hide the spinner
                //alert('stop spinner');
                $('#mydiv').hide();
                return response;

            }, function (response) {
                // do something on error
                // todo hide the spinner
                //alert('stop spinner');
                $('#mydiv').hide();
                return $q.reject(response);
            });
        };
    });

//regular angular initialization continued below....
angular.module('myApp', [ 'myApp.directives', 'SharedServices']).
//.......

这是其余的(HTML / CSS)....使用

$('#mydiv').show(); 
$('#mydiv').hide();

切换它。 注意:以上内容在发布开始时用于角度模块

#mydiv {  
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:1000;
    background-color:grey;
    opacity: .8;
 }

.ajax-loader {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -32px; /* -1 * image width / 2 */
    margin-top: -32px;  /* -1 * image height / 2 */
    display: block;     
}

<div id="mydiv">
    <img src="lib/jQuery/images/ajax-loader.gif" class="ajax-loader"/>
</div>


 类似资料:
  • 问题内容: 我正在处理AJAX POST时需要基本的微调器或处理动画。我正在使用JQuery和Python。我查看了文档,但无法确切知道将ajaxStart和ajaxStop函数放在何处。 这是我的js: 问题答案: http://api.jquery.com/jQuery.ajax/: 这是$ .ajax()提供的回调挂钩: 调用beforeSend回调;它接收jqXHR对象和设置映射作为参数。

  • 我的angularjs$http请求有问题。当我向API发送请求时,浏览器阻止了它,如:FIREFOX中的错误:阻止加载混合活动内容“http://www.example.com/rest/default/V1/integration/admin/token/” CHROME出错:混合内容:页面位于'https://www.example.com/load.shtml#/register/pos/

  • 我以前曾成功地将Square的改版用于web API调用,但当试图在调用中以的形式发送JSON时,在服务器(Rails)上,JSON显示为参数,而不是body请求。 WebAPI: 发出web请求:

  • 问题内容: 在AngularJS中给出Ajax请求 如果启动另一个请求(相同的后端,例如不同的参数),取消该请求的最有效方法是什么? 问题答案: 此功能通过超时参数添加到1.1.5版本中:

  • 问题内容: 我有一个使用AngularJS构建的简单网站,该网站调用json数据的API。 但是我遇到了跨域起源问题,是否可以解决跨域请求? 错误: XMLHttpRequest无法加载http://api.nestoria.co.uk/api?country=uk&pretty=1&action=search_listings&place_name=soho&encoding=json&list

  • 我有一个简单的网站,我正在用AngularJS构建,它为json数据调用API。 然而,我得到跨域起源的问题,是否有任何围绕这允许跨域请求? 错误: XMLHttpRequest无法加载http://api.nestoria.co.uk/api?country=uk