问题:
上面这样写,图标能显示出来。
上面这样,从后台获取图标只显示一个字符串,不显示图标。样式引入是没问题的。
我用的是springboot+ssm+thymeleaf。
下面是我的解决方案:
js中增加:data.field['icon']=$('#icon').text(),$('#icon').text()就是获取选中图标的值。并且data: $(data.form).serialize()改成data:data.field,这一点很重要,不过目前我不知道有啥区别。如下:
//监听提交
form.on('submit(add)', function(data){
data.field['icon']=$('#icon').text();
$.ajax({
url: data.form.action,
type: data.form.method,
//data: $(data.form).serialize(),
data:data.field,
success:function(){
layer.alert("增加成功", {icon: 6},function () {
// 获得frame索引
var index = parent.layer.getFrameIndex(window.name);
//关闭当前frame
parent.layer.close(index);
window.parent.location.reload();
});
}
});
return false;
});
刚开始我把图标的值赋给input框,和表单一块提交,下图注释的部分:
<div class="layui-input-inline">
<div style="margin-left: 20px; margin-top: 5px">
<ul>
<li style="display: inline-block; width: 50px;" id="menu-icon">
<i class="layui-icon" id="icon" style="font-size: 25px;" th:text="${module.icon}">
</i>
</li>
<li style="display: inline-block;">
<i class="layui-btn layui-btn-primary layui-btn-sm" id="select_icon"> 选择图标</i>
</li>
</ul>
</div>
<!-- <div style="dmargin-left: 20px; margin-top: 5px;display: none;">
<ul>
<li style="display: inline-block; width: 50px;" id="menu-icon2">
<input id="icon2" name="icon">
</li>
</ul>
</div> -->
</div>
上面这种提交到后台数据是个类似的字符串能看到,改过之后提交后台和保存到数据库都看不到数据,像个长空字符串,像下面这样:
看上面蓝色的部分,能选中说明确实是有数据的,控制台打印的也是这种情况,应该是编码的问题吧?!
最后:
在网上没找到答案,自己试了好久,第一次用thmeleaf(感觉和这个有关系,freemark就没这些事),具体原因没找到,功能算是实现了。麻烦知道原因的朋友请告诉我一声~