上传文件返回的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制作的幻灯片图集效果打包下载
Feb 12 Javascript
读jQuery之三(构建选择器)
Jun 11 Javascript
Extjs TimeField 显示正常时间格式的代码
Jun 28 Javascript
js 获取页面高度和宽度兼容 ie firefox chrome等
May 14 Javascript
JavaScript中String.match()方法的使用详解
Jun 06 Javascript
jquery图片轮播特效代码分享
Apr 20 Javascript
JS中如何实现点击a标签返回页面顶部的问题
Jan 19 Javascript
vue2.0 实现导航守卫的具体用法(路由守卫)
May 17 Javascript
vue+elementUI(el-upload)图片压缩,默认同比例压缩操作
Aug 10 Javascript
解决vue中使用less/sass及使用中遇到无效的问题
Oct 24 Javascript
原生JavaScript实现留言板
Jan 10 Javascript
浅谈JS的原型和原型链
Jun 04 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
15个小时----从修改程序到自己些程序
2006/10/09 PHP
分享5个非常有用的Laravel Blade指令
2018/05/30 PHP
js 与 php 通过json数据进行通讯示例
2014/03/26 Javascript
自定义百度分享的分享按钮
2015/03/18 Javascript
JavaScript中获取纯正的undefined的方法
2016/03/06 Javascript
JS与Ajax Get和Post在使用上的区别实例详解
2016/06/08 Javascript
详解堆的javascript实现方法
2016/11/29 Javascript
性能优化之代码优化页面加载速度
2017/03/01 Javascript
jQuery表单设置值的方法
2017/06/30 jQuery
使用proxy实现一个更优雅的vue【推荐】
2018/06/19 Javascript
JS执行控制之节流模式实例分析
2018/12/21 Javascript
如何阻止小程序遮罩层下方图层滚动
2019/09/05 Javascript
微信提示 在浏览器打开 效果实现过程解析
2019/09/10 Javascript
jQuery cookie的公共方法封装和使用示例
2020/06/01 jQuery
jQuery实现鼠标拖拽登录框移动效果
2020/09/13 jQuery
vue+iview实现分页及查询功能
2020/11/17 Vue.js
Python中pygame安装方法图文详解
2015/11/11 Python
Python使用arrow库优雅地处理时间数据详解
2017/10/10 Python
Python入门必须知道的11个知识点
2018/03/21 Python
对python读取CT医学图像的实例详解
2019/01/24 Python
Django 对IP访问频率进行限制的例子
2019/08/30 Python
Python3.x+迅雷x 自动下载高分电影的实现方法
2020/01/12 Python
python shell命令行中import多层目录下的模块操作
2020/03/09 Python
Spring @Enable模块驱动原理及使用实例
2020/06/23 Python
css3实现背景颜色渐变让图片不再是唯一的实现方式
2012/12/18 HTML / CSS
Linux内核的同步机制是什么?主要有哪几种内核锁
2013/01/03 面试题
投资合作协议书范本
2014/04/17 职场文书
大学生社会实践方案
2014/05/11 职场文书
护理专科学生自荐书
2014/07/05 职场文书
会计个人实习计划书
2014/08/15 职场文书
学生意外伤害赔偿协议书
2014/09/17 职场文书
委托证明书
2014/09/17 职场文书
2014卖家双十一活动策划书
2014/09/29 职场文书
介绍信的写法
2015/01/31 职场文书
学术研讨会主持词
2015/07/04 职场文书
新闻发布会新闻稿
2015/07/17 职场文书