如何通过纯javascript实现表单提交

347 阅读1分钟

通常,如果是POST方法,一般使用vuejs+axios,或使用Jquery实现表单提交。有些地方,我想使用纯JS实现,比方简单的登陆跳转。话不多说,看原代码,

laravel中的HTML部分,如果不是laravel,去掉 {{csrf_field()}}这一行即可

web前端全栈资料粉丝福利(面试题、视频、资料笔记、进阶路线)



<form class="form-signin" id="myform">

{{csrf_field()}}

.........此处省略若干......

<h2 class="form-signin-heading">请登录</h2>

<label for="inputName" class="sr-only">用户名</label>

<input name="name" id="inputName" class="form-control" placeholder="Login Name / 登陆名" required autofocus="" type="text">

<label for="inputPassword" class="sr-only">密码</label>

<input name="password" value="" id="inputPassword" class="form-control" placeholder="Password / 密码" required type="password">

<button class="btn btn-lg btn-primary btn-block" type="submit">登陆</button>

</form>

题外话:如果是正常的表单提交,不使用JS,一般第一行得这样写

<form class="form-signin" id="myform" method="POST" action="/admin/login">

这里因为使用JS,所以删除了method="POST" action="/admin/login"跳转及方法信息。

回归正题,再看JS

//拿到formvarform = document.getElementById("myform")

function submitFormData(){

varmyFD =new FormData(form)

// 这里可以对form进行操作,使用ajax XMLHttpRequest,axios等发送 console.dir(myFD)

console.dir(form)

alert("submitted")

}

form.addEventListener("submit", function (event) {

event.preventDefault();// 取消按键的原始提交行为submitFormData();//启动监听提交按钮 });