上传文件返回的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 相关文章推荐
Confirmer JQuery确认对话框组件
Jun 09 Javascript
基于prototype扩展的JavaScript常用函数库
Nov 30 Javascript
JQuery优缺点分析说明
Apr 10 Javascript
分析Node.js connect ECONNREFUSED错误
Apr 09 Javascript
结合JQ1.9通过js正则判断各种浏览器版本的方法
Dec 30 Javascript
$.each遍历对象、数组的属性值并进行处理
Jul 18 Javascript
JS获取及设置TextArea或input文本框选择文本位置的方法
Mar 24 Javascript
详解Node.js开发中的express-session
May 19 Javascript
js中实例与对象的区别讲解
Jan 21 Javascript
vue中watch和computed为什么能监听到数据的改变以及不同之处
Dec 27 Javascript
如何利用node转发请求详解
Sep 17 Javascript
vue 如何从单页应用改造成多页应用
Oct 23 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那些琐碎的知识点(整理)
2017/05/20 PHP
javascript动画对象支持加速、减速、缓入、缓出的实现代码
2012/09/30 Javascript
javascript实现瀑布流自适应遇到的问题及解决方案
2015/01/28 Javascript
利用Angularjs和Bootstrap前端开发案例实战
2016/08/27 Javascript
浅谈JS之tagNaem和nodeName
2016/09/13 Javascript
js实现可输入可选择的select下拉框
2016/12/21 Javascript
原生JS实现图片左右轮播
2016/12/30 Javascript
jQuery实现别踩白块儿网页版小游戏
2017/01/18 Javascript
在vue项目中使用element-ui的Upload上传组件的示例
2018/02/08 Javascript
Webpack path与publicPath的区别详解
2018/05/03 Javascript
JavaScript创建对象方式总结【工厂模式、构造函数模式、原型模式等】
2018/12/19 Javascript
详解vue-element Tree树形控件填坑路
2019/03/26 Javascript
JQuery常见节点操作实例分析
2019/05/15 jQuery
javascript设计模式 ? 简单工厂模式原理与应用实例分析
2020/04/09 Javascript
[01:10]DOTA2 Supermajor:英雄,由我们见证
2018/05/14 DOTA
[49:08]OpTic vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Python基于回溯法子集树模板解决最佳作业调度问题示例
2017/09/08 Python
Python告诉你木马程序的键盘记录原理
2019/02/02 Python
谈一谈基于python的面向对象编程基础
2019/05/21 Python
Python Collatz序列实现过程解析
2019/10/12 Python
pytorch掉坑记录:model.eval的作用说明
2020/06/23 Python
Python扫描端口的实现
2021/01/25 Python
绝对令人的惊叹的CSS3折叠效果(3D效果)整理
2012/12/30 HTML / CSS
馥蕾诗美国官网:Fresh美国
2019/10/09 全球购物
自荐书范文
2013/12/08 职场文书
文明礼仪事迹材料
2014/01/09 职场文书
简历中的自我评价怎么写
2014/01/29 职场文书
个人充满哲理的自我评价
2014/02/20 职场文书
房产买卖委托公证书
2014/04/04 职场文书
公证书样本
2014/04/10 职场文书
党员群众路线个人整改措施思想汇报
2014/10/12 职场文书
2014年涉外离婚协议书范本
2014/11/20 职场文书
2015年共青团工作总结
2015/05/15 职场文书
学生会主席任命书
2015/09/21 职场文书
CSS巧用渐变实现高级感背景光动画
2021/12/06 HTML / CSS
世界十大狙击步枪排行榜
2022/03/20 杂记