- 最近做一个额照片上传后裁剪的功能,用到 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
还有一个插件有类似的问题
contentType参数是一定要有的,否则浏览器总是提示将返回的JSON结果另存为文件,不会交给ajaxfileupload处理。这是因为struts2
JSON Plugin默认的contentType为application/json,而ajaxfileupload则要求为text/html。
分享到:
相关推荐
AjaxForm是基于jQuery库的一个插件,它简化了表单的异步提交过程,支持多种类型的文件上传,包括图片。 使用ajaxForm的步骤如下: 1. **引入jQuery和ajaxForm插件**:确保在HTML文件中引入jQuery库和ajaxForm插件...
在前端开发中,有时我们需要将JSON格式的数据转换成表单(form)的格式进行提交,以便于服务器端处理。在JavaScript的世界里,jQuery库提供了一种便捷的方式来进行这样的转换。本篇文章将深入探讨如何利用jQuery从...
在AJAX中解析JSON数据是常见的操作,尤其在前后端交互时。本篇将详细讲解两种AJAX解析JSON数据的方法,并提供示例代码。 方法一:使用`XMLHttpRequest`对象 在JavaScript中,我们可以使用内置的`XMLHttpRequest`...
在Java开发中,数据的导入导出是一项常见任务,尤其涉及到与前端交互时,如使用Ajax提交form表单。这个场景通常应用于数据处理、报表生成、数据库操作等。本话题将详细探讨Java如何进行文件的导入导出,特别是Excel...
接下来,我们可以使用jQuery的`ajax`方法将JSON数据发送到服务器,这里以Oracle数据库为例,通常会有一个后端接口来处理这些数据。假设后端接口URL为`/api/insertUser`,可以这样编写`ajax`请求: ```javascript $....
在这个“Json数据解析服务器端加客户端代码”中,我们可以预见到包含的是关于如何在服务器端和客户端处理JSON数据的代码示例。 在服务器端,JSON数据通常用于接收来自客户端的请求数据,或者作为响应发送回给客户端...
在Web开发中,异步JavaScript和XML(Ajax)技术被广泛用于提高用户体验,尤其是在处理表单提交和文件上传时。本教程将详细讲解如何利用jQuery、jQuery Form插件以及Spring MVC框架来实现Ajax提交表单并上传图片。...
在这个“Ajax使用jQuery提交表单 文件”中,我们将探讨如何利用jQuery实现Ajax提交表单,从而实现异步数据传输,提高用户体验。 首先,我们需要理解jQuery中的Ajax函数`$.ajax()`。这是一个核心函数,可以进行各种...
AjaxForm插件是一款广泛应用于网页表单提交的JavaScript库,它简化了使用AJAX技术进行异步表单提交的过程。这个插件使得开发者无需编写大量的AJAX代码,就能实现无刷新的表单提交,提高用户体验,同时保持服务器与...
这里我们探讨的是一个基于JSP的文件上传示例,以及如何通过AJAX技术实现实时刷新,从数据库获取并返回JSON数据到前端页面。 首先,文件上传是Web应用中常见的一种用户交互方式,允许用户将本地的文件(例如图片)...
`json.js`文件可能是JavaScript中处理JSON的一个工具库,它提供了类似的功能,但用在客户端,帮助解析服务器返回的JSON字符串。例如,`eval()`或`JSON.parse()`函数可以用来解析JSON字符串为JavaScript对象: ```...
jQuery中的AJAX请求是一种非常常见的前端异步数据交互方式,它的作用是使得页面无需重新加载即可向服务器请求数据,并将数据动态地加载到页面中。JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,它...
使用jQuery选择器选取要处理的表单,并调用`.ajaxForm()`或`.form()`方法初始化插件。 ```javascript $('#myForm').ajaxForm(options); ``` 其中,`#myForm`是表单的ID,`options`是一个可选的对象参数,用于...
4. 返回JSON数据:在Action的execute方法中,创建一个Map或自定义的Java对象,然后将其转化为JSON对象,最后通过ActionContext返回JSON结果。 **示例代码**: ```javascript // 前端Ajax请求 $.ajax({ url: '...
在IT领域,特别是Web开发中,使用Ajax(Asynchronous JavaScript and XML)进行form表单的无刷新提交是一项关键技能。这种技术允许网页在不重新加载整个页面的情况下与服务器交互,从而提高了用户体验。以下是对给定...
本主题将深入探讨如何使用jQuery库的AJAX功能将表单数据提交到后台,以及后台如何使用Spring框架来处理这些数据。下面将详细阐述这一过程。 ### 一、前端:使用jQuery的AJAX提交表单 1. **引入jQuery库**:首先...
3. **JSONP(JSON with Padding)**:如果跨域问题导致无法直接使用Ajax获取JSON数据,可以考虑使用JSONP。JSONP允许在HTML中嵌入一个`<script>`标签,其`src`属性指向服务端提供的回调函数,服务端将JSON数据包裹在...
form数据与json对象的互相转换(完整版) * 将web Form 的数据转化成json字符串 * 将json对象的值解析...2、通过AJAX从服务器得到json格式的数据,然后使用本工具解析数据填入form。从而可以实现无刷新的页面内容更新。
"不用form提交表单,用ajax上传文件"是这种需求的一个典型场景。这种方式可以让用户在上传文件时无需等待页面刷新,而是通过Ajax(Asynchronous JavaScript and XML)技术实现实时反馈,提升交互体验。 在JDK 8版本...
为了实现AJAX提交,我们需要在页面加载完成后绑定一个事件监听器到表单的提交事件。在`<script>`标签中编写以下jQuery代码: ```javascript $(document).ready(function() { $('#myForm').on('submit', function...