로드하는 동안 진행 표시줄을 표시하는 방법, Ajax 사용

로드하는 동안 진행 표시줄을 표시하는 방법, Ajax 사용

드롭다운 상자가 있습니다.사용자가 드롭다운 상자에서 값을 선택하면 데이터베이스에서 데이터를 가져오는 조회가 수행되고 프런트 엔드에 Ajax를 사용하여 결과가 표시됩니다.시간이 좀 걸리기 때문에 이 시간 동안 진행 표시줄을 보여드리고 싶습니다.검색을 해봤는데 업로드용 진행 표시줄 작성에 대한 튜토리얼은 많이 찾았지만 마음에 드는 튜토리얼은 없었습니다.누가 도움이 되는 안내를 해줄 수 있나요?

내 Ajax 코드:

<script>
$(function() {
    $("#client").on("change", function() {
      var clientid=$("#client").val();

        $.ajax({
            type:"post",
            url:"clientnetworkpricelist/yourfile.php",
            data:"title="+clientid,
            success:function(data){
             $("#result").html(data);
            }
        });

    });
});
</script>

이 링크에서는 jquery를 사용하여 진행률 이벤트청취자를 xhr 객체에 추가하는 방법을 설명합니다.

$.ajax({
    xhr: function() {
        var xhr = new window.XMLHttpRequest();

        // Upload progress
        xhr.upload.addEventListener("progress", function(evt){
            if (evt.lengthComputable) {
                var percentComplete = evt.loaded / evt.total;
                //Do something with upload progress
                console.log(percentComplete);
            }
       }, false);
       
       // Download progress
       xhr.addEventListener("progress", function(evt){
           if (evt.lengthComputable) {
               var percentComplete = evt.loaded / evt.total;
               // Do something with download progress
               console.log(percentComplete);
           }
       }, false);
       
       return xhr;
    },
    type: 'POST',
    url: "/",
    data: {},
    success: function(data){
        // Do something success-ish
    }
});

<script>
$(function() {
    $("#client").on("change", function() {
      var clientid=$("#client").val();
     //show the loading div here
    $.ajax({
            type:"post",
            url:"clientnetworkpricelist/yourfile.php",
        data:"title="+clientid,
        success:function(data){
             $("#result").html(data);
          //hide the loading div here
        }
    }); 
    });
});
</script>

또는 다음과 같이 할 수도 있습니다.

$(document).ajaxStart(function() {
        // show loader on start
        $("#loader").css("display","block");
    }).ajaxSuccess(function() {
        // hide loader on success
        $("#loader").css("display","none");
    });

기본적으로 이미지를 로드해야 합니다.여기에서 무료로 다운로드 할 수 있습니다.http://www.ajaxload.info/

$(function() {
    $("#client").on("change", function() {
      var clientid=$("#client").val();
      $('#loadingmessage').show();

    $.ajax({
            type:"post",
            url:"clientnetworkpricelist/yourfile.php",
        data:"title="+clientid,
        success:function(data){
             $('#loadingmessage').hide();
             $("#result").html(data);
        }
    }); 
    });
});

html 본문

<div id='loadingmessage' style='display:none'>
       <img src='img/ajax-loader.gif'/>
</div>

아마 이게 도움이 될 거야

다음은 레이저의 MVC와 Javascript를 사용한 예입니다.첫 번째 함수는 컨트롤러의 Ajax를 통해 액션을 호출하고 두 개의 파라미터를 전달합니다.

        function redirectToAction(var1, var2)
        {
            try{

                var url = '../actionnameinsamecontroller/' + routeId;

                $.ajax({
                    type: "GET",
                    url: url,
                    data: { param1: var1, param2: var2 },
                    dataType: 'html',
                    success: function(){
                    },
                    error: function(xhr, ajaxOptions, thrownError){
                        alert(error);
                    }
                });

            }
            catch(err)
            {
                alert(err.message);
            }
        }

ajaxStart를 사용하여 진행률 바코드를 시작합니다.

           $(document).ajaxStart(function(){
            try
            {
                // showing a modal
                $("#progressDialog").modal();

                var i = 0;
                var timeout = 750;

                (function progressbar()
                {
                    i++;
                    if(i < 1000)
                    {
                        // some code to make the progress bar move in a loop with a timeout to 
                        // control the speed of the bar
                        iterateProgressBar();
                        setTimeout(progressbar, timeout);
                    }
                }
                )();
            }
            catch(err)
            {
                alert(err.message);
            }
        });

프로세스가 완료되면 진행 표시줄을 닫습니다.

        $(document).ajaxStop(function(){
            // hide the progress bar
            $("#progressDialog").modal('hide');
        });

$(document).ready(function () { 
 $(document).ajaxStart(function () {
        $('#wait').show();
    });
    $(document).ajaxStop(function () {
        $('#wait').hide();
    });
    $(document).ajaxError(function () {
        $('#wait').hide();
    });   
});

