jQuery Form Plugin不按AJAX提交表单，它仍在重新加载页面，为什么？

Question

Can't seem to get this running, I am using jQuery 3.2.1 together with the jQuery Form Plugin 4.2.1 . I also have included the jQuery Cookies Plugin 1.4.1 . Now, if I submit a Form, that is called by .ajaxForm(); it doesn't work and still reloads the page and redirects me to the action-path that is included in the form. I tried it with a lower version of jQuery, 1.2 and with that it worked fine. But if I use the older version, some other functions wouldn't work anymore, what's why I need to use the latest one.

Here's my head-tag:

    <!--- JQUERY --->
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

    <!--- JQUERY FORM PLUGIN --->
    <script src="js/de.jqu.form.421.js"></script>

    <!--- JQUERY COOKIE PLUGIN --->
    <script src="js/de.jqu.cookies.141.js"></script>

    <!--- JQUERY MIGRATE --->
    <script src="https://code.jquery.com/jquery-migrate-3.0.0.js">

The HTML form:

<form enctype="multipart/form-data" name='imageform' role="form" id="imageform" method="post" action="/functions/c_uploadcans.php">

                    ...

    <input type="submit" value="Upload" name="image_upload" id="image_upload" class="btn"/>
</form>

And the script I am using to call the .ajaxForm():

(function() {
    $('#imageform').ajaxForm({
        beforeSubmit: function() {  
            count = 0;
            val = $.trim( $('#images').val() );

            if( val == '' ){
                count= 1;
                $( "#images" ).next('span').html( "Please select your images" );
            }

            if(count == 0){
                for (var i = 0; i < $('#images').get(0).files.length; ++i) {
                    img = $('#images').get(0).files[i].name;
                    var extension = img.split('.').pop().toUpperCase();
                    if(extension!="PNG" && extension!="JPG" && extension!="GIF" && extension!="JPEG"){
                        count= count+ 1
                    }
                }
                if( count> 0) $( "#images" ).next('span').html( "Please select valid images" );
            }


            if( count> 0){
                return false;
            } else {
                $( "#images" ).next('span').html( "" );
            }



        },

        beforeSend:function(){
           $('#loader').show();
           $('#image_upload').hide();
        },
        success: function(msg) {
        },
        complete: function(xhr) {
            $('#loader').hide();
            $('#image_upload').show();

            $('#images').val('');
            $('#error_div').html('');
            result = xhr.responseText;
            result = $.parseJSON(result);
            base_path = $('#base_path').val();

            if( result.success ){
                name = base_path+'images/'+result.success;
                html = '';
                html+= '<image src="'+name+'">';
                $('#uploaded_images #success_div').append( html );
            } else if( result.error ){
                error = result.error
                html = '';
                html+='<p>'+error+'</p>';
                $('#uploaded_images #error_div').append( html );
            }


            $('#error_div').delay(5000).fadeOut('slow');


        }
    }); 

})(jQuery);

Maybe someone finds a mistake, I really have no idea. Thanks in advance.

Answer 1

how are you calling that function. may be its not even called. put that in `

$(document).ready(function()`{ your ajaxForm code });

like this ...

$(document).ready(function() {
    $('#imageform').ajaxForm({
        beforeSubmit: function() {  
            count = 0;
            val = $.trim( $('#images').val() );

         ......
         ......
    });
 });

hope this works for you

Answer 2

My guess is because in your beforeSend all you are doing is showing the loader and hiding image_upload

beforeSend:function(){
    $('#loader').show();
    $('#image_upload').hide();
},

Shouldn't you be handling ajax post call here as well?