- 最近做一个额照片上传后裁剪的功能,用到 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。
分享到:
相关推荐
JSON 即 JavaScript Object Natation,它是一种轻量级的数据交换格式,非常适合于服务器与 JavaScript 的交互。本文将快速讲解 JSON 格式,并通过代码示例演示如何分别在客户端和服务器端进行 JSON 格式数据的处理。...
java导入导出,全部文件jar包,ajax提交form表单后返回提示数据,所有用到的文件,方法,数据,有利于学习,方便运用
ajax解析json型的数据,2中方法,有列子,也有注释,很详细。新手可以学习一下。主要就是功能代码。
form数据与json对象的互相转换(完整版) * 将web Form 的数据转化成json字符串 * 将json对象的值解析...2、通过AJAX从服务器得到json格式的数据,然后使用本工具解析数据填入form。从而可以实现无刷新的页面内容更新。
Jquery中使用ajax,表单post提交数据 插入oracle数据库, html对应的文件中 将form 表单数据 转化为json 格式
ajaxForm异步提交表单(含图片)ajaxForm异步提交表单(含图片)ajaxForm异步提交表单(含图片)
此项目是基于springMVC实现的,基本流程为从前台jsp页面使用Ajax文件上传导入excel文件(.xls(97-03)/.xlsx(07以后)),传到后台controller调用相应工具类解析后返回指定参数做后续处理. 1. POIUtil.java工具类 解析...
主要介绍了jquery序列化form表单,使用ajax提交后处理返回的json数据的示例,需要的朋友可以参考下
Ajax使用jQuery提交表单 文件
java生成json数据 ajax请求数据并解析json
PHP与AJAX返回json数据调用.zip
本篇文章主要介绍了jQuery Ajax前后端使用JSON进行交互示例,实现前端通过jQuery Ajax传输json到后端,后端接收json,对json进行处理,后端返回一个json给前端,有兴趣的可以了解一下。
这是一个ajax提交表单插件,支持文件上传,用起来非常方便。具体使用说明 http://blog.csdn.net/qq122453418/article/details/79511164 欢迎留言
Ajax请求接口,Django框架下从该接口接收Ajax发送的json数据,同时将新的json数据返回给Ajax,Ajax收到后在js进行处理,然后和页面内容交互。整个数据前后端交互全部采用json格式。代码高度封装,只需要更改json内容...
保存的数据有换行,处理ajax返回json数据时无法处理出现的错误;
jsp上传图片的示例,把文件保存在服务器和数据库,数据从数据库的获取,可以通过ajax来发送请求来获取,实现自动刷新的功能,实时获取数据库的数据,用json的方式返回给页面
使用AJAX提交Form表单实例演示
使用AJAX提交Form表单使用AJAX提交Form表单使用AJAX提交Form表单
Ajax如何无刷新提交form里面的内容。
利用jquery的ajax提交表单数据到后台。后台使用spring.