submit提交form表单本身提供action属性,在action属性中填写数据提交地址后,点击submit类型的按钮即可将数据提交至指定地址,代码如下:
注意:method指定请求方式每个input表单项需要有name属性通过上述方式提交表单数据后,会发生页面跳转,跳转至action所指定的地址,很难满足开发需求。若要提交数据后不跳转,可以尝试通过ajax提交数据。AJAX提交form表单不填写action属性,并且在提交时阻止表单的默认行为,获取到表单数据后通过ajax的方式发送给后端,代码如下:
document.getElementById('btn').onclick=function(e){
e.preventDefault()
let form = document.getElementById("form");
form.addEventListener("submit", function (event) {
let XHR = new XMLHttpRequest();
// 将表单数据转为Formdat格式
let FD = new FormData(form);
XHR.open("POST", "http://127.0.0.1:3001/register");
// XHR.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
XHR.send(FD)
XHR.onreadystatechange=function(){
// do something according to response
}
})
}