Форма кода Ajax не работает на submit

Question

[ладно, извините, если я разместил дублированный вопрос, но я просто новичок в ajax, поэтому я как-то неправильно использовал слова во время поиска. ] - Jquery Form Submit Keeps Refreshing

Я не могу найти, что не так с моим кодом. Это мой код формы:

<form id="UploadExcel" enctype="multipart/form-data" > 
          <input name="file" type="file" /> 
          <input id="submit" type="submit" value="Submit" /> 
         </form> 

тогда это моя Аякса форма

$('#UploadExcel').submit(function(){ 
     $.ajax({ 
      url:'UploadServlet', 
      type:'POST', 
      dataType:'json', 
      data: $('#UploadExcel').serialize(), 
      success: function(data){ 
       if(data.isValid){ 
        $("#ShowSheets").modal("show"); 
       }else{ 
        alert('Please Put a Valid Excel Sheet'); 
       } 
      } 
     }); 
     return false; 
    }); 

все только перезарядка, который я думаю, что не должно произойти, так как я использую Ajax. Там нет ошибки или что-нибудь в консоли, так что я не думаю, что у меня есть какие-либо проблемы с моим сервлетом ...

Answer 1

использования preventDefault()

$('#UploadExcel').submit(function(e){ 
    e.preventDefault(); 
     $.ajax({ 
      url:'UploadServlet', 
      type:'POST', 
      dataType:'json', 
      data: $('#UploadExcel').serialize(), 
      success: function(data){ 
       if(data.isValid){ 
        $("#ShowSheets").modal("show"); 
       }else{ 
        alert('Please Put a Valid Excel Sheet'); 
       } 
      } 
     }); 
     return false; 
    }); 

Answer 2

Вы должны cancel the default action (форма представить) первый:

$('#UploadExcel').submit(function(e){ 
     // Prevent default action 
     e.preventDefault() 
     $.ajax({ 
      url:'UploadServlet', 
      type:'POST', 
      dataType:'json', 
      data: $('#UploadExcel').serialize(), 
      success: function(data){ 
       if(data.isValid){ 
        $("#ShowSheets").modal("show"); 
       }else{ 
        alert('Please Put a Valid Excel Sheet'); 
       } 
      } 
     }); 
     return false; 
    });