之前做了個ajax提交表單的問題,使用了FormData,但是提交會直接進入error方法塊,後聽以前同學所說,將<button>改成了<input type="button"/ >就得到了解決,不得其解,希望有大佬幫我解惑(無論用<button>還是<input type="button"/>,後台都能正常運作並返回。不同的是,如果使用<button>會在後台接到資料時就直接進入了error區塊,而用<input type="button"/>則沒有問題),下面貼出程式碼
#form表單
<form id="upForm" method="post" basePath=<%=basePath %> enctype="multipart/form-data">
<table id="uptable">
<tr>
<td><span class="required">*</span> 终端类型</td>
<td><select id="terminalType" name="terminalType">
<option value="PC">PC</option>
<option value="ANDROID">Android</option>
</select></td>
<td></td>
</tr>
<tr>
<td><span class="required">*</span> 上传安装包</td>
<td><input id="upfile" type="file" name="upfile"/> 必须上传软件安装包</td>
</tr>
<tr>
<td><span class="required">*</span> 软件类型</td>
<td><input id="appType" type="text" name="appType"/> 必须填写软件类型</td>
</tr>
<tr>
<td> 新版本描述</td>
<td><textarea id="description" rows="6" cols="80" name="description"></textarea></td>
</tr>
<tr>
<!-- action="version/upload" -->
<td align="center" colspan="2"><input type="button" id="submit_btn" value="上传"></td>
</tr>
</table>
</form>
#js程式碼
$(function(){
$("#submit_btn").on("click",function(){
submit();
});
});
function submit(){
var formData = new FormData($("#upForm")[0]);
var appType = $("#appType").val();
if(!/[0-9]+/.test(appType)){
alert('appType must be number')
}
$.ajax({
type:'post',
url:$("#upForm").attr('basePath')+'version/upload',
cache:false,
contentType:false,
processData:false,
data:formData,
dataType : 'json',
success:function(callback){
$("#msg_p").text(callback.msg);
$("#msg_p").show();
setTimeout(function(){
$("#msg_p").hide();
if (callback.success == true)
alert(1);
//window.location.href="version/upPage";
else
alert(0);
},500);
},
error:function(){
alert("进入error function");
}
});
以下兩種標籤會自動提交form表單:
以下標籤不會自動提交form表單:
如果你是用前面那兩種,瀏覽器本身幫你submit一次,你的程式碼又submit了一次$("#submit_btn").on("click",function(){
就重複了。
不要把
<button>
标签当成<form>
中的input
元素。用button指定type=button就能避免