ajaxSubmit,json,struts2,提示保存“json返回值”

最新推荐文章于 2021-02-23 20:40:16 发布

shuixian361

最新推荐文章于 2021-02-23 20:40:16 发布

阅读量189

点赞数

分类专栏： struts2 文章标签： ajax jquery json ViewUI

本文链接：https://blog.csdn.net/shuixian361/article/details/84228914

版权

struts2 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

问题回顾：
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){....}

})

[color=red]错误点：后台得到的只是String值，并不是通过form序列化的File[/color]

2.将form 序列化以后进行上传


$.ajax({
    url:xxxx,
    [color=red]data:$('#form1').formSerialize(),[/color]
    ....
    success:function(returnData){....}

})

[color=red]结果：不成功，打印了一下$('#form1').formSerialize()，发现里面没有对upImage数据，这个原因不明，希望看到这个的大神们给个解释，3Q[/color]

3.通过ajaxSubmit上传______第一步
[color=red]
需要的js
jquery.js
jquery.form.js
[/color]
<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;

    //图片处理

    //给必要的变量赋值

[color=red]js中的ajax方法，直接进的error.......无语[/color]

4.通过ajaxSubmit上传______第二步
[color=red]
参考网上的一些资料，在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”
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

[/color]

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]
[code="java"]
$("#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+'\" />' );
				}
			}
	});