ajaxSubmitDemo

xiaoxiao2021-02-28  13

场景: ajaxSubmit ,json,struts2,提醒保存“json 返回值 ajaxSubmit,json,struts2,提示保存“json返回值” 问题回顾: 1.需求:jsp页面通过<input type="file" ...>上传图片,后台对应action对图片做一些压缩,描边等处理后,将处理完的image返回到页面显示出来。 2.解决方案:采用ajaxSubmit提交,通过返回的json数据,将image填充到对应的<div>中 >>>>>>>>>>想看最终结果的直接下跳看标题5<<<<<<<<<<<<<< 遇到的几个问题: 假设<input type="file" id="upImage" name="upImage"> 1.傻瓜式的认为,通过普通的ajax提交就能做到(代码如下) $.ajax({ url:xxxx, data:'upImage='+ $('#upImage').val(), .... success:function(returnData){....} }) 错误点:后台得到的只是String值,并不是通过form序列化的File 2.将form 序列化以后 进行上传 $.ajax({ url:xxxx, [color=red]data:$('#form1').formSerialize(),[/color] .... success:function(returnData){....} }) 结果:不成功,打印了一下$('#form1').formSerialize(),发现里面没有对upImage数据,这个原因不明,希望看到这个的大神们给个解释,3Q 3.通过ajaxSubmit上传______第一步 需要的jsjquery.jsjquery.form.js <1> js代码 $("#form1").ajaxSubmit( { url : "previewImageDeal", datatype : "json", success : function(returnData){ ... }, error:function(){ alert('error'); } }); <2>struts.xml代码 <action name="XXXX" class="XXXXXXX" method="XXXXXX"> <result name="deal" type="json"> <param name="includeProperties">dealStatus,dealMsg,dImgPath</param> </result> </action> <3>java 代码 String dealStatus = null; String dealMsg = null; String dImgPath = null; //图片处理 //给必要的变量赋值 js中的ajax方法,直接进的error.......无语 4.通过ajaxSubmit上传______第二步 参考网上的一些资料,在3的基础上将js中dataType:'json'去掉。strust.xml返回值类型仍然是json即<result name="deal" type="json">>>>成功进了 success方法 随后在success中打印了返回的结果 新的问题出现了4.1 问题:success(retrunData)的returnData被一对<pre></pre>标签包住了应对方法 :tong过js的replace方法将<pre></pre>去掉 得到的数据是期望的json格式;进一步的通过 var jasonData = eval('('+returnData+')'); ;然后业务逻辑处理>>>在firfox下调试成功转战ie.chrmo,新的问题又出现了4.2 问题:在IE、Chrmo中都提示 是否下载“XXXXXXXXXXX” ,打开一看,是返回的json数据,我表示很无语应对方法:上网查各种资料 。。。。。。。。没有一个完全匹配遇到的这个问题,但是,通      过网上的讨论可以定位问题所在>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>之所以会出现下载,是因为struts中对json的理解是 application/json ,而ajaxSubmit是提交的表单(虽然只需要对表单中的file处理),对应的action对表单数据处理之后通过struts.xml的重定向,<result name="success" type="json">导致了提示“下载json”>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> 5.通过ajaxSubmit上传______第三步 吐血应对方法,参考了网上各家资料,最后终于跑通了,中间的曲解就不记录了,只记录一下对的东西,写到这里我想起了一句话,“遇到问题的时候是求助于前辈们,还是自己查资料解决”,此时我感觉自己查资料印象更深刻,所以希望看到的朋友们,遇到问题的时候千万不要不假思索的就去问别人,找人帮忙写代码,解决问题的过程能让自己对一些东西有更深层次的理解,这个在求助于别人的时候是得不到。 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> 5.1 java中关键代码 private JSONObject returnData = null; //这个到底有没有用,还不知道,有点疲劳,不想做实验了 response.setContentType("text/xml;charset=utf-8"); //将返回结果保存到map中,然后转成json Map<String, String> map = new HashMap<String, String>(); map.put(); map.put(); map.put(); returnData = JSONObject.fromObject(map);//转JSON response.getWriter().print(returnData );//打印 5.2 xml关键部分 <action name="xxxx"class="xxx" method="XXX" > <result name="deal" type="json"> <param name="contentType">text/html</param> <param name="includeProperties">returnData</param> </result> </action> 5.3 js关键部分 [color=red]说明:java中通过print打印了想要的json结果,struts.xml中又通过includeProperties强行收留了returnData,所以在js的success方法中会看到两个json结果块。为什么要includeProperties呢,因为不加includeProperties标签或者加空标签(<param name="includeProperties"></param>)会得到一大大大大堆不想要的结果,看着就烦,而且还消耗系统和网络资源[/color] $("#form1").ajaxSubmit( { url : "action名字", // datatype : "json",//彻底注释掉 success : function(returnData){ returnData = returnData.substring(0,returnData.indexOf('}')+1);//只要print的json结果 var isWindow = false; //window系统路径是"\" 要进行转换 linux不需要转换 if(returnData.indexOf('\\\\') >= 0){ isWindow = true; //将路径中的"\"替换,不然parseJSON会出错 returnData = returnData.replace(/\\\\/g,'_'); } var jsonData = jQuery.parseJSON(returnData); if(jsonData.dealStatus == '0'){ //错误处理 alert(jsonData.dealMsg); $('#upImage').val(''); $('#previewTR').css({"height":"0px"}); $('#previewDiv').html(''); }else{ //成功处理图片 var tempImagPath = jsonData.previewImagePath ; var finalImagePath = jsonData.finalImagePath ; if(isWindow){//window系统将"_"再转换成"/" tempImagPath = tempImagPath.replace(/_/g,'/'); finalImagePath = finalImagePath.replace(/_/g,'\\'); } $('#finalImagePath').val(finalImagePath); $('#previewTR').css({"height":jsonData.previewHeight+'px'}); $('#previewDiv').html('<img src=\"'+tempImagPath+'\" />' ); } } });
转载请注明原文地址: https://www.6miu.com/read-2300180.html

最新回复(0)