`
emeifeng
  • 浏览: 7529 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

使用jQuery ajax文件上传ajaxfileupload组建碰到的问题:返回json带有pre标记的解决方案

阅读更多

开发货比百家购物搜索的后台,增加文件异步上传的功能,前端使用的js组建是jquery,曾经使用过ajaxfileupload,直接使用,碰到了个问题:

返回jason格式的数据报了错。于是,firebug下跟踪下,结果如下:


结果是正常的。

检查下spring servlet的配置,也没有错。
    <bean
        class="org.springframework.web.servlet.view.ContentNegotiatingViewResolver">
        <property name="defaultContentType" value="application/json" />
        <property name="mediaTypes">
            <map>
                <entry key="json" value="application/json" />
                <entry key="html" value="text/html" />
            </map>
        </property>
        <property name="viewResolvers">
            <list>
                <bean class="org.springframework.web.servlet.view.BeanNameViewResolver" />
                <bean
                    class="org.springframework.web.servlet.view.InternalResourceViewResolver">
                    <property name="viewClass"
                        value="org.springframework.web.servlet.view.JstlView" />
                    <property name="prefix" value="/jsp/" />
                    <property name="suffix" value=".jsp" />
                </bean>
            </list>
        </property>
        <property name="defaultViews">
            <list>
                <!-- 输出为JSON数据 -->
                <bean
                    class="org.springframework.web.servlet.view.json.MappingJacksonJsonView">
                </bean>
            </list>
        </property>
    </bean>

接着分析下ajaxfileupload源代码,ajaxfileupload 是创建了个iframe,来实现异步上传文件,firebug看下iframe的内容,发现莫名其妙的加上了<pre>,难怪导致解析json数据发生错误。

 

继续看源代码,最下面发现:

if ( type == "json" )
            eval( "data = " + data );

改成:

        if ( type == "json" ){
            data = jQuery.parseJSON(jQuery(data).text());
        }

OK,如此问题就解决了。

比较购物网站 :http://www.huobibaijia.com/ 。研究比较购物技术,感兴趣的朋友QQ联系。

QQ:909546261

 

 本文为原创,雷同者均为抄袭,可以转载作为学习研究或备份所用,本人保留一切权利,转载请注明出处。

原文:http://emeifeng.iteye.com/blog/1307506

  • 大小: 15.1 KB
分享到:
评论

相关推荐

    ajaxFileUpload插件,C#返回Json数据报错问题的解决方案

    在使用ajaxFileUpload插件进行文件上传,尤其是图片上传时,可能会遇到与C#后端交互返回Json数据时出现的错误。本篇文章将详细解析两种常见的错误及其解决方案。 首先,错误信息一:“jQuery.handleError is not a ...

    解决使用ajaxFileUpload上传控件出现的问题:回调函数总是进入error或success

    总的来说,解决`ajaxFileUpload`上传控件的问题,需要从客户端代码、服务器响应、网络条件等多个角度进行排查,确保每个环节都正确无误。通过深入理解`ajaxFileUpload`的源码和Ajax的工作原理,我们可以更有效地解决...

    使用jquery的上传插件:ajaxfileupload.js实现excel文件上传

    在本文中,我们将深入探讨如何使用jQuery的上传插件`ajaxfileupload.js`来实现Excel文件的上传功能。首先,我们需要了解这个插件的工作原理以及它如何与jQuery库结合使用。 `ajaxfileupload.js`是一个基于jQuery的...

    ajax+jquery+struct+ajaxfileupload有增删改功能上传文件例子

    在IT行业中,构建一个...以上就是使用Ajax、jQuery、Struts和AjaxFileUpload实现有增删改功能的文件上传系统的核心知识和技术点。这个例子展示了如何利用现代Web技术提高用户体验,同时也体现了前后端分离的设计思想。

    Jquery上传插件文件ajaxfileupload.js 修复版下载

    使用Jquery做上传文件处理时,用到了ajaxfileupload.js 这个第三方代码,但是这个js几乎就是半成品,问题很多。现在整理如下并附修复版的ajaxfileupload.js下载。 问题: 1:无法带参数提交,只能上传文件; 2:...

    ajaxFileUpload上传文件时无返回结果,调整函数后出现syntaxError :unexpected

    在使用AjaxFileUpload进行文件上传时,可能会遇到一些常见的问题,比如“无返回结果”或者在尝试解决问题后出现“syntaxError: unexpected”的错误提示。这个情况通常与JavaScript语法错误、服务器端响应格式、...

    jquery实现的ajax文件上传功能

    jquery实现的ajax文件上传功能 $.ajaxFileUpload ( { url:'doajaxfileupload.php', secureuri:false, fileElementId:'fileToUpload', dataType: 'json', success: function (data, ...

    ajaxfileupload.js完整使用全套(带对应jquery+demo)

    `ajaxfileupload.js`是一个JavaScript库,用于实现异步文件上传功能,避免了传统文件上传时页面刷新的问题。它与jQuery的结合使得文件上传更加简便、高效。 首先,我们来理解`ajaxfileupload.js`的核心概念。这个...

    jquery+ajaxfileupload+html文件上传

    3. **配置AjaxFileUpload**:使用jQuery选择器获取文件输入元素,并调用AjaxFileUpload方法进行配置,包括设置上传URL、成功回调、错误回调等。 4. **触发上传**:绑定一个点击事件到上传按钮,当点击时触发文件上传...

    ajaxfileupload以及jquery的js

    AjaxFileUpload与jQuery的结合使用为Web应用提供了高效、流畅的文件上传体验。AjaxFileUpload通过Ajax实现无刷新上传,而jQuery则简化了前端开发,两者结合能极大地提升项目效率和用户体验。同时,JSON2.js保证了跨...

    ajax上传图片之ajaxfileupload

    在IT行业中,Ajax上传图片是一种常见的前端技术,用于在不刷新整个页面的情况下实现文件的上传。AjaxFileUpload是实现这一功能的一个JavaScript库,它利用Ajax技术与后台进行异步通信,提高了用户体验。在这个场景中...

    使用jQuery ajaxFileUpload+servlet实现文件上传

    在这个场景下,我们将探讨如何结合`jQuery ajaxFileUpload` 和Servlet实现文件上传的功能。 首先,`jQuery ajaxFileUpload` 插件允许用户在不刷新页面的情况下上传文件,提供了一种友好的用户体验。它的主要优点...

    在Web API中使用jQuery AJAX实现文件上传的例子

    这个例子展示了如何在ASP.NET Web API中使用jQuery AJAX实现文件上传的基本流程。客户端通过AJAX发送文件到服务器,服务器接收文件并进行相应的处理。注意,实际应用中还需要考虑错误处理、文件大小限制、安全问题...

    ajaxfileupload1.0.zip 文件无刷新上传代码

    这个压缩包“ajaxfileupload1.0.zip”提供了一种实现无刷新文件上传的解决方案。无刷新上传,也称为异步文件上传,是现代网页应用中常用的一个功能,它允许用户在不重新加载整个页面的情况下发送文件到服务器。这种...

    jQuery异步上传文件插件ajaxFileUpload详细介绍

    主要介绍了jQuery异步上传文件插件ajaxFileUpload详细介绍,本文首先讲解了ajaxFileUpload的参数、错误提示等知识,然后给出了简单使用实例和ASP.NET MVC模式下的使用实例,需要的朋友可以参考下

    jquery实现异步文件上传ajaxfileupload.js

    本文实例为大家分享了jquery实现异步文件上传的具体代码,供大家参考,具体内容如下 ajaxfileupload.js 异步上传文件: 直接引用。 调用方法: $.ajaxFileUpload({ url:'',//后台接口地址 type: post, secureuri...

    jquery.ajaxFileUpload

    为了解决这一问题,jQuery提供了许多插件,如AjaxFileUpload,它允许开发者实现异步(Ajax)文件上传,提高用户体验,无需刷新整个页面即可完成文件提交。 ### 1. AjaxFileUpload 插件简介 AjaxFileUpload是jQuery...

    ajaxfileupload 返回时 去掉 <pre>与 jquery1.7支持解决 方法

    这篇博客“ajaxfileupload 返回时 去掉 &lt;pre&gt;与 jquery1.7支持解决 方法”可能讨论了在使用AjaxFileUpload时遇到的两个问题:1) 服务器返回的响应数据被包裹在`&lt;pre&gt;`标签中,导致格式化异常;2) 该组件与jQuery 1.7...

    AJAXFileUpload ajax 异步文件上传 进度条

    AJAXFileUpload是一种基于AJAX技术的异步文件上传组件,它允许用户在不刷新页面的情况下上传文件,并且可以实时显示上传进度,提供良好的用户体验。本文将深入探讨AJAXFileUpload的工作原理、实现方式以及其在实际...

    AjaxFileUpload 文件上传

    AjaxFileUpload 是一个专门用于实现异步文件上传的JavaScript组件,它利用了Ajax技术,让用户可以在不刷新页面的情况下完成文件上传,提供了更为流畅和友好的用户体验。 AjaxFileUpload 的核心原理在于利用Ajax...

Global site tag (gtag.js) - Google Analytics