ajaxfileupload回到json带<pre>

最新推荐文章于 2021-01-26 14:00:09 发布
转载 最新推荐文章于 2021-01-26 14:00:09 发布 · 400 阅读 · 0

本文介绍了一个老系统中使用AjaxFileUpload上传文件时遇到的问题：返回的JSON数据包含&lt;pre&gt;标签导致回调函数无法正常执行。文中详细解释了问题原因并提供了一种解决方案，即通过修改ajaxfileupload.js中的数据解析方式来避免该问题。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

转自：http://blog.youkuaiyun.com/ye1992/article/details/21178579

ajaxfileupload返回json带<pre>

老系统，将文件上传方式修改为ajax上传，调用ajaxfileupload.js

出错现象：

文件正常提交，后台接收正常，action中返回json正常，用火狐查看，响应的值也是正常的

但是，ajax调用js中，就是不走success的方法。

经过调查，是因为返回的json中，带有<pre>标签。

修正方法：

ajaxfileupload.js文件，uploadHttpData中

  【eval( "data = " + data );】-->【data = jQuery.parseJSON(jQuery(data).text());】


ajaxfileupload.js（struts2返回json后，success接收不到，修改后的版本）
10-12
ajaxfileupload.js（struts2返回json后，success接收不到，修改后的版本） strust2+ajaxfileupload,成功后的回调
ajaxFileUpload插件，C#返回Json数据报错问题的解决方案
08-28
ajaxFileUpload插件在尝试使用`eval`函数将数据转化为JSON对象时，由于`<pre>`标签的存在，导致解析失败。解决这个问题的方法是先去除`<pre>`标签，然后用`eval`函数处理数据。有两种不同的JavaScript实现方式： **...
ajaxfileupload返回json带<pre>
kabuchino的博客
09-12 294
老系统，将文件上传方式修改为ajax上传，调用ajaxfileupload.js 出错现象： 文件正常提交，后台接收正常，action中返回json正常，用火狐查看，响应的值也是正常的 但是，ajax调用js中，就是不走success的方法。 经过调查，是因为返回的json中，带有&lt;pre&gt;标签。 修正方法： ajaxfileupload.js文件，uploadHttpD...
ajaxfileupload 返回json解析出错 带pre标签
sdjxgd的博客
02-26 305
解决办法，修改ajaxfileupload.js 文件 找到 uploadHttpData函数： 修改此处 if (type == “json”) //以下为新增代码 data = r.responseText; var start = data.indexOf(">"); if(start != -1) { var end = data.indexOf("<", start + 1)...
ajaxFileUpload上传带参数,返回值改成json格式
weixin_34249367的博客
08-20 240
/*直接复制在自己的js文件中就能使用*/ jQuery.extend({ createUploadIframe: function (id, uri) { //create frame var frameId = 'jUploadFrame' + id; if (window.ActiveXObject) { var i...
ajaxfileupload 返回值_ajaxFileUpload上传文件返回json无法解析
weixin_39800387的博客
12-20 228
最近做一个文件上传的功能，还要绑定数据传输到后台，为了不影响前端的体验，采用ajax发送请求。找了一些资料，网上的用ajaxupload这个插件。但是无论成功还是失败都是执行的error的回调函数。后台我采用springmvc返回的json，在前段debug后发现，原来返回的虽然是json格式，但是它又包装了一层。{"retcode":"0"}没办法查了好多资料发现有的大牛也遇到了这个问题，有的还...
解决ajaxFileUpload插件与C#返回Json数据报错问题
要解决这个问题，我们需要在接收到数据后，先去除`<pre>`标签，然后才能用`eval`或`JSON.parse`函数转换成JSON对象。以下是一个示例，展示了如何通过JavaScript处理这个问题： ```javascript function fileUpload()...
js ajaxfileupload.js上传报错的解决方法
10-22
然而，如果JSON数据被`<pre>`标签包裹，会导致解析失败。为了解决这个问题，我们可以修改`uploadHttpData`函数，添加正则表达式匹配并去除`<pre>`标签，如下所示： ```javascript // 修改前 if ( type == "json" ) ...
ajaxfileupload 返回值_ajaxFileUpload上传带参数,返回值改成json格式
weixin_39540023的博客
01-26 304
/*直接复制在自己的js文件中就能使用*/jquery.extend({createuploadiframe: function (id, uri) {//create framevar frameid = 'juploadframe' + id;if (window.activexobject) {var io = document.createelement('');if (typeof ur...
JAVA调用可执行jar包并传参
千里之行，始于足下！
12-17 7769
1：在java代码里面直接调用可执行jar包，无参数 public class RunCMD { public static void main(String[] args) { try { runCMD(); } catch (IOException e) { // TODO Auto-generated catch block e.printStackTrace(); } } private static void runCMD() throws I
兼容ie8,9,10能够正确返回json结果的ajaxfileupload.js
08-07
struts2+jquery+ajaxfileupload 需要正确配置struts2文件struts-xml文件中需要配置extends="json-default"。如果返回json结果需要在前台js中解析json数据，要用jquery的jQuery.parseJSON(json)。
ajaxFileUpload 上传文件 以及 返回值 带 <pre> 标签问题
hejiakuo的专栏
05-08 8698
$.ajaxFileUpload({                 url:'upfile.action',                 secureuri: });
ajaxfileupload返回的json数据带<pre></pre>标签
u014746965的专栏
04-22 8462
问题：项目中使用ajaxfileupload上传文件，当返回数据dataType置为json，始终不走success方法    解决办法：后来调查后发现返回的json格式的数据首尾加上了标签 ,导致使用eval方法转换json报错。    修正方法：    ajaxfileupload.js文件，uploadHttpData中   【eval( "data = " + data )
Extjs Ajax提交表单，返回结果中增加了"<pre></pre>"标记。
haiker
01-27 206
设置contentType=text/html就可以解决问题啦 Ext.Ajax.request({ form: 'basicFrm', success:function(result) { var res = result.responseText; var json = Ext.util.JSON.decode(result.responseText...
ajaxSubmit提交上传文件的表单返回的json数据带有pre></pre>标签
weixin_30478923的博客
10-15 269
一种方法是先截掉<pre></pre>标签，再转换处理，如下：$('#form').ajaxSubmit({ type:'post', url:'action', success:function(data){ //截掉<pre></pre>标签 var start = data.indexOf(">"); if (start ...
返回Json数据浏览器带上<pre></pre>标签解决方法
wenniuwuren
01-19 7958
问题： 当后台获取到前台传来的文件时(例如上传功能， 导入功能)....
ajaxfileupload使用中的问题
阅读之后，对你有帮助，那就点个赞再走吧
06-12 425
1，报错，<token 类似的错误。 这个是数据返回时的报错。 修改： uploadHttpData: function( r, type ) { var data = !type; data = type == "xml" || data ? r.responseXML : r.responseText; // ifthe type ...
web文件上传（一）--文件上传与json上传区别及方法
热门推荐
xcymorningsun的专栏
10-27 2万+
Web文件上传方法总结大全 上传文件与与上传数据区别 上传数据主要指json等简单字符串，上传文件指的是上传word、excel图片等。在上传数据的时候enctype默认为第一个application/x-www-form-urlencoded，而上传数据包含文件的时候要用第二种multipart/form-data 值 描述 appl
ajaxfileupload.js文件上传自定义返回值为json
weixin_34148456的博客
01-19 257
ajaxfileupload.js组件的确好用，但是那个返回值格式也太恶心了吧！让人家定义一个dataType:"json"，最后给返回一堆html，什么意思？也许是鄙人愚钝，索性修改了下源代码的处理函数，手动返回json得了。修改代码：大约在ajaxfileupload.js 的185行左右，有这么个函数：uploadHttpData原始代码与改后代码对比： 一，修改ajaxfileupload...
thirdScriptError at api uploadFile success callback function SyntaxError: Unexpected token o in JSON at position 1 at JSON.parse (<anonymous>)
最新发布
06-13
<think>好的，我现在需要解决用户在调用API的uploadFile方法时，成功回调函数出现的SyntaxError错误，具体是“Unexpectedtoken oin JSONat position1”。首先，我得分析这个错误的原因。JSON解析错误通常发生在尝试将非JSON格式的字符串转换为JSON对象时。错误信息中的“Unexpected tokeno”提示在位置1遇到了字母‘o’，而正常情况下，JSON字符串应该以花括号{或方括号[开始。可能的情况是服务器返回的数据已经是JSON对象，而不是字符串，所以在没有序列化的情况下直接进行解析，导致错误。接下来，参考用户提供的引用内容。引用[3]提到了使用jquery的ajaxFileUpload上传时遇到的问题，可能与服务器配置有关，但用户当前的问题集中在成功回调的数据解析上。引用[2]中处理了微信小程序跳转时的参数编码和解码，这涉及到encodeURIComponent和decodeURIComponent的使用，可能对当前问题有帮助。可能的解决步骤：1.检查服务器返回的数据格式。如果服务器已经返回了JSON对象，而客户端又尝试解析，就会出错。需要确保接收的是字符串，再进行解析。2.在客户端使用JSON.stringify将数据转换为字符串，发送前编码，接收后解码，如引用[2]中的示例。 3.在回调函数中，先确认data的类型。如果是对象，无需再次解析；如果是字符串，再使用JSON.parse。 4.添加错误处理，如try-catch块，捕获解析异常，便于调试。 验证这些步骤，比如在成功回调中打印data的类型，查看是否是对象。如果是，直接使用即可；否则需要先字符串化再解析。同时，检查服务器响应是否正确设置了Content-Type为application/json，这可能会影响客户端对数据的处理方式。 最后，可能需要调整上传函数的实现，确保数据格式正确，或者在解析前进行必要的转换，比如使用JSON.stringify处理后再解析，避免意外的token错误。</think>在调用API的`uploadFile`方法时出现`SyntaxError: Unexpected token o in JSON at position 1`错误，通常是因为**服务器返回的数据不符合JSON格式**，或客户端未正确处理数据格式转换。以下是逐步解决方案： --- ### **1. 错误原因分析** - **根本原因**：JSON解析时遇到非法字符`o`，表明数据可能是**已解析过的JSON对象**而非字符串，直接调用`JSON.parse()`会导致重复解析。 - **典型场景**： - 服务器返回的数据实际是`{...}`对象，但客户端仍尝试解析 - 数据未正确序列化（如包含特殊字符未转义）[^2] --- ### **2. 解决方案** #### **步骤1：确认服务器返回的数据格式** 在`success`回调中先打印原始数据： ```javascript success: function(data) { console.log('原始数据:', data); // 检查数据类型 console.log('数据类型:', typeof data); // 应为"string" } ``` - 若`typeof data`为`object`，说明数据已被自动解析，**无需再调用`JSON.parse()`**。 - 若为`string`，需检查字符串是否符合JSON格式（如是否以`{`或`[`开头）。 --- #### **步骤2：强制数据序列化** 如果服务器返回的数据未正确序列化（如未设置`Content-Type: application/json`），可在客户端手动处理： ```javascript success: function(rawData) { try { // 确保数据为字符串后解析 const data = typeof rawData === 'string' ? JSON.parse(rawData) : rawData; console.log('解析结果:', data); } catch (e) { console.error('JSON解析失败:', e); } } ``` --- #### **步骤3：处理特殊字符转义** 若数据包含`&`、`=`等特殊字符，需参考类似微信小程序的转码方法[^2]： ```javascript // 发送前转码 const encodedData = encodeURIComponent(JSON.stringify(payload)); // 接收后解码 const decodedData = JSON.parse(decodeURIComponent(encodedData)); ``` --- #### **步骤4：检查服务器响应头** 确保服务器响应头包含： ```http Content-Type: application/json; charset=utf-8 ``` 否则客户端可能将JSON视为普通文本处理。 --- ### **3. 完整代码示例** ```javascript uploadFile: function(elId) { if ($("#" + elId).val() === "") { alert("请选择上传文件!"); return; } $.ajaxFileUpload({ url: svMap.get('xRequestPic'), secureuri: false, fileElementId: elId, dataType: 'json', // 明确预期返回类型 success: function(rawData, status) { try { // 兼容字符串和对象两种格式 const data = typeof rawData === 'string' ? JSON.parse(rawData) : rawData; console.log('上传成功:', data); // 更新页面逻辑... } catch (e) { console.error('数据处理失败:', e); } }, error: function(data, status, e) { alert('上传失败: ' + e); } }) } ``` --- ### **4. 扩展验证方法** - **使用Postman测试接口**：直接验证服务器返回的数据格式。 - **网络抓包分析**：通过浏览器开发者工具的Network面板查看原始响应内容。 ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值