关于 提交form表单的文本及其他字段中遇到的bug

bug1：ajax提交 error

原因：用了form表单的serializeArray()序列化，https://blog.csdn.net/huxiangen/article/details/84970394

解决：使用了FormData对象，具体见链接

/**
	 * 创建用户提交方法事件
	 */
	$("#btn-add-submit").click(function(){
		var formData = new FormData($("#versionForm")[0]);
		$("#loadingModal").modal("show");
		$.ajax({
			url : witUtils.getBasePath() + "/version/addVersion?fresh=" + Math.random(),
	        type:'POST',
	        data:formData,
	        async:false,
            contentType: false,
            processData: false,
    		dataType: "json",
	        success:function(data){
	        	$("#loadingModal").modal("hide");
	        	if(data.result == "success"){
	        		clearForm();
	        		toastr.success("新版本创建成功！");
	        		setTimeout(function (){
		        		window.location.href = witUtils.getBasePath()+"/version/home";
		        	}, 1500);
	        	}else{
	        		toastr.error("新版本创建失败！");
	        	}
	        	
	        },
	        error:function(xhr,textStatus){
	        	$("#loadingModal").modal("hide");
				toastr.error("新版本创建失败！");
	        }
	    });	
		
	});

bug2：使用form表单的submit提交会刷新到新页面

解决：将submit改为button

 

bug3：提交form表单数据时，后台取值用的时字段的 name值

前台代码

<form id="versionForm" method="post" enctype="multipart/form-data">
	   <table id="addVersionTab" style="width: 100%; border: 1px solid #e2e2e2;">
	    	<tr style="padding-bottom: 20px;">
	    		<th style="width: 10%; height: 60px; text-align: right; font-size: 16px;">请输入app日志:</th>
	    		<td id="app-log" style="width: 25%; padding-left: 20px;">
	    			<input type="text" name="appLog" placeholder="请输入app日志!" style="border-radius:5px; border:1px solid #e2e2e2; width: 100%; height: 36px; padding-left: 5px;">
	    		</td>
	    		<td style="width: 30%; padding-left: 10px; color: red;"></td>
	    	</tr>
	    	<tr style="padding-bottom: 20px;">
	    		<th style="width: 10%; height: 60px; text-align: right; font-size: 16px;">上传apk:</th>
	    		<td id="app-MD5" style="width: 25%; padding-left: 20px;">
	    			<input type="file" name="file" placeholder="请选择文件!" style="border-radius:5px; border:1px solid #e2e2e2; width: 100%; height: 36px; padding-left: 5px;">
	    		</td>
	    		<td style="width: 30%; padding-left: 10px; color: red;"></td>
	    	</tr>
	    	<tr style="padding-bottom: 20px;">
	    		<th style="width: 10%; height: 60px; text-align: right; font-size: 16px;"></th>
	    		<td colspan="2" style="width: 30%; padding-left: 20px;">
	    			<button id="btn-add-submit" type="button" class="btn btn-primary">新建版本</button>
		    		<button id="btn-add-cancel" type="button" class="btn btn-default">取消</button>
	    		</td>
	    	</tr>
	    </table>
	<form>

后台：

/**
	 * 
	* @Title: jsonAddVersion
	* @Description: 添加版本
	* @param @param request
	* @param @param user
	* @param @param model
	* @param @return    参数
	* @return String    返回类型
	* @throws
	 */
	@RequestMapping(value = "/addVersion")
	@ResponseBody
	public String jsonAddVersion(@RequestParam("file") MultipartFile file, HttpServletRequest request, Model model) {
		MultipartHttpServletRequest req = (MultipartHttpServletRequest) request;
		String appLog = req.getParameter("appLog");
		SVersion version = new SVersion();
		String fileName = file.getOriginalFilename();//文件名
		File filePath = null;
		String result = null;
		if(file!=null && !file.isEmpty()){
            filePath = new File(PropertiesTool.path + File.separator + fileName+ ".apk");
            try {
            	file.transferTo(filePath);
            	version.setAppMd5("123456789");
            	version.setAppPath("version/download?appName=" + fileName);
            	version.setAppSize(String(file.getSize()));
            	version.setAppTime(new Date());
            	version.setAppVersion(fileName);
            	version.setAppLog(appLog);
        		result = versionService.insertVersion(version);
        		
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
		JSONObject json = new JSONObject();
		json.put("result", result);
		return json.toJSONString();
	}