jquery ajax

最新推荐文章于 2024-07-28 17:31:47 发布

℡清欢

最新推荐文章于 2024-07-28 17:31:47 发布

阅读量138

点赞数

本文链接：https://blog.csdn.net/weixin_44695219/article/details/89504125

版权

get(),post()

<script src="jquery-1.8.3.min.js"></script>
<script>
    /*
    *
    * $.get('url'，['传入的参数data{}'],successCallback(响应的内容，响应的状态),['返回的类型type'])
    *
    * $.post('url',['传入的参数data{}'],successCallback(响应的内容，响应的状态),['返回的类型type'])
    * */
$.get('test.html',{'name':'zhangqiuming'},function(res,status){
    console.log(res);//响应的内容
    console.log(status);//响应的状态
});

$.post('http://www.liulongbin.top:3005/api/addproduct','name=张秋明&age=12',function(res,status){
    console.log(res);
})
</script>

ajax()

<script src="jquery-1.8.3.min.js"></script>
<script>
    /*
    * $.ajax({
    *   url:'请求的地址'
    *   type：'请求的方式'
    *   data:'要发送给服务器的值'
    *   dataType:'要求服务器返回的数据类型'
    *   async：'请求是否异步'
    *   success:function(response){
    *       成功的回调函数
    *   }，
    *   error:失败的回调函数
    *
    *
    * });
    *
    *
    *
    * */
  /*  $.ajax({
        url:'http://www.liulongbin.top:3005/api/getprodlist1',
        type:'get',
        dataType:'json',
        success:function(res){
            // console.log(res);
            // console.log(typeof res);
        },
        error:function(res){
            console.log(res);
        }
    });*/

    $.ajax({
        url:'http://www.liulongbin.top:3005/api/addproduct',
        type:'post',
        // data:'name=张秋明',
        data:{
            name:'张秋明'
        },
        dataType:'json',
        success:function(res){
            console.log(res);
        }
    })

</script>

jsonp

<script>
    /*
    * 请求地址：http://www.runoob.com/try/ajax/jsonp.php?jsoncallback=callbackFunction
    *
    * jsonp可以实现跨域请求，会动态的创建JavaScript标签，利用script标签的src属性，不接受同源策略的约束，来跨域获取数据
    * */

</script>

<!--<script type="text/javascript">
    function callbackFunction(res){
        console.log(res);
    }
</script>
<script type="text/javascript" src="http://www.runoob.com/try/ajax/jsonp.php?jsoncallback=callbackFunction"></script>-->

<!--第二种方式：-->
<script src="jquery-1.8.3.min.js"></script>
<!--<script>
    $.ajax({
        url:'http://www.runoob.com/try/ajax/jsonp.php',
        type:'get',
        dataType:"jsonp",
        jsonp:'jsoncallback',//请求php的参数名
        jsonpCallback:'callbackFunction',//要执行的回调函数
        success:function(res){
            console.log(res);
        }

    })

</script>-->

<!--第三种方式：-->
<script>
    $.getJSON('http://www.runoob.com/try/ajax/jsonp.php?jsoncallback=?',function(res){
        console.log(res);
    })
</script>
</body>

