当前位置:首页 > Web开发 > 正文

JS/Jquery 表单方式提交总结

2024-03-31 Web开发

标签:

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

JS/Jquery 表单方式提交总结

温馨提示: 本文由Jm博客推荐,转载请保留链接: https://www.jmwww.net/file/web/8607.html