<div id="wait" style="display: none; width: 100%; height: 100%; top: 100px; left: 0px; position: fixed; z-index: 10000; text-align: center;">
            <img src="../images/loading_blue2.gif" width="45" height="45" alt="Loading..." style="position: fixed; top: 50%; left: 50%;" />
</div>

가장 우아한 충전을 하기 위해 경과표시 바를 표시하는 방법을 많이 찾아봤지만, 제 목적에 맞는 방법을 찾을 수 없었습니다.demaziado complex로 표시된 요청의 실제 상태를 확인하고, 때로는 작동하지 않는 조각이 매우 간단한 방법으로 작성되기도 하지만, 이 방법을 통해 코드를 찾을 수 있는(또는 거의) 경험을 얻을 수 있습니다.

$.ajax({
    type : 'GET',
    url : url,
    dataType: 'html',
    timeout: 10000,
    beforeSend: function(){
        $('.my-box').html('<div class="progress"><div class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"></div></div>');
        $('.progress-bar').animate({width: "30%"}, 100);
    },
    success: function(data){  
        if(data == 'Unauthorized.'){
            location.href = 'logout';
        }else{
            $('.progress-bar').animate({width: "100%"}, 100);
            setTimeout(function(){
                $('.progress-bar').css({width: "100%"});
                setTimeout(function(){
                    $('.my-box').html(data);
                }, 100);
            }, 500);
        }
    },
    error: function(request, status, err) {
        alert((status == "timeout") ? "Timeout" : "error: " + request + status + err);
    }
});

이 솔루션에 대해 이미 많은 답변이 작성되어 있는 것을 알고 있습니다만, 코드에 CSS 또는 Gif 이미지에 의존하지 않고 JS 파일 하나만 포함하면 되며, Ajax Request 중에 발생하는 모든 진행 표시줄 관련 애니메이션을 처리할 수 있는 다른 Javascript 메서드(JQuery에 의존함)를 보여드리고 싶습니다.이렇게 javascript 함수를 간단히 통과해야 합니다.

var objGlobalEvent = new RegisterGlobalEvents(true, "");

여기 코드의 작동용 바이올린이 있습니다.https://jsfiddle.net/vibs2006/c7wukc41/3/

이렇게 했어요.

CSS

html {
    -webkit-transition: background-color 1s;
    transition: background-color 1s;
}
html, body {
    /* For the loading indicator to be vertically centered ensure */
    /* the html and body elements take up the full viewport */
    min-height: 100%;
}
html.loading {
    /* Replace #333 with the background-color of your choice */
    /* Replace loading.gif with the loading image of your choice */
    background: #333 url('/Images/loading.gif') no-repeat 50% 50%;

    /* Ensures that the transition only runs in one direction */
    -webkit-transition: background-color 0;
    transition: background-color 0;
}
body {
    -webkit-transition: opacity 1s ease-in;
    transition: opacity 1s ease-in;
}
html.loading body {
    /* Make the contents of the body opaque during loading */
    opacity: 0;

    /* Ensures that the transition only runs in one direction */
    -webkit-transition: opacity 0;
    transition: opacity 0;
}

JS

$(document).ready(function () {
   $(document).ajaxStart(function () {     
       $("html").addClass("loading");
    });
    $(document).ajaxStop(function () {        
        $("html").removeClass("loading");
    });
    $(document).ajaxError(function () {       
        $("html").removeClass("loading");
    }); 
});

저는 이게 더 간단하고 유용해서 주로 써요.

<input id="datainput" type="text">
<div id="result"></div>
<button id="examplebutton"></button>
<script>
    $("#examplebutton").click(function(){
        let data=$("#datainput").val(); 
        $("#result").html("Please Wait..");  // it starts working when the button is clicked
        
        $.ajax({
            url:"../ajax/xyz.php",
            type:"POST",
            data:{data:data},
            success:function(result)
            {
                $("#result").html(result);  // When the data comes, the text will be deleted and the data will come.
            }
        });
    });
</script>

이것을 시도해 보세요. 당신에게 도움이 될 것입니다.

 $.ajax({
  type:"post",
            url:"clientnetworkpricelist/yourfile.php",
        data:"title="+clientid,
  beforeSend: function(  ) {
    // load your loading fiel here
  }
})
  .done(function( data ) {
    //hide your loading file here
  });

이건 분명히 효과가 있을 거야.
자, 갑니다...

function yourFunction(){
    
    setTimeout(function(){
        $('#loading').show();
        
        setTimeout(function(){
            //your ajax code goes here...
            $('#loading').hide();           
        }, 500);

    }, 300);
}    

필요에 따라 진행 표시줄에 css를 설정할 수 있습니다.기본적으로 이 div를 숨깁니다.

<div id="loading">
    <img id="loading-image" src="img-src" alt="Loading..." />
</div>

언급URL : https://stackoverflow.com/questions/20095002/how-to-show-progress-bar-while-loading-using-ajax