瀑布流:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>瀑布流效果特效代码</title>
    <style type="text/css">
        /* 公用样式 */
        body{padding:0;margin:0;}
        img{border:none;}
        a{text-decoration:none;color:#444;}
        a:hover{color:#999;}
        #title{width:600px;margin:20px auto;text-align:center;}
       
        /* wrap */
        #wrap{width:auto;height:auto;margin:0 auto;position:relative;}
        #wrap .box{width:280px;height:auto;padding:10px;border:none;float:left;}
        #wrap .box .info{width:280px;height:auto;border-radius:8px;box-shadow:0 0 11px #666;background:#fff;}
        #wrap .box .info .pic{width:260px;height:auto;margin:0 auto;padding-top:10px;}
        #wrap .box .info .pic img{width:260px;border-radius:3px;}
        #wrap .box .info .title{width:260px;height:40px;margin:0 auto;line-height:40px;text-align:center;color:#666;font-size:18px;font-weight:bold;overflow:hidden;}
    </style>
</head>
<body>
    <section id="title">
        <h2>js瀑布流效果特效代码</h2>
    </section>

    <div id="wrap">

        <div class="box">
        <div class="info">
            <div class="pic"><img src="images/1.jpg"></div>
            <div class="title"><a href="#" target="_blank"> 瀑布流效果</a></div>
        </div>
    </div>

        <div class="box">
            <div class="info">
                <div class="pic"><img src="images/2.jpg"></div>
                <div class="title">瀑布流效果</div>
            </div>
        </div>

        <div class="box">
            <div class="info">
                <div class="pic"><img src="images/3.jpg"></div>
                <div class="title">瀑布流效果</div>
            </div>
        </div>

        <div class="box">
            <div class="info">
                <div class="pic"><img src="images/4.jpg"></div>
                <div class="title">瀑布流效果</div>
            </div>
        </div>

        <div class="box">
            <div class="info">
                <div class="pic"><img src="images/5.jpg"></div>
                <div class="title">瀑布流效果</div>
            </div>
        </div>

        <div class="box">
            <div class="info">
                <div class="pic"><img src="images/6.jpg"></div>
                <div class="title">瀑布流效果</div>
            </div>
        </div>

        <div class="box">
            <div class="info">
                <div class="pic"><img src="images/7.jpg"></div>
                <div class="title">瀑布流效果</div>
            </div>
        </div>
    </div>
    <script src="js/jquery-1.8.3.min.js" ></script>
    <script src="index.js"></script>
</body>
</html>

index.js

$(function () {
    /*
    * 1.判断wrap盒子中装多少个box相框----求出wrap盒子的宽度
    * 2.滚动滚动条,当滚动条到底的时候,要再长出很多box相框
    *
    * */

    var wrap = $("#wrap");
    var box = $(".box");
    //获取相框盒子的宽度
    var boxW = box.outerWidth();
    //获取显示多少列====页面的可视区域的宽度/相框盒子的宽度
    var cols = Math.floor($(document).width()/boxW);
    console.log(cols);
    //设置盒子的宽度
    wrap.css('width',cols*boxW);
    //添加浏览器的滚动事件
    $(window).scroll(function () {
        //判断滚到最下面??
        //浏览器滚动到当前的位置=浏览器的可视高度+滚动出去的高度
        var current=$(window).height()+$(window).scrollTop();
        //最底部=最后一张相框的offset的高度+图片本身的高度
        var lastBox=$('.box').last();
        var bottom=lastBox.offset().top+lastBox.height();
        //console,log(current+"====="+bottom);
        if(current>=bottom){
            //添加好多小相框
            $.ajax({
                url:'6.json',
                type:'get',
                success:function (res) {
                    //console.log(res);
                    for(var i=0;i<res.length;i++){
                        //console.log(res[0].src);
                        //创建元素,追加到父容器中
                        var dvObj=$('<div class="box"><div class="info"><div class="pic"><img src="images/'+res[i].src+'"></div></div></div></div>')
                        wrap.append(dvObj);
                    }
                }
            })
        }
    })

})

6index.js

$(function(){
    //	1.获得外层以及每一个box
    var wrap = $("#wrap");
    var boxs  = $(".box");//获取存储box元素的的数组
    //	2.获得屏幕可显示的列数
    var boxW = boxs.eq(0).outerWidth();//获得第一个盒子的宽度
    //获得可显示的列数
    var colsNum = Math.floor(document.documentElement.clientWidth/boxW);

    //为外层赋值宽度
    wrap.width(boxW*colsNum)

    $(window).scroll(function(){
        var isLoad = false;
        var lastBox = $(".box").last().offset().top+$(".box").last().outerHeight();
        console.log($(window).height()+$(window).scrollTop());
        console.log(lastBox)
        if($(window).height()+$(window).scrollTop()>=lastBox){
            isLoad = true;
        }

        if(isLoad == true){
            $.ajax({
                url:"6.json",
                type:"GET",
                dataType:"json",
                async:true,
                success:function(data){
                    //console.log(data);
                    for(i in data){
                        //创建新的box

                        var newHtml = $('<div class="box">\
											<div class="info">\
												<div class="pic">\
													<img src="images/'+data[i].src+'"/>\
												</div>\
												<div class="title">\
													<a hrf="">'+data[i].title+'</a>\
												</div>\
											</div>\
										</div>');
                        $("#wrap").append(newHtml);
                    }
                    boxs  = $(".box");
                    pbl(boxs,colsNum);
                }
            });

        }
    });


    //	3.循环出所有的box并按照瀑布流排列
    function pbl(boxs,colsNum){
        var everyH = [];//定义一个数组存储每一列的高度
        boxs.each(function(index){
            if(index<colsNum){
                //将每一列的起始高度存储，(列数-1)之前的box元素的高度赋给相应的每一列
                everyH[index] = $(this).outerHeight();
            }else{
                //下标大于等于列数的 box元素，获得最小列的高度，添加到该列，并将该列的高度改变
                var minH = Math.min.apply(null,everyH);//获得最小的列的高度
                //
                var minIndex = $.inArray(minH,everyH); //获得最小列的索引

                $(this).css({position:"absolute",top:minH+"px",left:boxW*minIndex+"px"});
                everyH[minIndex] += $(this).outerHeight();
            }
        });
    }
    pbl(boxs,colsNum);

})