上传文件返回的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 相关文章推荐
超级退弹代码
Jul 07 Javascript
jQuery插件开发的两种方法及$.fn.extend的详解
Jan 16 Javascript
js实现文本框中焦点在最后位置
Mar 04 Javascript
jquery实现简单的无缝滚动
Apr 15 Javascript
JQuery实现左右滚动菜单特效
Sep 28 Javascript
jQuery的内容过滤选择器学习教程
Apr 18 Javascript
微信小程序 开发之快递查询功能的实现
Jan 09 Javascript
利用JS对iframe父子(内外)页面进行操作的方法教程
Jun 15 Javascript
vue微信分享到朋友圈 vue微信发送给好友
Nov 28 Javascript
vue resource发送请求的几种方式
Sep 30 Javascript
NestJs使用Mongoose对MongoDB操作的方法
Feb 22 Javascript
浅谈Vue的computed计算属性
Mar 21 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中通过ADODB库实现调用Access数据库之修正版本
2006/12/31 PHP
wamp安装后自定义配置的方法
2014/08/23 PHP
PHP基于MySQLI函数封装的数据库连接工具类【定义与用法】
2017/08/11 PHP
javascript实现博客园页面右下角返回顶部按钮
2015/02/22 Javascript
JavaScript三元运算符的多种使用技巧
2015/04/16 Javascript
javascript中$(function() {});写与不写有哪些区别
2015/08/10 Javascript
JS实现仿新浪黄色经典滑动门效果代码
2015/09/27 Javascript
使用jQuery制作遮罩层弹出效果的极简实例分享
2016/05/12 Javascript
Laravel中常见的错误与解决方法小结
2016/08/30 Javascript
如何提高Dom访问速度
2017/01/05 Javascript
JavaScript基于DOM操作实现简单的数学运算功能示例
2017/01/16 Javascript
JS实现新建文件夹功能
2017/06/17 Javascript
使用vue的v-for生成table并给table加上序号的实例代码
2017/10/27 Javascript
javascript变量提升和闭包理解
2018/03/12 Javascript
p5.js临摹旋转爱心
2019/10/23 Javascript
vue实现页面切换滑动效果
2020/06/29 Javascript
[34:44]Liquid vs TNC Supermajor 胜者组 BO3 第二场 6.4
2018/06/05 DOTA
跟老齐学Python之变量和参数
2014/10/10 Python
Python脚本实现虾米网签到功能
2016/04/12 Python
Python写的一个定时重跑获取数据库数据
2016/12/28 Python
Django数据库操作的实例(增删改查)
2017/09/04 Python
Python实现简单的用户交互方法详解
2018/09/25 Python
使用python itchat包爬取微信好友头像形成矩形头像集的方法
2019/02/21 Python
python3 实现爬取TOP500的音乐信息并存储到mongoDB数据库中
2019/08/24 Python
python获取网络图片方法及整理过程详解
2019/12/20 Python
Python打包工具PyInstaller的安装与pycharm配置支持PyInstaller详细方法
2020/02/27 Python
python 等差数列末项计算方式
2020/05/03 Python
美国知名运动产品零售商:Foot Locker
2016/07/23 全球购物
瑜伽灵感珠宝:Satya Jewelry
2018/01/06 全球购物
Expedia印度尼西亚站:预订酒店、廉价航班和度假套餐
2018/01/31 全球购物
澳洲的UGG雪地靴超级市场:Uggs.com.au
2020/04/06 全球购物
教师实习自我鉴定
2013/12/14 职场文书
酒店前厅员工辞职信
2014/01/08 职场文书
父亲生日宴会答谢词
2014/01/10 职场文书
解析CSS 提取图片主题色功能(小技巧)
2021/05/12 HTML / CSS
Python如何让字典保持有序排列
2022/04/29 Python