jQuery Form Plugin不按AJAX提交表單，它仍在重新加載頁面，為什么？

Question

似乎無法正常運行，我正在使用jQuery 3.2.1和jQuery Form Plugin 4.2.1 。 我還包括了jQuery Cookies Plugin 1.4.1 。 現在，如果我提交一個表單，則由.ajaxForm（）調用； 它不起作用，仍然會重新加載頁面，並將我重定向到表單中包含的操作路徑。 我使用較低版本的jQuery 1.2進行了嘗試，並且運行良好。 但是，如果我使用的是舊版本，則某些其他功能將無法使用，這就是為什么我需要使用最新版本的原因。

這是我的頭像：

    <!--- 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">

HTML形式：

<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>

還有我用來調用.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);

也許有人發現錯誤，我真的不知道。 提前致謝。

Answer 1

您如何調用該函數。 可能甚至沒有被調用。 把它放在`

$（document）.ready（function（）`{您的ajaxForm代碼}）;

像這樣 ...

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

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

希望這對你有用

Answer 2

我的猜測是因為在你beforeSend所有你正在做的是展示loader和隱藏image_upload

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

您不應該在這里也處理ajax帖子嗎？