ajax 下载

原本ajax是不能下载文件的，原因：因为response，一般请求浏览器是会处理服务器输出的response，例如生成png、文件下载等,然而ajax请求只是个“字符型”的请求，即请求的内容是以文本类型存放的。文件的下载是以二进制形式进行的，虽然可以读取到返回的response，但只是读取而已，是无法执行的，说白点就是js无法调用到浏览器的下载处理机制和程序。

要想下载文件，可以直接使用标签

<a href="/media">点击下载Excel</a>
or
location.href = '/media';

这次点击下载就出现如下理想效果。

但是还有一种情况就是可以利用ajax请求下载：

$.ajax({
    type: "POST",
    url: url,
    data: params,
    success: function(response, status, request) {
        var disp = request.getResponseHeader('Content-Disposition');
        if (disp && disp.search('attachment') != -1) {  //判断是否为文件
            var form = $('<form method="POST" action="' + url + '">');
            $.each(params, function(k, v) {
                form.append($('<input type="hidden" name="' + k +
                        '" value="' + v + '">'));
            });
            $('body').append(form);
            form.submit(); //自动提交
        }
    }
});

上面的方法是个技巧，

AJAX发送参数到后台后，后台处理后，传数据到前台，Ajax在success里面构建了一个from表单, 当后台传来的是文件时，自动点击提交按钮，文件就会被下载。

ajax文件上传

上面是文件下载，下面说一下文件上传，这个网上就很多例子了

前台form表单的提交方式有很多种，例如：

form表单submit直接提交的方法
Ajax提交的方法
jquery提交的方法
原生js提交的方法

这里总结一下ajax提交的两种方式：

1.serialize() 方法：

通过序列化表单值，创建 URL 编码文本字符串。我们可以选择一个或多个表单元素（比如 input 及/或文本框），或者 form 元素本身。序列化的值可在生成 AJAX 请求时用于 URL 查询字符串中。
所用到的语法为：

$("form").serialize()

这里的$(“form”)操作对象是代表表单元素集合的 jQuery 对象，而不是js对象。

提交方法的代码段：

$('form').submit(function() {
  alert($(this).serialize());
  return false;
});

最终序列化后，表单中数据会一下面这种方式提交到后台：a=1&b=2&c=3&d=4&e=5
这种方式处理表单时所适用的input标签类型是有限的，只适用于一些常用的类型例如text、checkbox、select、date等等，但是对于file文件类型的input框并不适用，那我们在用到ajax提交方式的时候应该如何提交file类型的input框数据呢?

2.封装FormData 对象，直接用$.ajax提交

论坛上有人提及到FormData的封装方式，将form表单中的内容封装成formdata的数据格式
FormData 对象可以把form中所有表单元素的name与value组成一个queryString，提交到后台，在使用Ajax提交时，使用FormData对象可以减少拼接queryString的工作量。

FormData的使用方法也是非常简单，直接传入form表单对象即可，如下：

var form = $('#form1');  
var formdata = new FormData(form);

使用这种方式将数据封装后，file类型的文件数据即可以键值对的方式封装在formdata中，然后用ajx提交，方法如下：

 $.ajax({  
        type : "POST",  
        url : "houtai/123.do",  
        data : formData,
        async: false,  
        cache: false,  
        contentType: false,  
        processData: false,
        success : function(msg) {  
            if(msg){
            alert('提交成功！');
            } 
        }  
});

有一点需要注意的是，以formdata的方式提交时需要添加async: false, 同步，否则后台无法接收到前台传过来的file文件数据，这样的提交方式，既可以提交任何一种type类型标签，又可以在提交之后得到返回结果，方便快捷又实用。

使用ajaxForm上传文件

另外还可以使用 ajaxForm上传文件，他们是jQuery form插件。

jQuery Form插件是一个优秀的Ajax表单插件，可以非常容易地、无侵入地升级HTML表单以支持Ajax。
jQuery Form有两个核心方法 – ajaxForm() 和 ajaxSubmit()，它们集合了从控制表单元素到决定如何管理提交进程的功能。

具体使用可以参考：http://malsup.com/jquery/form/

中文可以参考： https://blog.csdn.net/qq_38602656/article/details/78668924

AJAX POST方式上传文件到后台和下载后台传来的文件

ajax 下载

ajax文件上传

1.serialize() 方法：

2.封装FormData 对象，直接用$.ajax提交

使用ajaxForm上传文件

猜你喜欢