异步提交表单之FormData

重点摘要

移动端最好不使用Jq, 因为Jq的是为PC端浏览器兼容而生的, 所以会有影响手机端的效率. ajax可以通过其它的方式实现如:mui、vue等方式.

  • javascript for-of JavaScript6里引入了一种新的循环方法,它就是for-of循环,它既比传统的for循环简洁,同时弥补了forEach和for-in循环的短板。
  • 异步提交 processData、contentType //这两个选项是必须的. 不然接收的数据格式就有问题.

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">
    <title>testing form group</title>
    <script type="text/javascript" src="http://cdn.bootcss.com/jquery/3.1.0/jquery.min.js"></script>
    <script type="text/javascript">
    function onSubmit(){
        var myForm = document.getElementById('form');
        var formData = new FormData(myForm);
        for (var p of formData){
            console.log(p);
        }
        $.ajax({
            type: 'POST',
            url: '/get',
            data: formData,
            dataType: 'json',
            processData: false, 
            contentType: false,
            success: function(data){console.log(data)},
            error: function(jqXHR){console.log(jqXHR)},
        })

    }
    </script>
</head>  
<body>  
    <form action="" method="post" name='info' id='form'>
        <input type="text" name="user" />
        <input type="text" name="email" />
        <input type="file" name="file" />
        <input type="file" name="file1" />
    </form>
    <button type="button" name='submit' onclick="onSubmit()">提交</button>
</body>  
</html>  

相关资料

使用HTML5 FormData轻松完成Ajax表单提交
form表单的进阶学习
JavaScript里的循环方法