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

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

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

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

class="form-signin" id="myform">
    {
    {csrf_field()}}            
    .........此处省略若干......
    
class="form-signin-heading">请登录
            
    for="inputName" class="sr-only">用户名
    "name" id="inputName" class="form-control" placeholder="Login Name / 登陆名" required autofocus="" type="text">
    for="inputPassword" class="sr-only">密码
    "password" value="" id="inputPassword" class="form-control" placeholder="Password / 密码" required type="password">
    class="btn btn-lg btn-primary btn-block" type="submit">登陆

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

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

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

回归正题，再看JS

<script type="text/javascript">
    //拿到form
    var form = document.getElementById("myform")

    function submitFormData(){
      
        var myFD = new FormData(form)

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

        alert("submitted")
    }

    form.addEventListener("submit", function (event) {
            
        event.preventDefault();   // 取消按键的原始提交行为
        submitFormData();         //启动监听提交按钮
    });

script>

嗯，简单吧！