formdata 数据格式可以直接ajax通信是一种map类型的数据使用for of 遍历

最新推荐文章于 2023-05-02 18:29:03 发布

SpringYoungYu

最新推荐文章于 2023-05-02 18:29:03 发布

阅读量535

点赞数 1

本文链接：https://blog.csdn.net/qq_44917015/article/details/115605780

版权

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <form action="">
        <input type="text" class="form-control" id="user" name="user" placeholder="User" />
        <br/>
        <input type="password" class="form-control" id="password" name="password" placeholder="Password" />
        <button type="submit" >提交</button>
    </form>
    <script>
        /* 
        formdata 也可以传递
        */
        function ajax(item) {
            var xhr = new XMLHttpRequest();
            xhr.addEventListener("load", submitHandler);
            xhr.open('post', 'http://localhost:4010')
            xhr.send(item)
        }
        
        // formdata.forEach( item => console.log(item) )
        // ajax();

        // function loadHandler(){
        //     let form = document.querySelector('form');
        //     let formdata = new FormData( form )
        // }
        let form = document.querySelector('form');
        form.addEventListener('submit',submitHandler)
        // FormData 一种map类型的数据
        function submitHandler(e){
            e.preventDefault();
            let formdata = new FormData( form )
            ajax( formdata );
            console.log( typeof formdata )
            for( var values of  formdata){
                console.log(values, typeof values)
            }
        }
    </script>
</body>

</html>