javascript - 使用 jquery/ajax 显示加载图像

Question

我试图在 ajax 调用完成时显示旋转图像。我正在使用以下 jsp 和 jquery 代码，但它不起作用。任何帮助将不胜感激jsp:

<div class="tab-content" id="rdfTabs">
            <div id="data">
                <p>Please enter dataset URL or absolute file location (e.g: c:\data\dbpedia.rdf)</p>
                <table width="100%">
                    <tr>
                        <td colspan="2"><input name="txtDataSource" id="txtDataSource" type="text" class="textbox"/>
                        <input type="button" value="Analyse File"
                            name="btnAnalyseFile" id="btnAnalyseFile" class="btn-blue" /></td>

                    </tr>

                </table>
                **<div id="loadingImage" style="display:none">
                    <img src="http://preloaders.net/preloaders/287/Filling%20broken%20ring.gif">
                </div>**
                <p id="presult">
            </div>

这是 jquery 代码

$(document).ready(function()
        {
            $("#presult").hide();
            $("#btnAnalyseFile").click(
                    function(e)
                    {
                        **$("#loadingImage").show();**
                        $.ajax({
                            url : 'CreatePatternServlet',
                            type : 'POST',
                            dataType : 'json',
                            data : $("#formCreatePattern").serialize(),
                            success : function(data)
                            {   
                                if(data.analyseResult==true){
                                var predicates = {};
                                var objectList = {};
                                var ddlSubject = $('#ddlSubject');
                                var ddlPredicate = $('#ddlPredicate');
                                var ddlObject = $('#ddlObject');
                                var ddlClass = $('#ddlClass');
                                $.each(data.Subjects, function(key, value)
                                {
                                    ddlSubject.append($('<option></option>')
                                            .val(value).html(key));
                                });
                                $.each(data.Classes, function(key, value)
                                {
                                    ddlClass.append($('<option></option>')
                                            .val(value).html(key));

                                });
                                $.each(data.Predicates, function(key, value)
                                {
                                    ddlPredicate.append($('<option></option>')
                                            .val(value).html(key));
                                });
                                $.each(data.Objects, function(key, value)
                                        {

                                            ddlObject.append($('<option></option>')
                                                    .val(value).html(key));
                                        });
                                $('#ddlSubject').filterByText(
                                        $('#txtSearchSubject'));
                                $('#ddlPredicate').filterByText(
                                        $('#txtSearchPredicate'));
                                $('#ddlObject').filterByText(
                                        $('#txtSearchObject'));
                                $('#ddlClass').filterByText(
                                        $('#txtSearchClass'));

                                $("#presult").html("Data uploaded successfully");
                                $("#presult").css("color","green");
                                $("#presult").fadeIn(500);
                                }
                                else{
                                    $("#presult").html("Upload failed, please check file path or URL. Server returned error: "+data.result);
                                    $("#presult").css("color","red");
                                    $("#presult").fadeIn(500);
                                }

                            }
                        });
                        **$('#loadingImage').hide();**
                        return false;
                    });
        });

Answer 1

问题是您的ajax函数是异步的，因此您显示加载程序，触发ajax并立即隐藏加载程序，而不等待请求结束。

简单的修复方法是将 $('#loadingImage').hide(); 放入 success 函数中，但最好添加一个 did 函数以防失败