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

ajaxForm问题集锦,一个神奇的问题:使用ajaxForm提交表单上传文件后服务器端返回json数据IE浏览器无法解析

阅读更多
  •      最近做一个额照片上传后裁剪的功能,用到 jquery form的ajaxform提交图片保存,然后根据返回的JSON字符串直接在页面上显示出上传的照片,并且使用jcrop进行裁剪保存:JS代码如下

 

    $('#form_portrait').ajaxForm({
		dataType: 'json',
        success: function(json) {
			if(json.img){		
				$('#f_portrait_temp').attr("width",json.width);
				$('#f_portrait_temp').attr("height",json.height);
				$('#f_portrait_temp').attr("src","${base}"+json.img + "?r="+Math.random());
				$('#img_imgSrcPath').attr("value",json.img);
				$('#f_portrait_temp').show();
				$('#f_portrait_temp').ready(function(){
    				var api = jQuery.Jcrop('#f_portrait_temp',{
    					setSelect: [ 20, 20, 128, 155 ],
    					aspectRatio: 4/5,
    					onChange: showCoords,
    					onSelect: showCoords
    				});
					$('#btn_upload').hide();
					$('#btn_saves').show();
				});
			}
			else if(json.msg)
        		alert(json.msg);
        }
    });

 使用firefox和google 浏览器都很正常,firebug也能看到返回的json和图片裁剪也很正常,但唯独IE浏览器不行,点击上传按钮的时候浏览器直接弹出来下载请求页面,把json数据变成了下载文件,换了很多版本的jquery和form插件都不行。使用ajaxForm提交表单上传文件后服务器端返回json数据IE浏览器无法解析 ,到后来跟踪一个网站同样地功能才找到问题所在,原来使用ajaxForm,必须以html格式返回json数据. 也就是 response.setContentType("text/html; charset=utf-8"); 这样返回的数据才能被设置到回调函数里面. 而且貌似格式必须是 "key":"value" 也就是双引号,单引号还不行,这算不算一个bug呢?明明

dataType: 'json',

却要返回html。

 RenderUtils.renderHtml(response, json.toString(), "no-cache:false");

 

 

  • 表单中带有 <input type="file" >文件类型的输入框 则使用ajaxForm时会自动将Content-Type设置为文件上传的,这会导致Springmvc框架无法获取到表单数据,正常的接收头 Content-Type application/x-www-form-urlencoded; charset=UTF-8

 

 

还有一个插件有类似的问题

jquery插件ajaxfileupload 不能解析服务器端响应的json

 

contentType参数是一定要有的,否则浏览器总是提示将返回的JSON结果另存为文件,不会交给ajaxfileupload处理。这是因为struts2 JSON Plugin默认的contentType为application/json,而ajaxfileupload则要求为text/html。

 

分享到:
评论
3 楼 heroyanglei 2012-11-29  
Thanks a billion,我也碰到了同样的问题,在上传文件的时候发生的。
2 楼 wise_wei 2012-04-06  
嗯,遇到同样的问题。学习了!
而且还遇到一个问题就是如果:renderText("aaaa");那么在Firefox和chrome接收时会接收<pre>aaaa</pre>和
<pre style="word-wrap: break-word; white-space: pre-wrap;">aaaa</pre>。很疑惑……
1 楼 Mojarra 2012-03-04  
多谢,解决我刚才碰到的与这个同样的问题

