前端杂记

模板引擎使用thtmeleaf.

给div中的表格赋值：
如图，点击红色框位置，让数据动态变化。页面代码如下：

<a href="javascript:;" data-index="0" class="active"  th:οnclick="showAbNormal()">故障设备监控</a>
<div id="abNormal" class="content" style="display: none;">
                        <div class="head">
                            <span class="col">故障时间</span>
                            <span class="col">设备地址</span>
                            <span class="col">异常原因</span>
                        </div>
                        <div class="marquee-view">
                            <div class="marquee" th:fragment="errVedios"   id="errVedios">
                                <div class="row"  th:each="errVedio:${errVedios}">
                                    <span class="col"th:text="${errVedio.vedioTime}"></span>
                                    <span class="col" th:text="${errVedio.unitName}"></span>
                                    <span class="col">网络故障</span>
                                    <span class="icon-dot"></span>
                                </div>
                            </div> 
                        </div>
                    </div>

js代码如下(赋值在此处，注意隐藏和显示div的方法)：

function  showAbNormal() {
        	var prefix = ctx + "swsp/screen";
            $.ajax({
                url: prefix + "/homePage/showABNormal",
                type: "POST",
                success: function (data) {        
                	 console.log(data);
                	 $("#errVedios").append(data);
                	 $('#abNormal').show();
                     $('#normal').hide();          
                }
            })
        }

后端代码如下：

@PostMapping("/homePage/showABNormal")
	@ResponseBody
	public List<ZhxfVedio> selectErrVedio(Model mmap)
	{	
		String state = "1";	//错误状态
		List<ZhxfVedio> errVedios = zhxfVedioService.selectErrVedio(state);
		
		mmap.addAttribute("errVedios", errVedios);
		return errVedios;
	}

二、html中JS有效，但是在JSP页面中无效。
原因：
jQuery的function前面的$与JSP页面的JSTL的$冲突了，直接导致不认识此对象方法。
解决方法：
把jQuery代码里面的$全改成jQuery就可以正常使用了！