javascript - La soumission ajax du formulaire js apparaît dupliquée

Question

J'ai déjà eu un problème de formulaire de soumission ajax, en utilisant FormData, mais la soumission allait directement au bloc de méthode d'erreur. Après avoir écouté ce que mes précédents camarades de classe ont dit, j'ai changé <button> en <input type="button"/. > J'ai la solution, mais je n'arrive pas à la comprendre. J'espère que quelqu'un pourra m'aider à la comprendre (peu importe si j'utilise <button> ou <input type="button"/>, l'arrière-plan peut fonctionner normalement et revenir. La différence est que si l'utilisation de <button> entrera directement dans le bloc d'erreur lors de la réception des données en arrière-plan, alors que l'utilisation de <input type="button"/> est posté ci-dessous

formulaire

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

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

Answer 1

Les deux balises suivantes soumettront automatiquement le formulaire :
<button>
<input type="submit">

Les balises suivantes ne soumettront pas automatiquement le formulaire :
<input type="button">

Si vous utilisez les deux premiers, le navigateur lui-même vous aidera à soumettre une fois et votre code sera soumis à nouveau $("#submit_btn").on("click",function(){
Il sera répété.

Answer 2

Ne mettez pas l’élément <button>标签当成<form>中的input.

Si vous utilisez l'élément bouton dans un formulaire HTML, différents navigateurs soumettront des valeurs différentes. Internet Explorer soumettra le texte entre <button> et <button/> tandis que les autres navigateurs soumettront le contenu de l'attribut value

.

Answer 3

Utilisez le bouton pour spécifier type=bouton pour l'éviter