json get请求 img src 带 中文 解决

的确中文很头疼，但无奈自己当初文件夹用中文命名，怎么也得跪着做完。

先贴图 最终要的效果

也就是实现当鼠标移上去 更多显示图片 

问题就这样开始了

首先我图片写入磁盘时用的是中文路径，所以可以看到一个中文命名的文件夹（清洁）

然后当我img取数据时 用的是Get请求 这个时候 乱码 因为tomcat post请求可以在web.xml中过滤，但是Get请求默认编码是ISO-8859-1，只要在tomcat /config/server.xml中设置下

加URIEncoding="UTF-8"即可，这也是网上方法，亲测有效。

如此我表格中的一张图片显示出来了，代码如下

 $('#dg').datagrid({
    title:'服务管理',
    fit:true,
    toolbar:"#tb",
    width:"auto",
    height:"auto",
    pageSize:5,
    pageList:[5,10,15,20],
    nowrap:false,
    striped: true,
    collapsible:true,
    url:'./queryServesList.action',
    loadMsg:'数据装载中......',
    remoteSort:false,
    fitColumns:true,
    frozenColumns:[[
     {field:'ck',checkbox:true}
    ]],
    columns:[[
     {title:'服务编号',field:'serid',width:'100',align:'center'},
     {title:'商家编号',field:'shopId',width:'100',align:'center'},
     {title:'服务名称',field:'sername',width:'120',align:'center'},
     {title:'服务简介',field:'sertitle',width:'120',align:'center'},
     {title:'服务详情',field:'serdescribe',width:'120',align:'center'},
     {title:'服务价格',field:'price',width:'120',align:'center'},
     {title:'评分',field:'sgrade',width:'120',align:'center'},
     {title:'图片',field:'pic',width:'250',align:'center',
         formatter:function(value,row,index){return '<img src="/pic/'+row.shopId+'/'+row.sername+'/'+row.pic+'"  style="width=100px; height:100px;"/><a οnmοusemοve="ajaxPic('+row.shopId+',"'+row.sername+'",$(this));" οnmοuseleave="movePic($(this));" >'
        	 +' 更多<div id="picBox" style="display:none;"></div></a>';}},
     {field:'action',title:'Action',width:'100',align:'center',  
            formatter:function(value,row,index){   
                    var e = '<a href="#" οnclick="editrow('+row.serid+')"><span class="glyphicon glyphicon-edit">编辑</span></a> ';  
                    var d = '<a href="#" οnclick="deleterow('+row.serid+','+row.shopId+',"'+row.sername+'")"><span class="glyphicon glyphicon-trash">删除</span></a>';  
                    return e+d;                  
            }  
        }

    ]],
    pagination:true,
    rownumbers:true
    
    
   });

 formatter:function(value,row,index){return '<img src="/pic/'+row.shopId+'/'+row.sername+'/'+row.pic+'"......;}

也就是这一句 可以显示图片 其中sername是中文（用的是easyui）

注意img src的路径<img src="/pic/'+row.shopId+'/'+row.sername+'/'+row.pic+'"......;}

如果改为<img src="pic/'+row.shopId+'/'+row.sername+'/'+row.pic+'"......;}

这样的话就会变成

路径中就会加入工程名

其实tomcat 的server.xml的配置已经基本解决了中文传输问题了

我后边的折腾一直是在 js之间传中文

报错

Uncaught SyntaxError: Unexpected identifier

后来是 又查了很多 特别要注意js 路径中单引号 双引号 嵌套 特别容易出错

<a οnmοusemοve="ajaxPic('+row.shopId+',"'+row.sername+'",$(this));" οnmοuseleave="movePic($(this));" >'
        	 +' 更多<div id="picBox" style="display:none;"></div></a>';}},

这里调用ajaxPic();方法  把中文传过去 要转换为字符串

function ajaxPic(shopId,sername,obja){
	var sn="";
	sn=sername;
    $.ajax({
        type:"post",
        traditional :true,  
        dataType:"json",
        url:'./queryServesPic.action',
        data:{"shop_id":shopId,"sername":sn}, 
        success:function(data){
        	var DivStr="";
            for(var i=0;i<data.picArray.length;i++){
               DivStr=DivStr+"<a style='text-align:center'>" +
                		"<img src='/pic/"+shopId+"/"+sn+"/"+data.picArray[i]+"' style='width=100px;height:100px;'/></a>";
                if(i%4==0&&i!=0)
                    DivStr=DivStr+"<br/>";
            }
            var objDiv=obja.find("div");
            objDiv.html(DivStr);
            objDiv.css({
                "display":"block",
                "position":"absolute",
                "left":"0",
                "top":"100px",
                "border":"1px solid #000",
                "box-shadow":"10px 10px 5px #888888",
                "background-color":"#fff"
            });
        }
    });
}

还有用&quot也行

我这边插入代码 直接转换成下边了

 var d = '<a href="#" οnclick="deleterow('+row.serid+','+row.shopId+',"'+row.sername+'")"><span class="glyphicon glyphicon-trash">删除</span></a>';  

这样折腾了许久 图片总算可以显示了