javascript - js表單ajax提交出現重複
大家讲道理
大家讲道理 2017-05-19 10:23:45
0
3
463

之前做了個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>&nbsp;终端类型</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>&nbsp;上传安装包</td>
          <td><input id="upfile" type="file" name="upfile"/>&nbsp;&nbsp;必须上传软件安装包</td>
        </tr>
        <tr>
          <td><span class="required">*</span>&nbsp;软件类型</td>
          <td><input id="appType" type="text" name="appType"/>&nbsp;&nbsp;必须填写软件类型</td>
        </tr>
        <tr>
          <td>&nbsp;&nbsp;&nbsp;新版本描述</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");
        }
    });
大家讲道理
大家讲道理

光阴似箭催人老,日月如移越少年。

全部回覆(3)
黄舟

以下兩種標籤會自動提交form表單:

以下標籤不會自動提交form表單:

如果你是用前面那兩種,瀏覽器本身幫你submit一次,你的程式碼又submit了一次$("#submit_btn").on("click",function(){
就重複了。

習慣沉默

不要把<button>标签当成<form>中的input元素。

如果在 HTML 表單中使用 button 元素,則不同的瀏覽器會提交不同的值。 Internet Explorer 將提交  之間的文本,而其他瀏覽器將提交 value 屬性的內容

迷茫

用button指定type=button就能避免

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板