上传文件返回的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 $.isNumeric vs. $.isNaN vs. isNaN
Apr 15 Javascript
JavaScript实现查找字符串中第一个不重复的字符
Dec 29 Javascript
JavaScript+html5 canvas绘制的圆弧荡秋千效果完整实例
Jan 26 Javascript
第二章之Bootstrap 页面排版样式
Apr 25 Javascript
jQuery在header中设置请求信息的方法
Mar 06 Javascript
Angularjs根据json文件动态生成路由状态的实现方法
Apr 17 Javascript
Javascript实现找不同色块的游戏
Jul 17 Javascript
基于Vue2的独立构建与运行时构建的差别(详解)
Dec 06 Javascript
vue父组件点击触发子组件事件的实例讲解
Feb 08 Javascript
使用ESLint禁止项目导入特定模块的方法步骤
Mar 04 Javascript
javascript实现动态时钟的启动和停止
Jul 29 Javascript
详解JavaScript执行模型
Nov 16 Javascript
使用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远程采集图片详细教程
2014/07/01 PHP
Zend Framework动作助手Json用法实例分析
2016/03/05 PHP
php无限级分类实现评论及回复功能
2019/02/18 PHP
基于Laravel(5.4版本)的基本增删改查操作方法
2019/10/11 PHP
php5.3/5.4/5.5/5.6/7常见新增特性汇总整理
2020/02/27 PHP
return false;和e.preventDefault();的区别
2010/07/11 Javascript
使用jquery的ajax需要注意的地方dataType的设置
2013/08/12 Javascript
JavaScript中的object转换成number或string规则介绍
2014/12/31 Javascript
基于JavaScript实现根据手机定位获取当前具体位置(X省X市X县X街道X号)
2015/12/29 Javascript
BootStrap3中模态对话框的使用
2017/01/06 Javascript
js获取一组日期中最近连续的天数
2017/05/25 Javascript
vue中for循环更改数据的实例代码(数据变化但页面数据未变)
2017/09/15 Javascript
浅谈vue,angular,react数据双向绑定原理分析
2017/11/28 Javascript
vue中eventbus被多次触发以及踩过的坑
2017/12/02 Javascript
基于node简单实现RSA加解密的方法步骤
2019/03/21 Javascript
JS实现骰子3D旋转效果
2019/10/24 Javascript
ZK中使用JS读取客户端txt文件内容问题
2019/11/07 Javascript
[02:04]2014DOTA2国际邀请赛 BBC小组赛第三天总结
2014/07/12 DOTA
Python创建系统目录的方法
2015/03/11 Python
Python中用于检查英文字母大写的isupper()方法
2015/05/19 Python
python统计文本文件内单词数量的方法
2015/05/30 Python
Pandas探索之高性能函数eval和query解析
2017/10/28 Python
Python mutiprocessing多线程池pool操作示例
2019/01/30 Python
Django中密码的加密、验密、解密操作
2019/12/19 Python
Python用摘要算法生成token及检验token的示例代码
2020/12/01 Python
捷克领先的户外服装及配件市场零售商:ALPINE PRO
2018/01/09 全球购物
Camille Jewelry官网:现代女性时尚首饰
2019/07/07 全球购物
高级工程师英文求职信
2014/03/19 职场文书
企业安全生产责任书
2014/04/14 职场文书
二年级评语大全
2014/04/23 职场文书
2014年调度员工作总结
2014/11/19 职场文书
家长通知书家长意见
2015/06/03 职场文书
高中政治教师教学反思
2016/02/23 职场文书
详解Android中的TimePickerView(时间选择器)的用法
2022/04/30 Java/Android
js判断两个数组相等的5种方法
2022/05/06 Javascript
css3手动实现pc端横向滚动
2022/06/21 HTML / CSS