Ajax 代码表单在提交时不起作用

Question

[好吧，如果我发布了一个重复的问题，我很抱歉，但我只是 Ajax 的新手，所以我在搜索时不知何故误用了这些词。- Jquery表单提交保持刷新

我找不到我的代码有什么问题。这是我的表单代码：

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

那么这是我的 Ajax 表单

$('#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。控制台中没有错误或任何东西，所以我认为我的 servlet 没有任何问题......

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

您需要先取消默认操作（表单提交）：

$('#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;
    });