php - 即使操作成功后，加载程序仍保持加载状态

Question

将图像添加到字段中时，即使该过程完成后，加载程序仍保持加载状态。我已经使用 ajax 提交了表单。我能知道无限加载的原因是什么吗？我的代码如下

  $('.port_load').waitMe({
        effect: 'win8',
        text: 'Please Wait...',
        bg: 'rgba(255,255,255,0.85)',
        color: '#000',
        maxSize: '',
        source: 'img.svg',
        onClose: function() {}
}); 

这是我提交的完整代码

  $('#port_form').submit(function(e){    
e.preventDefault();    
$('.port_load').waitMe({
        effect: 'win8',
        text: 'Please Wait...',
        bg: 'rgba(255,255,255,0.85)',
        color: '#000',
        maxSize: '',
        source: 'img.svg',
        onClose: function() {}
}); 
if($('#img1').val()!='' && $('#p_img').val()==''){//for editing
    $.ajax({
                url:'../api_fle/port',
                method:'POST',
                data:{u_id:$('#uId').val(),title:$('#p_title').val(),desc:$('#p_description').val(),
                    link:$('#img1').val(),pId:$('#p_id').val()},
                success:function(data){
                      $('.port_load').waitMe('hide');                          
                    if(data==0){
                        $('#wrng').html('<p style="text-align: center; color:red;">Something went Wrong! Try again.</p>');
                    }else{
                                $('#wrng').html('');
                                $('#myModal5').modal('hide');
                                $("#p_img").replaceWith($("#p_img").val('').clone(true));
                                $('#p_title').val('');
                                $('#p_description').val('');
                                $('#p_id').val('');
                                $('#img1').val('');
                        swal({   
                            title: "Success",   
                            text: "Successfully Inserted",   
                            timer: 1000,   
                            showConfirmButton: false
                        });

                        on_load();
                    } 
                }
            });
}else{// adding new
    $.ajax({
        url:'../api_fle/img_upload',
        method:'POST',
        data:  new FormData(this),
        contentType: false,
        cache: false,
        processData:false,
        success:function(data){ 
            if(data==0){
                $('.port_load').waitMe('hide');             
                $('#wrng').html('<p style="text-align: center; color:red;">Something went Wrong! Try again</p>');
            }else if(data==1){
                $('.port_load').waitMe('hide');             
                $('#wrng').html('<p style="text-align: center; color:red;">Upload Image only!</p>');
            }else{                  
                $('#wrng').html("");
                var link="http://www.udyomitra.com/photos/"+$('#uId').val()+"/gallery/"+data;

                $.ajax({
                    url:'../api_fle/port',
                    method:'POST',
                    data:{u_id:$('#uId').val(),title:$('#p_title').val(),desc:$('#p_description').val(),
                        link:link,pId:$('#p_id').val()},
                    success:function(data){

                         $('.port_load').waitMe('hide');    
                        if(data==0){
                            $('#wrng').html('<p style="text-align: center; color:red;">Something went Wrong! Try again</p>');
                        }else{
                            $('#wrng').html("");
                            $('#myModal5').modal('hide'); 
                                $("#p_img").replaceWith($("#p_img").val('').clone(true));
                                $('#p_title').val('');
                                $('#p_description').val('');
                                $('#p_id').val('');
                                $('#img1').val('');   

                            swal({   
                                title: "Success",   
                                text: "Successfully Inserted",   
                                timer: 1000,   
                                showConfirmButton: false 
                            });
                            on_load();
                        } 
                    }
                });
            }

        }   
    });
}


});

Answer 1

直接使用

$('.port_load').waitMe('hide');

更具体地解决您的问题

$(document).ready(function(){
    $(document).ajaxStart(function(){
        $('.port_load').waitMe({
            effect: 'win8',
            text: 'Please Wait...',
            bg: 'rgba(255,255,255,0.85)',
            color: '#000',
            maxSize: '',
            source: 'img.svg',
            onClose: function() {}
        }); 
    });
    $(document).ajaxStop(function(){
        $('.port_load').waitMe('hide');
    });


    $('#port_form').submit(function(e) {
        e.preventDefault();        
        if ($('#img1').val() != '' && $('#p_img').val() == '') { //for editing
            $.ajax({
                url: '../api_fle/port',
                method: 'POST',
                data: {
                    u_id: $('#uId').val(),
                    title: $('#p_title').val(),
                    desc: $('#p_description').val(),
                    link: $('#img1').val(),
                    pId: $('#p_id').val()
                },
                success: function(data) {                    
                    if (data == 0) {
                        $('#wrng').html('<p style="text-align: center; color:red;">Something went Wrong! Try again.</p>');
                    } else {
                        $('#wrng').html('');
                        $('#myModal5').modal('hide');
                        $("#p_img").replaceWith($("#p_img").val('').clone(true));
                        $('#p_title').val('');
                        $('#p_description').val('');
                        $('#p_id').val('');
                        $('#img1').val('');
                        swal({
                            title: "Success",
                            text: "Successfully Inserted",
                            timer: 1000,
                            showConfirmButton: false
                        });
                        on_load();
                    }
                }
            });
        } else { // adding new
            $.ajax({
                url: '../api_fle/img_upload',
                method: 'POST',
                data: new FormData(this),
                contentType: false,
                cache: false,
                processData: false,
                success: function(data) {
                    if (data == 0) {                        
                        $('#wrng').html('<p style="text-align: center; color:red;">Something went Wrong! Try again</p>');
                    } else if (data == 1) {                        
                        $('#wrng').html('<p style="text-align: center; color:red;">Upload Image only!</p>');
                    } else {
                        $('#wrng').html("");
                        var link = "http://www.udyomitra.com/photos/" + $('#uId').val() + "/gallery/" + data;
                        $.ajax({
                            url: '../api_fle/port',
                            method: 'POST',
                            data: {
                                u_id: $('#uId').val(),
                                title: $('#p_title').val(),
                                desc: $('#p_description').val(),
                                link: link,
                                pId: $('#p_id').val()
                            },
                            success: function(data) {          
                                if (data == 0) {
                                    $('#wrng').html('<p style="text-align: center; color:red;">Something went Wrong! Try again</p>');
                                } else {
                                    $('#wrng').html("");
                                    $('#myModal5').modal('hide');
                                    $("#p_img").replaceWith($("#p_img").val('').clone(true));
                                    $('#p_title').val('');
                                    $('#p_description').val('');
                                    $('#p_id').val('');
                                    $('#img1').val('');
                                    swal({
                                        title: "Success",
                                        text: "Successfully Inserted",
                                        timer: 1000,
                                        showConfirmButton: false
                                    });
                                    on_load();
                                }
                            }
                        });
                    }
                }
            });
        }
    });

});

Reference