8、jquery-ajax

8-1 get

$.get(url,res=>{
  console.log(res)
})
$.get(url).then(res=>{
  console.log(res)
})

8-2 $.ajax

$.ajax({
  url,
  type:"get",
  data,   // get传值问号后面的值，可以放在data属性里面
  dataType,
  success:res=>{
    console.log(res);
  }
})

var url ="http://192.168.4.18:3000/search"
$.ajax({
  url,
  type:"get",
  data:{
    keywords:"你"
  },
  success:res=>{
    console.log(res);
  }
})

8-3 下拉刷新

http();
        $(window).scroll(function () {
            if (isReachBottom()) {
                http();
            }
        })
        function http() {
            var url = "http://192.168.4.18:8000/more";
            $.ajax({
                url,
                method:"get",
                success: res => {
                    res.forEach(item => {
                        var html = `
                    <div class="item">
                        <img src=${item.imageUrl} alt="">
                    </div>
                        `
                        $("#app").append(html)
                    })
                    setTimeout(sortBox, 100)
                }
            })
        }
        function sortBox() {
            var ww = $(window).width();
            var box = $(".item").outerWidth();
            var num = Math.floor(ww / box);
            var arr = [];
            $(".item").each((index, value) => {
                if (index < num) {
                    console.log(value)
                    var height = $(value).outerHeight();
                    console.log(height)
                    arr.push(height)
                    console.log(arr)
                } else {
                    //3.将元素放置在最小高度的位置  同时将数组重置
                    var minHeight = Math.min(...arr);
                    var index = arr.indexOf(minHeight);
                    var offsetLeft = $(".item").eq(index).offset().left;
                    $(value).css({ position: "absolute", left: offsetLeft, top: minHeight });
                    arr[index] = minHeight + $(value).outerHeight();
                }
            })
        }
        function isReachBottom() {
            var scrollTop = $(window).scrollTop();
            var avaliHeight = $(window).height();
            var dh = $(document).height();
            return (scrollTop + avaliHeight > dh - 200) ? true : false;
        }