原生 ajax 和form data

665 阅读1分钟
<form action="">
        姓名:<input type="text" name="username" /><br /> 年龄: <input type="text" name="age" /><br /> 身高: <input type="text" name="height" /><br />
        <button>提交</button>
    </form>

    <script>
        document.querySelector('form').onsubmit = function(e) {
            e.preventDefault() //阻止默认提交行为
            // this 参数就是form元素
            var fd = new FormData(this)

            // ajax提交数据到接口
            var xhr = new XMLHttpRequest()
            // XHR 2.0 的事件,请求提交成功后触发事件
            xhr.onload = function() {
                console.log(JSON.parse(xhr.responseText))
            }
            xhr.open('POST', '/formdata')
                // xhr.setRequestHeader(); // 使用FormData,不要设置请求头;写了请求头,反而会报错
            xhr.send(fd)
        }
    </script>