Не удается предотвратить обновление, даже если использовать ajax для отправки формы

Question

Я пишу функцию портлета для загрузки файла Excel в серверную часть для обработки.

И я хочу, чтобы страница не обновлялась и позволяла мне изменить страницу после успешной загрузки.

Я пытался использовать ajax для загрузки файла, но он не работает.

HTML часть

<portlet:actionURL var="uploadWorkbook" name="uploadWorkbook"></portlet:actionURL>
<b>Please Upload a Document</b> 

 <form id = "UploadExcelForm" name ="UploadExcelForm" action="<%=uploadWorkbook%>" method="post" enctype="multipart/form-data">
<input type="file" id="uploadedFile" name="uploadedFile" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel">
<button type="submit"> Upload </button>
</form>

AJAX часть,

$("#UploadExcelForm").on('submit', (function(e) {
   if ($('#uploadedFile').val().trim().length == 0) {
        alert("Please choose a file!");
        return false;
    }else{
            $.ajax({
            url: uploadWorkbook,
            type: 'POST',
            cache: false,
            data: $('#UploadExcelForm').serialize(),
            processData: false,
            contentType: false,
            success: function(){}
        })
        e.preventDefault();
}
}));

внутренняя часть (как получить загруженный файл)

public void uploadWorkbook(ActionRequest actionRequest,ActionResponse actionResponse) throws Exception{
        boolean submit = true;
        boolean success = false;
        UploadPortletRequest uploadPortletRequest = PortalUtil.getUploadPortletRequest(actionRequest); 
        String uploadedTemplateId = uploadPortletRequest.getParameter("templateId");

        File uploadedFile = uploadPortletRequest.getFile("uploadedFile", true); 
//to do sth on file...
}

Answer 1

Другие ответы дают вам некоторые советы на стороне JS, которым вы должны следовать. На портале вы отправляете сообщение на <portlet:actionURL/>, которое возвращает полностью обработанную страницу (и может даже быть перехвачено каркасом Liferay SPA - хотя я не уверен в том, что он обрабатывает явные вызовы ajax.

Если вы просто хотите вернуть результат для загрузки вашего файла (например, статус, JSON и т. Д.), Вы, вероятно, захотите отправить в <portlet:resourceURL/> и обработать его в обработчике ресурсов на стороне Java вместо обработчик действий.

При публикации в обработчике ресурсов не будут отображаться все другие портлеты на странице, в то время как обработчик действия будет делать.

Answer 2

Изменение:

<button type="submit"> Upload </button>

до

<button type="button"> Upload </button>

И поставить

e.preventDefault();

внешне, если условие (так оно выполняется для обоих)

Answer 3

Изменение с type="submit":

<button type="submit"> Upload </button>

до:

<button> Upload </button>

Answer 4

Попробуйте удалить action из тега формы.

Затем вместо e.preventDefault() используйте return false и поместите его вне оператора if/else.

Answer 5

Попробуйте удалить тег формы и удалить тип отправки с вашей кнопки.