Mysql
 sql >> Base de données >  >> RDS >> Mysql

Afficher la barre de progression pendant que le script php s'exécute via ajax

Je vais vous donner le chemin selon Quel est le moyen le plus propre d'obtenir la progression d'une requête JQuery ajax ?

JQuery

$(function() 
{
    $("#submit").click(function() 
    {
        var titlee = $("#titlee").val();
        var wtag = $("#wtag").val();

        var dataString = 'titlee='+ titlee + '&wtag=' + wtag ;

        $.ajax({
            xhr: function () {
                var xhr = new window.XMLHttpRequest();
                xhr.upload.addEventListener("progress", function (evt) {
                    if (evt.lengthComputable) {
                        if (evt.lengthComputable) {
                            var percentComplete = evt.loaded / evt.total;
                            console.log(percentComplete);
                            $('.progress').css({
                                width: percentComplete * 100 + '%'
                            });
                            if (percentComplete === 1) {
                                $('.progress').addClass('hide');
                            }
                        }
                    }
                }, false);

                xhr.addEventListener("progress", function (evt) {
                    if (evt.lengthComputable) {
                        var percentComplete = evt.loaded / evt.total;
                        console.log(percentComplete);
                        $('.progress').css({
                            width: percentComplete * 100 + '%'
                        });
                    }
                }, false);

                return xhr;
            },
            type: 'POST',
            url: "c_insert_test.php",
            data: dataString,
            success: function (data) {
                //Do something on success
            }
        });

        return false;
    });
});

CSS

.progress {
    display: block;
    text-align: center;
    width: 0;
    height: 3px;
    background: red;
    transition: width .3s;
}
.progress.hide {
    opacity: 0;
    transition: opacity 1.3s;
}

Cela peut être une bonne solution pour ce faire.