您提供的内容似乎不完整或不够清晰,无法直接生成摘要。请提供更多详细信息或明确您希望我归纳的具体内容。
HTML表单提交方式
1. submit按钮式提交
| 优点 | 缺点 |
| 简单直观,用户点击提交按钮即可提交表单。 | 在提交前不可修改提交的form表单数据。 |
<form method="post" action="/submit"> <input type="text" name="username" value="" /> <input type="password" name="pwd" value="" /> <input type="submit" value="提交"/></form>
2. onsubmit方式提交
| 优点 | 缺点 |
| 在请求提交操作时,可对提交的数据进行处理。 | 需要编写JavaScript函数进行数据验证和处理。 |
<form id='test_form' action='' method='' onsubmit='return checkForm()'> <input type='text' name='username' value=''/> <input type='password' id='input_pwd' value =''/> <input type='hidden' name='pwd' id='md5_pwd' value=''/> <button type='submit'>提交</button></form>
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;}
3. formData提交
| 优点 | 缺点 |
| 适用于文件上传等复杂表单提交。 | 需要使用AJAX技术,代码相对复杂。 |
<form id="photoForm"> <input id="photoInput" type="file" title="图片上传" accept=".jpg,.jpeg,image/jpg,image/jpeg" name="myfiles" multiple="multiple">照片导入</form>
$('#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, processData : false, contentType : false, complete:function(){ $('.loading').hide(); $("#photoForm input").val(''); }, success:function(d){ // 成功。。 } });});
4. 动态添加表单提交
| 优点 | 缺点 |
| 可以在运行时动态生成和提交表单。 | 需要手动控制表单的创建和提交过程,代码较复杂。 |
<! 动态追加的form表单 ><script>var exportForm = $('<form action="'+ajaxUrl+'" method="post"> <input type="hidden" name="beginDate" value="'+$(".beginDate").val()+'"/> </form>'); $(document.body).append(exportForm);exportForm.submit(); // 表单提交exportForm.remove();</script><! 静态form表单,js方式提交 ><form action="'+ajaxUrl+'" method="post"> <input type="hidden" name="beginDate" value="'+$(".beginDate").val()+'"/></form>// js写法document.getElementById("form").submit();// JQuery写法$("#form").submit();
相关问题与解答
问题1:如何在表单提交前对数据进行处理?
解答:可以使用onsubmit事件来在表单提交前对数据进行处理,可以对密码进行加密处理,然后再将加密后的密码值赋给一个隐藏的输入框,最后提交该隐藏输入框的值,具体实现如下:
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:如何在不使用提交按钮的情况下提交表单?
解答:可以通过调用表单元素的submit()方法来提交表单,而不需要使用提交按钮。
document.getElementById("form").submit(); // js写法$("#form").submit(); // JQuery写法