thymeleaf layui icon icons get displayed as strings from backstage

problem:

Written above, the icon can be displayed.

In this way the above, get the icon to display a string from the background only, no icon is displayed. Style introduction is no problem.

I use springboot + ssm + thymeleaf.

Here is my solution:

js added: data.field [ 'icon'] = $ ( '# icon') text (), $ ( '# icon') text () is to get the value of the selected icon... And data: $ (data.form) .serialize () to change data: data.field, it is important, but at the moment I do not know any difference. as follows:

//监听提交
 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;
          });

At first I put the value of the icon assigned to input box, and submit a form, the lower part of Figure comments:

<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>

This back-end data submitted to the above is similar to the & # xe68e; strings can be seen, after the submission of the background to turn over and saved to the database could not see the data, like a sky string, like this:

See the blue section above, can really explain the selected data, the console print is also the case, it should be encoded issues now? !

At last:

       Did not find the answer on the Internet that he tried for a long time, the first time thmeleaf (and feel this relationship, freemark there is no such thing), no specific cause is found, the function be realized. Trouble know the cause of a friend, please let me know -