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 onmousemove="ajaxPic('+row.shopId+',"'+row.sername+'",$(this));" onmouseleave="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="#" onclick="editrow('+row.serid+')"><span class="glyphicon glyphicon-edit">编辑</span></a> ';                      var d = '<a href="#" onclick="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 onmousemove="ajaxPic('+row.shopId+',"'+row.sername+'",$(this));" onmouseleave="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="#" onclick="deleterow('+row.serid+','+row.shopId+',"'+row.sername+'")"><span class="glyphicon glyphicon-trash">删除</span></a>';  

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