Ajax отправить многокомпонентные/form-данные

Question

Мой HTML-код:

<form:form name="vcfForm" id="vcfForm" method="post" enctype="multipart/form-data" action="../acquaintance/readingContactsFromVcfFile"></form:form> 

<input type="file" name="vcfFile" id="vcfFile" form="vcfForm" > 
    <button type="button" name="vcfSubmit" id="vcfSubmit" form="vcfForm">Upload</button> 

Мой контроллер:

@RequestMapping(value = { "/readingContactsFromVcfFile" }, method = RequestMethod.POST) 
public @ResponseBody 
ModelMap readContactsFromVcfFile(@RequestParam("vcfFile") MultipartFile file, HttpServletRequest request) throws UserServiceException { 
    ModelMap modelMap = new ModelMap(); 
    *********************code***************** 
    modelMap.addAttribute("message", "success"); 
    return modelMap; 
} 

Мой код JQuery:

$(document).on('click','#vcfSubmit', function() { 
         var vcfData = new FormData(); 
         vcfData.append('files[]', $('#vcfForm').get(0).files[0]); 
         $.ajax({ 
          url : "../acquaintance/readingContactsFromVcfFile?vcfFile="+vcfData, 
          type : "post", 
          cache : false, 
          processData: false, 
          contentType: false, 
          success : function(data) { 
          alert(data.message);           
          } 
          }); 
        }); 

Моя проблема когда я нажмите кнопку отправки страница будет отправлена ​​и отобразится сообщение «успех», отображаемое на странице. Я хочу, чтобы страница не обновлялась при отправке формы или файла с помощью ajax. Как я могу решить эту проблему?

Answer 1

код HTML: Код

<form name="vcfForm" id="vcfForm" method="post" enctype="multipart/form-data" ></form> 
<input type="file" name="vcfFile" id="vcfFile" form="vcfForm" > 
    <button type="button" name="vcfSubmit" id="vcfSubmit" form="vcfForm">Upload</button> 

контроллер:

@RequestMapping(value = { "/readingContactsFromVcfFile" }, method = RequestMethod.POST) 
public @ResponseBody 
ModelMap readContactsFromVcfFile(@RequestParam(value = "vcfFile") MultipartFile file, HttpSession session) throws UserServiceException { 
    ModelMap modelMap = new ModelMap(); 
    modelMap.addAttribute("message", "message"); 
    return modelMap; 
} 

JQuery код:

$(document).on('click','#vcfSubmit',function(){ 
         var vcfData = new FormData($('#vcfForm')[0]); 
          $.ajax({ 
           url : "../acquaintance/readingContactsFromVcfFile?vcfFile="+vcfData, 
           type : "post", 
           data : vcfData, 
           processData: false, 
           contentType: false, 
           cache : false, 
           success : function(data) { 
           } 
          }); 
        }); 

Каждая вещь работает отлично.