ajax渲染页面，实现无限滚动

一、学习过程

一、ajax实现无限滚动

jq式ajax滚动加载数据

  let LockMore = false;//设置一个boolean值
            $(window).scroll(function(event) {//浏览器窗口滚动事件，当滚动条滚动时触发
                let wScrollY = window.scrollY; // 当前滚动条位置
                let wInnerH = window.innerHeight; // 电脑窗口的高度（不会变）
                let bScrollH = document.body.scrollHeight; // 滚动条总高度
                if (wScrollY + wInnerH >= bScrollH) {  //开始运行ajax调用数据
                    $.ajax({
                        url: "new_file.json",//API数据接口
                        
                        type: 'get',//请求方式（大多以get请求或post请求）
                        dataType: 'json',//数据，json字符串
                        
                        //请求成功数据调用
                        success: function(res) {
                            console.log(res)//打印数据、找到数据
                            var li = "";
                            $(res.list).each(function() {
                                li += "<li>" + this.id + this.title + "</p></li>";
                            })//数据拼接
                            $("ul").append(li)//将数据渲染到页面上
                            
                        },
                        //请求失败，包含具体的错误信息
                        error: function(err) {
                            console.log(err.status);
                            console.log(err.responseText);
                        }
                    })
                } if (LockMore) {
                    return false;
                }
            });  

二、浏览器事件

一、DOMContentLoaded：当初始的 HTML 文档被完全加载和解析完成时触发。

二、load：当整个页面及其所有资源（如图片和样式表）完成加载时触发。

三、beforeunload：在窗口或框架即将被卸载之前触发，通常用于提示用户是否要离开当前页面。

四、unload：在窗口或框架已被卸载后触发。

五、resize：当窗口或框架的大小被调整时触发。

六、scroll：当滚动条滚动时触发。

 例如：窗口大小被调整时会被改变

 window.addEventListener('resize', function() {
      // 当窗口大小改变时，调整页面布局
      var container = document.querySelector('.container');
      var content = document.querySelector('.content');
      container.style.height = window.innerHeight + 'px';
      content.textContent = 'Window width: ' + window.innerWidth + 'px, height: ' + window.innerHeight + 'px';
    });
  </script>

 当整个页面以及所有资源加载完成时触发

    window.addEventListener('load', function(event) {
      // 页面加载完成后执行的操作
      var heading = document.querySelector('h1');
      heading.style.color = 'red';
      heading.textContent = 'Page Loaded';
    });
 

三、利用ajax获取图片数据

	/**
	 * 申请更新验证码
	 * 该请求不需要有任何参数
	 */
	$("#checkcodeImg").click(function() {
		$.ajax({
			type: "post",
			url: "./checkcodeImgClick.reg",
			dataType: "text",
			success: function(img, status){
				alert(img);
				$("#checkImg").attr("src","data:image/png;base64,"+img);
			},
			error:function(data){
	             alert('响应失败！');
	         },
		});
	});

四、css设置盒子自适应宽度或高度

1、自适应宽度

当右边的盒子内容超出容器的宽度，设置width：0；超出的内容就可以隐藏，或者设置overflow：auto；会出现滚动条显示。

2、自适应高度

 

 如上图，要使下面的盒子高度撑满剩余的空间，可以使用flex布局，然后设置如图所示样式就ok了。

（width和height不一定要设置为0，只要不大于剩余空间的大小。）

 五、thymeleaf 操作语法

th:each：遍历循环元素，和th:text或th:value一起使用。注意该属性修饰的标签位置，详细往后看。优先级很高：order=2

th:if：条件判断，类似的还有th:unless，th:switch，th:case。优先级较高：order=3

th:class="${R}? 'a':'b'"(如果R为true，则用class a覆盖原来的class)

th:classappend="${R}? 'a':'b'"(如果R为true，则将class a添加进原来的class)

六、Thymeleaf传递给js方法值 

<a  th:onclick="'javascript:del('+${user.id}+');'" ></a>
 <script>
   function  del(id) {
      alert(id);
                      }
 </script>

          （1) th:onclick 对应的就是 js中的onclick  

             (2)  javascript: del()     前面的javascript: 是不变的   del是你的方法名

             (3) ${user.id}   对应的就是  你要获取的对象的值