jQuery表單插件不會按照AJAX提交表單，它仍在重新加載頁面，爲什麼？

似乎無法得到此運行，我正在使用jQuery 3.2.1連同jQuery表格插件4.2.1。我也包括了jQuery Cookies Plugin 1.4.1。現在，如果我提交一個表單，那個被.ajaxForm（）調用;它不起作用，仍然重新加載頁面並將我重定向到表單中包含的操作路徑。我試着用較低版本的jQuery 1.2進行測試，結果表明它工作正常。但是如果我使用舊版本，其他一些功能將不再起作用，這就是爲什麼我需要使用最新版本的原因。jQuery表單插件不會按照AJAX提交表單，它仍在重新加載頁面，爲什麼？

這裏是我的頭標籤：

<!--- 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);

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

來源

2017-06-28 J. Ano

你怎麼調用這個函數。可能是它甚至沒有被稱爲。把它放在`

$（document）.ready（function（）`{your ajaxForm code}）;

這樣的...

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

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

希望這對你的作品

來源

2017-06-28 21:02:19

HUH IT WORKS但爲什麼？（function（）是$（document）.ready（function（））的簡短版本;不是嗎？ –

$（document）.ready（function（））確保在加載所有文檔時加載腳本。所以如果你觸發一個事件，所有依賴html元素應該在那裏正常工作。 –

有道理，謝謝你很多 –

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

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

你不應該在這裏打電話給ajax嗎？

來源

2017-06-28 21:02:30 Rushikumar

jQuery表單插件不會按照AJAX提交表單，它仍在重新加載頁面，爲什麼？

回答

相關問題