javascript - js form ajax submission appears duplicated

Question

I had a problem with ajax submission form before. I used FormData, but the submission would go directly to the error method block. After listening to what my previous classmates said, I changed <button> to <input type="button"/ > I got the solution, but I can’t figure it out. I hope someone can help me figure it out (no matter I use <button> or <input type="button"/>, the background can run normally and return. The difference is , if you use <button>, you will directly enter the error block when receiving data in the background, but if you use <input type="button"/>, there will be no problem), the code is posted below

form 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 code

$(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");
        }
    });

Answer 1

The following two tags will automatically submit the form:
<button>
<input type="submit">

The following tags will not automatically submit the form:
<input type="button">

If you use the first two, the browser itself will help you submit once, and your code will be submitted again $("#submit_btn").on("click",function(){
It will be repeated.

Answer 2

Don’t put the <button>标签当成<form>中的input element.

If you use the button element in an HTML form, different browsers will submit different values. Internet Explorer will submit the text between <button> and <button/> while other browsers will submit the content of the value attribute

Answer 3

Use button to specify type=button to avoid it