早睡早起,方能养生!
Sleep early rise early, way to keep healthy!

FormData 对象的使用

super
2018-06-12 18:10
views 1708

使用FormData提交表单实例:

 

 1)创建一个表单

 

<form id="form" enctype="multipart/form-data" method="post">
    Title:<input type="text" name="title" />
    Synopsis:<textarea name="synopsis"></textarea> 
    Img:<input type="file" name="img" />
</form>

 

 2)提交表单
 

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script>
    //创建FormData对象
    var formObj = $("#form")[0];
    //var formObj = document.getElementById("form");//同上
    var formData = new FormData(formObj);//实例化FormData对象,传入表单对象,注意FormData大小写
    
    //ajax发送表单数据到后台
    $.ajax({
        url: "xx.php",
        type: 'POST',
        data: formData,
        dataType: "JSON",
        async: false,
        cache: false,                    //不缓存
        processData: false,              //jquery不要去处理发送的数据
        contentType: false,              //jquery不要去设置Content-type请求头
        success: function(data) {
            //
        }
    })
</script>

 

 3)ajax提交后,可以通过F12 Network找到本次请求

 

 在Headers的最底部可以看到发送的数据

 

1111.jpg

 

4)后台接收

 

 PHP打印

 

print_r($_FILES);
print_r($_POST);

 

blob.png

 

 成功获取到了表单中的数据。

 

5)后台处理

 

 balabalabala…

 后台处理并返回处理结果



分享
0 条讨论
top