上传文件返回的json数据会被提示下载问题解决方案


Posted in Javascript onDecember 03, 2014

最近项目中出现上传文件返回的json数据会被提示下载,只有在ie10+中才会出现这个问题。前端使用jQuery的插件ajaxForm提交表单,后台返回的数据格式为json。代码如下:

 后端Python:

def jsonp(func):

    """Wraps JSONified output for JSONP requests."""

    @wraps(func)

    def decorated_function(*args, **kwargs):

        callback = request.args.get('callback', False)

        temp_content =  func(*args, **kwargs)

        if isinstance(temp_content, dict):

            temp_content.setdefault('success', True)

            temp_content.setdefault('code', 200)

            try:

                temp_content = json.dumps(temp_content, indent=4)

            except UnicodeDecodeError:

                try:

                  temp_content = ujson.dumps(temp_content)

                except StandardError as e:

                  logger.exception(e)

                  temp_content = json.dumps({'success': False, 'code': 500, 'info': 'INVALID_CONTENT'})

            temp_content = cgi.escape(temp_content)

            if callback:

                # 依据 http://evilcos.me/?p=425,jsonp添加/**/头部会安全一些

                content = '/**/' + str(callback) + '(' + temp_content + ')'

                mimetype = 'application/javascript'

                headers = {'charset':'utf-8'}

                return current_app.response_class(content, mimetype=mimetype,headers=headers)

            else:

                mimetype = 'application/json'

                headers = {'charset':'utf-8'}

                content = temp_content

                return current_app.response_class(content, mimetype=mimetype,headers=headers)

        elif isinstance(temp_content, basestring):

            temp_content = cgi.escape(temp_content)

            return temp_content

        else:

            return temp_content

    return decorated_function

@mod.route('/patch/install.json', methods=['POST'])

@jsonp

def patch_install():

    return {'data': 'data'}

前端js代码:

$('#form').ajaxSubmit({

    url      : '/patch/install.json',

    type     : 'post',

    dataType : 'json',

    iframe   : true,

    success: function(res) {

        // code

    }

});

解决办法:

需要将后端返回的数据格式改成text/html格式的,如下:

def plain(func):

    """wrap text/html reponse"""

    @wraps(func)

    def _inner(*args, **kwargs):

        resp = func(*args, **kwargs)

        if isinstance(resp, dict):

            resp.setdefault('success', True)

            resp.setdefault('code', 200)

            resp = json.dumps(resp)

            resp = cgi.escape(resp)

            return current_app.response_class(resp, mimetype='text/html', headers={'charset': 'utf-8'})

        elif isinstance(resp, basestring):

            resp = cgi.escape(resp)

            return current_app.response_class(resp, mimetype='text/html', headers={'charset': 'utf-8'})

        else:

            return resp

    return _inner

@mod.route('/patch/install.json', methods=['POST'])

@plain

def patch_install():

    return {'data': 'data'}

注意:此例后端是用Python,如果项目中遇到同样问题,改成对应语言

总结,其实解决这个问题,简单的说就一句话“将后端返回的数据格式改成text/html格式的”

Javascript 相关文章推荐
使用JQuery进行跨域请求
Jan 25 Javascript
javascript 二分法(数组array)
Apr 24 Javascript
详谈JavaScript 匿名函数及闭包
Nov 14 Javascript
AngularJS入门知识之MVW类框架的编程思想探讨
Dec 08 Javascript
学习使用jquery iScroll.js移动端滚动条插件
Mar 24 Javascript
JavaScript中setter和getter方法介绍
Jul 11 Javascript
AngularJS基础 ng-csp 指令详解
Aug 01 Javascript
javascript实现table单元格点击展开隐藏效果(实例代码)
Apr 10 Javascript
angularJs的ng-class切换class
Jun 23 Javascript
zTree节点文字过多的处理方法
Nov 24 Javascript
Js on及addEventListener原理用法区别解析
Jul 11 Javascript
vue css 相对路径导入问题级踩坑记录
Jun 05 Vue.js
使用jQuery实现验证上传图片的格式与大小
Dec 03 #Javascript
使用正则表达式的格式化与高亮显示json字符串
Dec 03 #Javascript
jquery中获取元素里某一特定子元素的代码
Dec 02 #Javascript
JS逆序遍历实现代码
Dec 02 #Javascript
javascript框架设计读书笔记之数组的扩展与修复
Dec 02 #Javascript
javascript框架设计读书笔记之字符串的扩展和修复
Dec 02 #Javascript
javascript框架设计读书笔记之模块加载系统
Dec 02 #Javascript
You might like
php网页后退不再出现过期
2007/03/08 PHP
php断点续传之文件分割合并详解
2016/12/13 PHP
php进行md5加密简单实例方法
2019/09/19 PHP
js 动态添加标签(新增一行,其实很简单,就是几个函数的应用)
2009/03/26 Javascript
5款Javascript颜色选择器
2009/10/25 Javascript
文件编码导致jquery失效的解决方法
2013/06/26 Javascript
require.js深入了解 require.js特性介绍
2014/09/04 Javascript
ECMAScript 5严格模式(Strict Mode)介绍
2015/03/02 Javascript
jQuery处理json数据返回数组和输出的方法
2015/03/11 Javascript
基于jQuery.Hz2Py.js插件实现的汉字转拼音特效
2015/05/07 Javascript
实现无刷新联动例子汇总
2015/05/20 Javascript
基于javascript如何传递特殊字符
2015/11/30 Javascript
JavaScript实现九九乘法表的简单实例
2016/06/07 Javascript
jQuery中deferred对象使用方法详解
2016/07/14 Javascript
JavaScript面向对象编写购物车功能
2016/08/19 Javascript
使用Bootstrap Tabs选项卡Ajax加载数据实现
2016/12/23 Javascript
package.json文件配置详解
2017/06/15 Javascript
深入理解React中何时使用箭头函数
2017/08/23 Javascript
Vue的实例、生命周期与Vue脚手架(vue-cli)实例详解
2017/12/27 Javascript
基于vue实现一个神奇的动态按钮效果
2019/05/15 Javascript
Vue axios与Go Frame后端框架的Options请求跨域问题详解
2020/03/03 Javascript
JavaScript代码简化技巧实例解析
2020/09/09 Javascript
Python在Console下显示文本进度条的方法
2016/02/14 Python
浅谈python中set使用
2016/06/30 Python
Python实现向服务器请求压缩数据及解压缩数据的方法示例
2017/06/09 Python
浅谈python函数调用返回两个或多个变量的方法
2019/01/23 Python
详解python实现小波变换的一个简单例子
2019/07/18 Python
Python lambda表达式原理及用法解析
2020/08/18 Python
python+requests接口自动化框架的实现
2020/08/31 Python
python dict如何定义
2020/09/02 Python
使用phonegap获取设备的一些信息方法
2017/03/31 HTML / CSS
期终自我鉴定
2014/02/17 职场文书
深入开展党的群众路线教育实践活动心得体会
2014/11/05 职场文书
总经理助理岗位职责
2015/01/31 职场文书
2015年人事科工作总结
2015/04/28 职场文书
Log4j.properties配置及其使用
2021/08/02 Java/Android