javascript - js表单ajax提交出现重复

问题描述

问 题

之前做了个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_div").show();
            setTimeout(function(){
                $("#msg_div").hide();
                if (callback.success == true)
                    alert(1);
                    //window.location.href="version/upPage";
                else
                    alert(0);
            },500);
        },
        error:function(){
            alert("进入error function");
        }
    });

解决方案

以下两种标签会自动提交form表单：
<button>
<input type="submit">

以下标签不会自动提交form表单：
<input type="button">

如果你是用前面那两种，浏览器本身帮你submit一次，你的代码又submit了一次$("#submit_btn").on("click",function(){
就重复了。

这篇关于javascript - js表单ajax提交出现重复的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！