更多JS实战，前往：https://www.yuque.com/smallwhy/yyvuqy

1. submit提交

(1). submit 按钮式提交

缺点：在提交前不可修改提交的form表单数据

// 1. html
<form method="post" action="/../.." >
    <input type="text" name="username" value="" />
    <input type="password" name="pwd" value="" />
    <input type="submit" value="提交"/>
</form>

(2). onsubmit方式提交

优点：在请求提交操作(action)时，可对提交的数据进行处理

// 1. html
<form id=\'test_form\' action=\'\' method=\'\' onsubmit=\'return checkForm()\'>
    <input type=\'text\' name=\'username\' value=\'\'/>
    <input type=\'password\' id=\'input_pwd\' value =\'\'/> // 注意此没有name属性，不会提交
    <input type=\'hidden\' name=\'pwd\' id=\'md5_pwd\' value=\'\'/> // 此有name属性，会被form表单提交
    <button type=\'submit\'>提交<button/>
</form>
// 2.js
function checkForm () { // 点击“提交”按钮，执行的方法
    var input_pwd= document.getElementById(\'input_pwd\');
    var md5_pwd= document.getElementById(\'md5_pwd\');
     md5_pwd.value= toMD5(input_pwd.value);            
    //进行下一步
    return true;
}

2. formData 提交

// 1. html
<form id="photoForm">
     <input id="photoInput" type="file" title="图片上传" accept=".jpg,.jpeg,image/jpg,image/jpeg" name="myfiles" multiple="multiple">照片导入
</form>

// 2. js
$(\'#photoForm input\').change(function() {
    var photoForm = $(\'#photoForm\')[0],
    photoFormData = new FormData(photoForm),
    photoFileList = $(\'#photoInput\')[0].files; // 上传的文件列表
    $(\'.loading\').show();
    $.ajax({
        type: \'POST\',
        url: ZD.url+"/cert/filesUpload",
        data: photoFormData,
        // 告诉jQuery不要去处理发送的数据
        processData : false,
        // 告诉jQuery不要去设置Content-Type请求头
        contentType : false,
        complete:function(){
           $(\'.loading\').hide();
           $("#photoForm input").val(\'\');
        },
        success:function(d){
            // 成功。。
       }
     });
});

3. 动态添加表单提交, js方式提交

1. 动态追加的form表单

var exportForm = $(\'<form action="\'+ajaxUrl+\'" method="post">\
    <input type="hidden" name="beginDate" value="\'+$(".beginDate").val()+\'"/>\
    </form>\');     
  $(document.body).append(exportForm);
   exportForm.submit(); // 表单提交
   exportForm.remove();

2. 静态form表单，js方式提交

// 1. html
<form action="\'+ajaxUrl+\'" method="post">
    <input type="hidden" name="beginDate" value="\'+$(".beginDate").val()+\'"/>
</form>
  
// 2. js/JQuery
document.getElementById("form").submit(); // js写法
$("#form").submit(); // jquery写法

版权声明：本文为zero-zm原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/zero-zm/p/11622779.html