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

最近项目中出现上传文件返回的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格式的”

赞 (0)

相关推荐

  • zepto中使用swipe.js制作轮播图附swipeUp,swipeDown不起效果问题

    在移动web开发中,由于手机界面较小,为了能展示更多的图片经常使用轮播图并且还需要考虑到手机流量的问题,通过请教他人以及百度,个人感觉swipe.js比较好用. 它是一个纯javascript工具,不需要跟其它js库一起导入,同时兼容jQuery和zepto,压缩版的大小只有6kb很适合移动端的开发,它的git地址:https://github.com/thebird/swipe 在git上对其的使用方式介绍的相当清楚,关键代码如下 <div id='slider' class='swipe'>

  • javascript跨域方法、原理以及出现问题解决方法（详解）

    javascript跨域方法、原理以及出现问题解决方法（详解）

    javascript跨域访问是web开发者经常遇到的问题,什么是跨域,一个域上加载的脚本获取或操作另一个域上的文档属性,下面将列出三种实现javascript跨域方法: 1.基于iframe实现跨域 基于iframe实现的跨域要求两个域具有aa.xx.com,bb.xx.com这种特点,也就是两个页面必须属于一个基础域(例如都是xxx.com,或是xxx.com.cn),使用同一协议(例如都是 http)和同一端口(例如都是80),这样在两个页面中同时添加document.domain,就可以实

  • 让javascript加载速度倍增的方法(解决JS加载速度慢的问题)

    通常我们的网站里面会加载一些js代码,统计啊,google广告啊,百度同盟啊,阿里妈妈广告代码啊, 一堆,最后弄得页面加载速度很慢,很慢. 解决办法:换一个js包含的方式,让javascript加载速度倍增. 把通常加载方式: <script src="xxxx.js"></script> 改变成: 复制代码 代码如下: <script type="text/javascript"> document.write("&l

  • JavaScript中0和""比较引发的问题

    今天在公司的时候发现了一个很奇怪的Js的问题,以前也没有注意到,我从数据库中取出某一个字段的值,而这个字段值刚好是0,然后我在判断这个值是不是等于""时,就出现了如下的问题: 就是JS认为0==""是成立的,也就是0==""的结果是true, 验证代码如下: <script type="text/javascript"> if(==""){ alert('==""的结果是:'

  • node.js中的favicon.ico请求问题处理

    node.js中的favicon.ico请求问题处理

    复制代码 代码如下: var http=require("http");  var server=http.createServer();  server.on("request",function(req,res){5         console.log(req.url);      res.end();  });  server.listen(1337,"127.0.0.1"); 这样的代码在请求时会出现两条请求: 第一条时URL地址为用

  • js onmousewheel事件多次触发问题解决方法

    我想做一个首屏和第二屏之间滚动鼠标滚轮就可以整平切换的效果,遇到了很多问题,后来在kk的帮助下,终于解决了这个问题,甚是欢喜,于是记录一下: 我最初的代码是这样的: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <style> div { width: 700px; height: 1000px; } .red { back

  • 5种处理js跨域问题方法汇总

    前两天碰到一个跨域问题的处理,使用jsonp可以解决.(http://www.jb51.net/article/57889.htm) 最近再整理了一下: 1.jsonp. ajax请求,dataType为jsonp.这种形式需要请求在服务端调整为返回callback([json-object])的形式.如果服务端返回的是普通json对象.那么调试的时候,在chrome浏览器的控制台会报"Uncaught SyntaxError: Unexpected token"错误:在firefox

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

    最近项目中出现上传文件返回的json数据会被提示下载,只有在ie10+中才会出现这个问题.前端使用jQuery的插件ajaxForm提交表单,后台返回的数据格式为json.代码如下: 后端Python: 复制代码 代码如下: def jsonp(func):     """Wraps JSONified output for JSONP requests."""     @wraps(func)     def decorated_functio

  • golang Gin上传文件返回前端及中间件实现示例

    目录 上传文件 文件返回给前端 中间件 中间件调用两种方式 单个中间件 多个中间件 上传文件 package main import ( "fmt" "github.com/gin-gonic/gin" ) func main() { router := gin.Default() // 给表单限制上传大小 (默认 32 MiB) // router.MaxMultipartMemory = 8 << 20 // 8 MiB router.POST(&q

  • layui 上传文件_批量导入数据UI的方法

    使用layui的文件上传组件,可以方便的弹出文件上传界面. 效果如下: 点击[批量导入]按钮调用js脚本importData(config)就可以实现数据上传到服务器. 脚本: /*** * 批量导入 * config.downUrl 下载模板url * config.uploadUrl 上传文件url * config.msg * config.done 上传结束后执行. */ function importData(config){ var default_config = { msg:"数

  • 使用Jupyter notebooks上传文件夹或大量数据到服务器

    我们都知道如何上传单个文件,但如果有大量文件或大量数据,这就扎心了,可能会变得单调.因此目前想到一种办法,将文件压缩成zip包,然后再解压到工作目录 解压缩文件 import zipfile import os files = zipfile.ZipFile('homework.zip', 'r') files.extractall(os.getcwd()) files.close() 打包成zip 但是,有时可能还需要从笔记本中下载多个文件.有几种方法可以做到这一点,但最简单的方法是压缩目录并

  • 解决asp.net上传文件超过了最大请求长度的问题

    解决asp.net上传文件超过了最大请求长度的问题

    错误消息:超过了最大请求长度 错误原因:asp.net默认最大上传文件大小为4M,运行超时时间为90S. 解决方案 1. 修改web.config文件可以改变这个默认值 <configuration> <system.web> <httpRuntime maxRequestLength="1048576" executionTimeout="3600" /> </system.web> <configuratio

  • jQuery Ajax使用FormData上传文件和其他数据后端web.py获取

    XMLHttpRequest Level 2 添加了一个新的接口--FormData.与普通的 Ajax 相比,使用 FormData 的最大优点就是我们可以异步上传二进制文件. jQuery 2.0+的版本支持FormData 方法一:使用<form>表单初始化FormData对象方式上传文件 •前端(JQuery): <form enctype="multipart/form-data"> <input type="file" na

  • Android通过HTTP协议实现上传文件数据

    本文实例为大家分享了Android通过HTTP协议实现上传文件数据的具体代码,供大家参考,具体内容如下 SocketHttpRequester.java package cn.itcast.utils; import java.io.BufferedReader; import java.io.ByteArrayOutputStream; import java.io.DataOutputStream; import java.io.InputStream; import java.io.Inp

  • iOS开发中以application/json上传文件实例详解

    本文通过实例代码给大家讲解iOS中以application/json上传文件的形式,具体内容详情大家参考下本文. 在和sever后台交互的过程中.有时候.他们需要我们iOS开发者以"application/json"形式上传. NSString *accessUrl = [NSString stringWithFormat:@"%@/xxx",@"https://www.xxxxx.com:xxxx"]; NSMutableURLRequest

  • ajax实现无刷新上传文件功能

    本文实例为大家分享了ajax实现无刷新上传文件功能的具体代码,供大家参考,具体内容如下 详细代码如下 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>ajax无刷新上传文件</title> <script> window.o

  • plupload+artdialog实现多平台上传文件

    plupload+artdialog实现多平台上传文件

    在没介绍正文之前先给大家介绍下plupload知识 plupload简介 Plupload是有TinyMCE的开发者开发的,为您的内容管理系统或是类似上传程序提供一个高度可用的上传插件.Plupload 目前分为一个核心API 和一个jQuery上传队列部件,这样使你可以直接使用或是自己定制. plupload特性 Plupload使用jQuery的组件做为选择文件和上传文件的队列组件. Plupload使用Flash,Silverlight,HTML5,Gears,BrowserPlus.Fi

随机推荐