zoukankan      html  css  js  c++  java
  • 在ajax post处理文件下载

    我有一个JavaScript应用程序需要使用ajax post请求发送到某个URL,然后后端会根据请求中的参数进行相应的工作,生成一个可下载的压缩包,等待下载。必须使用的ajax的原因是这里需要模拟提交表单的动作,因为表单里的数据是在之前查询的时候已经填好的,这里只需要重新将表单里的数据重新提交到新的接口就行,所以必须使用ajax post来实现。但是ajax不能直接支持文件下载,所以在ajax post请求之后,会响应一个json串,里面是需要下载的文件地址,然后再使用js构造form表单进行下载,具体代码如下:
    var exportUserDefine = function (e) {
                    $.ajax({      
                        type: "POST",      
                        url: "/index.php/input/info_export",     
                        data: $("#_form").serialize(),
                        success: function(response, status, request) {
                            ret_data = JSON.parse(response)
                            path = ret_data['path']
                            filename = ret_data['filename']
                            console.log('path : '+path+"
    filename : "+filename)
                            console.log('create form...')
                            var form = $('<form method="POST" action="/index.php/input/download_pkg">');
                            form.append($('<input type="hidden" name="path" value="' + path + '">'));
                            form.append($('<input type="hidden" name="filename" value="' + filename + '">'));
                            $('body').append(form)
                            form.submit();
                            $("input[name='export']").prop('disabled', false);
                            $("input[name='export']").val('导出');
                        },
                        beforeSend: function () {
                            console.log("input[name='export'] disabled set true")
                            $("input[name='export']").val('正在导出...');
                            $("input[name='export']").prop('disabled', true);
                        }
                    });
                }
  • 相关阅读:
    创建无线网命令行
    网站推荐(多用于IT)
    企业级快速开发平台
    用代码截图去理解MVC原理
    .Net 下开发使用JSON
    EF实体框架数据操作基类
    EF实体框架数据操作接口
    开启GZIP
    EF快速开发定义数据接口类
    仿造w3school的试一试功能,实现左侧编辑框,右侧效果页面
  • 原文地址:https://www.cnblogs.com/lrxing/p/8458526.html
Copyright © 2011-2022 走看看