Question

我想在进程SOAP调用期间显示“请等待，加载”旋转圈。我在Google Chrome和Internet Explorer 9,10,11中显示模态屏幕时遇到问题。 Firefox还可以。

如果我从$("body").removeClass("loading");删除someMethodSOAP()，则在Google Chrome和IE中加载屏幕显示正确。

SOAP调用的持续时间是一秒，因此应该显示加载屏幕。

我想在Google Chrome和IE中显示加载屏幕，但我不知道该怎么做？为什么Firefox浏览器工作正常，谷歌Chrome和IE没有？

我用：
[jQuery 2.1.1] [http://code.jquery.com/jquery-2.1.1.js]
[jquery.soap 1.3.8] [http://plugins.jquery.com/soap/]
[模态窗口解决方案来自：[How can I create a "Please Wait, Loading..." animation using jQuery?]

谢谢。

我的代码：

的index.php ：

<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">

<style type="text/css">
    .modal {
    display:    none;
    position:   fixed;
    z-index:    1000;
    top:        0;
    left:       0;
    height:     100%;
    width:      100%;
    }

    /* When the body has the loading class, we turn
       the scrollbar off with overflow:hidden */
    body.loading {
        overflow: hidden;   
    }

    /* Anytime the body has the loading class, our
       modal element will be visible */
    body.loading .modal {
        display: block;
    }

    div.modal div {
        position: absolute;
        top:50%;            
        left:50%;            
        width: 20%;            
        height: 10%;        
        margin:-5% 0 0 -10%;    
        text-align: center;
    }
</style>

<script charset="UTF-8" src="jquery-2.1.0.min.js"></script>
<script charset="UTF-8" src="jquery.soap.js"></script>

<script>
    var WEB_SERVICE_URL = 'path to SOAP';

    function someMethodSOAP(id) {
        var xml;
        $.soap({
            url: WEB_SERVICE_URL,
            method: "testMethod",
            appendMethodToURL:false,
            async: false,
            data: {
                ID: id,
            },
            beforeSend: function (SOAPEnvelope)  {
                $("body").addClass("loading");            //loading turn on
            },
            success: function (soapResponse) {            //OK
                xml = soapResponse.toString();
            },
            error: function (SOAPResponse) {            //FAULT:
                xml = SOAPResponse.toString();
            }
        });

        $("body").removeClass("loading");                //loading turn off

        return xml;
    }

    $(window).load(function() {
        /*$("body").addClass("loading");
        $("body").removeClass("loading");*/

        someMetodSOAP(1);
    });
</script>

</head>
<body>
    <div class="modal"> <!-- loading-->
        <div>
            <img src="http://i.stack.imgur.com/FhHRx.gif'">
        </div>
    </div>
</body>
</html>

修改
我尝试这个代码（下面），但仍然没有工作。
行为：方法test_loading服务器上的CALL方法，在5秒内完成。此代码等待（async：false）5秒，并在web浏览器显示加载后。我不明白。加载在someMetodSOAP(5);完成后显示，但我想在someMetodSOAP(5);之前显示加载。

<script>
    $(window).load(function() {

        $("body").addClass("loading");

        someMetodSOAP(5);

        //$("body").removeClass("loading");
    });

    var WEB_SERVICE_URL = '../soap_nu.php';

    function someMetodSOAP(second) {

        var xml;
        $.soap({
            url: WEB_SERVICE_URL,
            method: "test_loading",
            appendMethodToURL:false,
            async: false,
            data: {
                parametr: second
            },
            beforeSend: function (SOAPEnvelope)  {
            },
            success: function (soapResponse) {
                xml = soapResponse.toString();
            },
            error: function (SOAPResponse) {
                xml = SOAPResponse.toString();
            }
        });

        return xml;
    }
</script>

解决： 我找到了deffered-object：api.jquery.com/category/deferred-object/（我没有这个链接的声誉，抱歉。）。它帮助我。我希望能帮到你：

<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">

<style type="text/css">
    .block {display: block !important}
    #loading {
        display: none;
        /*etc. for example css spinner*/
    }
</style>

<script charset="UTF-8" src="jquery.min.js"></script>
<script charset="UTF-8" src="jquery.soap.js"></script>

<script>
    var WEB_SERVICE_URL = 'path to SOAP';

    function someMethodSOAP(id){
        var d = $.Deferred();

        $.soap({
            url: WEB_SERVICE_URL,
            method: "testMethod",
            appendMethodToURL:false,
            async: true,
            data: {
                ID: id,
            },
            success: function (soapResponse) {      //SOAP OK
                try {
                    d.resolve(soapResponse.toString());
                } catch(e){
                    d.reject(SOAP_THROW);
                }
            },
            error: function (soapResponse) {        //SOAP FAULT:
                try {
                    d.reject(soapResponse.toString());
                } catch(e){
                    d.reject(SOAP_THROW);
                }
            }
        });

        return d.promise();
    }

    $(window).load(function() {
        //create some promises
        var promises = new Array();
        promises.push(someMethodSOAP(1));   //only one promise

        $("#loading").addClass("block");        //start loading
        $.when.apply($, promises).done(function(xml){   //Resolve
            $("#loading").removeClass("block"); //finish loading
            /*PASS*/
        }).fail(function(xml){                          //Reject
            $("#loading").removeClass("block"); //finish loading
            /*FAIL*/
        });
    });
</script>

</head>
<body>
    <div id="loading"> <!--loading-->
        <div><!-- css spinner --></div>
    </div>
</body>
</html>

Answer 1

您需要删除async: false，然后才能正常工作。

Answer 2

您只需在呼叫完成后删除loading课程。一旦呼叫完成并收到响应，它就会执行成功/失败功能。试试这个。

$.soap({
        url: WEB_SERVICE_URL,
        method: "testMethod",
        appendMethodToURL:false,
        async: false,
        data: {
            ID: id,
        },
        beforeSend: function (SOAPEnvelope)  {
            $("body").addClass("loading");            //loading turn on
        },
        success: function (soapResponse) {            //OK
            xml = soapResponse.toString();
            $("body").removeClass("loading");  
        },
        error: function (SOAPResponse) {            //FAULT:
            xml = SOAPResponse.toString();
            $("body").removeClass("loading");  
        }
});

显示模态加载div未在谷歌浏览器和IE浏览器中运行，Firefox也可以

2 个答案: