关于form与表单操作
form表单自动提交规则
- form表单中只有一个type=text的input,在input中按enter键,会自动提交;
- form表单中有多个type=text的input,且无type=submit的按钮元素,则在input中按enter键,不会自动提交
- form表单中有type=submit的按钮元素,点击按钮元素或者在input中按enter键,会自动提交
- form表单中有type=button的按钮元素且有多个input元素,点击按钮元素或者在input中按enter键,不会自动提交
form表单提交方法总结
方法一:浏览器默认提交表单的方法
<form action="/login" method="post" onsubmit="return toValid();">
<input type="text" name="phone" placeholder="请输入手机号" />
<input type="password" name="password" placeholder="输入密码" />
<button type="submit">登录</button>
</form>
通过点击type="submit"
的提交按钮来触发form表单的onsubmit事件。form表单自动提交规则1,3也是通过触发onsubmit事件来进行表单提交的。因此,若要阻止表单提交,可以通过return false;
,当return true;
时则会提交表单;通常我们会在html代码中返回一个函数,函数通过验证表单数据的完整性来决定返回true
或者false
。这里的提交按钮既可以是button标签也可以是input标签,只要type="submit"
就可以。
需要注意的是,<input type="submit" value="提交" name="btn" />
和<button type="submit" name="btn" value="提交">提交</button>
这两种方式会导致浏览器将value作为name对应的值提交给服务器。因此最好不要这样使用。另外,button和input的相似之处不止于此,button也可以设置type=reset,此时点击按钮会导致表单被重置。
方法二:submit()方法
该方法是用js来实现对表单的提交,但是表单的 onsubmit 事件句柄不会被调用,该方法一般用于通过点击某个普通按钮来进行表单提交。例如:
document.getElementById('form-id').submit();
document.myForm.submit();//通过表单的name属性值来获取表单元素
document.forms['formName'].submit();//通过返回当前文档中<form>元素的集合来获取表单元素
这两种方法都需要指定action属性和method方法(默认是get),才能把数据以正确的方法发送到指定的服务器地址,否则将会出现404页面。
方法三:ajax方式进行异步提交
前两种方式会使得页面跳转,后端会控制页面的跳转及数据传递,但是在某些时候不希望页面跳转,或者说想要将控制权放在前端,通过js来操作页面的跳转或者数据变化。这个时候就需要用到ajax异步提交并获取数据了,目前现在很多网站也是采用这种方法。通过XMLHttpRequest生成的请求可以有两种方式来获取数据,异步模式或同步模式。请求的类型是由这个XMLHttpRequest对象的open()方法的第三个参数async的值决定的。如果该参数的值为false,则该XMLHttpRequest请求以同步模式进行,否则该过程将以异步模式完成。
例如:
let xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if(xhr.readyState == 4) {
if(xhr.status == 200) {
let resText = JSON.parse(xhr.responseText);
if(resText.code == 1) {
//其他操作
}
}
}
}
xhr.open('POST','/api/code',true);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");//在这里来设置
xhr.send(`phone=${phoneNumber.value}`);
区别:表单提交时,页面是整体刷新,且由后端来控制页面跳转;而ajax方式提交时,页面是局部刷新,可由js来控制页面跳转。
文件上传的三种方法
方法一:利用表单实现文件上传
注意:1:post方式提交, 2:
enctype="multipart/form-data"
方法二:使用ajax和FormData对象异步上传文件
例如:代码来自MDN
var form = document.forms.namedItem("fileinfo");
form.addEventListener('submit', function(ev) {
var oOutput = document.querySelector("div"),
oData = new FormData(form);
oData.append("CustomField", "This is some extra data");
var oReq = new XMLHttpRequest();
oReq.open("POST", "stash.php", true);
oReq.onload = function() {
if (oReq.status == 200) {
oOutput.innerHTML = "Uploaded!";
} else {
oOutput.innerHTML = "Error " + oReq.status + " occurred when trying to upload your file.<br \/>";
}
};
oReq.send(oData);
ev.preventDefault();
}, false);
方法三:iframe上传
未使用过这种方法,google搜索怎么实现。
js阻止form表单自动提交方法
方法一:return false;
方法二:event.preventDefault();这种方法一般是用在监听form表单的submit事件或者监听提交按钮的点击事件从而获取到事件对象event。