相关推荐

    ajaxForm异步提交表单(含图片)

    AjaxForm是基于jQuery库的一个插件,它简化了表单的异步提交过程,支持多种类型的文件上传,包括图片。 使用ajaxForm的步骤如下: 1. **引入jQuery和ajaxForm插件**:确保在HTML文件中引入jQuery库和ajaxForm插件...

    使用JQuery实现从JSON对象转换为form提交数据

    在前端开发中,有时我们需要将JSON格式的数据转换成表单(form)的格式进行提交,以便于服务器端处理。在JavaScript的世界里,jQuery库提供了一种便捷的方式来进行这样的转换。本篇文章将深入探讨如何利用jQuery从...

    ajax 解析json数据

    在AJAX中解析JSON数据是常见的操作,尤其在前后端交互时。本篇将详细讲解两种AJAX解析JSON数据的方法,并提供示例代码。 方法一:使用`XMLHttpRequest`对象 在JavaScript中,我们可以使用内置的`XMLHttpRequest`...

    java导入导出全部文件jar包,ajax提交form表单返回提示数据

    在Java开发中,数据的导入导出是一项常见任务,尤其涉及到与前端交互时,如使用Ajax提交form表单。这个场景通常应用于数据处理、报表生成、数据库操作等。本话题将详细探讨Java如何进行文件的导入导出,特别是Excel...

    html对应的文件中 将form 表单数据 转化为json 格式

    接下来,我们可以使用jQuery的`ajax`方法将JSON数据发送到服务器,这里以Oracle数据库为例,通常会有一个后端接口来处理这些数据。假设后端接口URL为`/api/insertUser`,可以这样编写`ajax`请求: ```javascript $....

    Json数据解析服务器端加客户端代码

    在这个“Json数据解析服务器端加客户端代码”中,我们可以预见到包含的是关于如何在服务器端和客户端处理JSON数据的代码示例。 在服务器端,JSON数据通常用于接收来自客户端的请求数据,或者作为响应发送回给客户端...

    ajax提交form表单和上传图片

    在Web开发中,异步JavaScript和XML(Ajax)技术被广泛用于提高用户体验,尤其是在处理表单提交和文件上传时。本教程将详细讲解如何利用jQuery、jQuery Form插件以及Spring MVC框架来实现Ajax提交表单并上传图片。...

    Ajax使用jQuery提交表单 文件

    在这个“Ajax使用jQuery提交表单 文件”中,我们将探讨如何利用jQuery实现Ajax提交表单,从而实现异步数据传输,提高用户体验。 首先,我们需要理解jQuery中的Ajax函数`$.ajax()`。这是一个核心函数,可以进行各种...

    ajaxForm插件

    AjaxForm插件是一款广泛应用于网页表单提交的JavaScript库,它简化了使用AJAX技术进行异步表单提交的过程。这个插件使得开发者无需编写大量的AJAX代码,就能实现无刷新的表单提交,提高用户体验,同时保持服务器与...

    文件上传和ajax获取json的小示例

    这里我们探讨的是一个基于JSP的文件上传示例,以及如何通过AJAX技术实现实时刷新,从数据库获取并返回JSON数据到前端页面。 首先,文件上传是Web应用中常见的一种用户交互方式,允许用户将本地的文件(例如图片)...

    Ajax中使用JSON传输数据

    `json.js`文件可能是JavaScript中处理JSON的一个工具库,它提供了类似的功能,但用在客户端,帮助解析服务器返回的JSON字符串。例如,`eval()`或`JSON.parse()`函数可以用来解析JSON字符串为JavaScript对象: ```...

    jQuery中ajax请求后台返回json数据并渲染HTML的方法

    jQuery中的AJAX请求是一种非常常见的前端异步数据交互方式,它的作用是使得页面无需重新加载即可向服务器请求数据,并将数据动态地加载到页面中。JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,它...

    Ajax表单提交插件jquery form

    使用jQuery选择器选取要处理的表单,并调用`.ajaxForm()`或`.form()`方法初始化插件。 ```javascript $('#myForm').ajaxForm(options); ``` 其中,`#myForm`是表单的ID,`options`是一个可选的对象参数,用于...

    AJAX 想Struts2后台传送Json数据并向前台返回Json格式的数据

    4. 返回JSON数据:在Action的execute方法中,创建一个Map或自定义的Java对象,然后将其转化为JSON对象,最后通过ActionContext返回JSON结果。 **示例代码**: ```javascript // 前端Ajax请求 $.ajax({ url: '...

    ajax提交form表单

    在IT领域,特别是Web开发中,使用Ajax(Asynchronous JavaScript and XML)进行form表单的无刷新提交是一项关键技能。这种技术允许网页在不重新加载整个页面的情况下与服务器交互,从而提高了用户体验。以下是对给定...

    ajax提交表单到后台

    本主题将深入探讨如何使用jQuery库的AJAX功能将表单数据提交到后台,以及后台如何使用Spring框架来处理这些数据。下面将详细阐述这一过程。 ### 一、前端:使用jQuery的AJAX提交表单 1. **引入jQuery库**:首先...

    处理ajax返回带有换行的json数据

    3. **JSONP(JSON with Padding)**:如果跨域问题导致无法直接使用Ajax获取JSON数据,可以考虑使用JSONP。JSONP允许在HTML中嵌入一个`&lt;script&gt;`标签,其`src`属性指向服务端提供的回调函数,服务端将JSON数据包裹在...

    form数据与json对象的互相转换(完整版)

    form数据与json对象的互相转换(完整版) * 将web Form 的数据转化成json字符串 * 将json对象的值解析...2、通过AJAX从服务器得到json格式的数据,然后使用本工具解析数据填入form。从而可以实现无刷新的页面内容更新。

    不用form提交表单,用ajax上传文件

    "不用form提交表单,用ajax上传文件"是这种需求的一个典型场景。这种方式可以让用户在上传文件时无需等待页面刷新,而是通过Ajax(Asynchronous JavaScript and XML)技术实现实时反馈,提升交互体验。 在JDK 8版本...

    使用AJAX提交Form表单实例演示

    为了实现AJAX提交,我们需要在页面加载完成后绑定一个事件监听器到表单的提交事件。在`&lt;script&gt;`标签中编写以下jQuery代码: ```javascript $(document).ready(function() { $('#myForm').on('submit', function...

Global site tag (gtag.js) - Google Analytics