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();置于成功函数中，但最好在失败时添加完成函数

Answer 2

$("#btnAnalyseFile").click(function() etc...

shoudn不是

$("#btnAnalyseFile").on("click", function() { etc...

使用jquery / ajax显示加载图像

2 个答案: