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

Question

似乎无法运行，我正在使用 jQuery 3.2.1 和 jQuery Form Plugin 4.2.1。我还包含了 jQuery Cookies 插件 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()`{ your ajaxForm code });

像这样...

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

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

希望这对你有用