javascript – JS-Formular-Ajax-Übermittlung erscheint dupliziert

Question

Ich hatte zuvor ein Problem mit der Ajax-Formularübermittlung, aber die Übermittlung ging direkt zum Fehlermethodenblock. Nachdem ich mir angehört hatte, was meine vorherigen Klassenkameraden sagten, änderte ich <button> > Ich habe die Lösung, aber ich kann sie nicht herausfinden. Ich hoffe, jemand kann mir helfen, sie herauszufinden (egal, ob ich <button> oder <input type="button"/> verwende). Der Unterschied besteht darin, dass bei Verwendung von <button> der Fehlerblock direkt eingegeben wird, während bei Verwendung von <input type="button"/> ist unten gepostet

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

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

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

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

Answer 2

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

如果在 HTML 表单中使用 button 元素，不同的浏览器会提交不同的值。Internet Explorer 将提交 <button> 与 <button/> 之间的文本，而其他浏览器将提交 value 属性的内容

Answer 3

用button指定type=button就能避免