jquery中的ajax

最新推荐文章于 2024-05-16 02:23:50 发布

weixin_44740410

最新推荐文章于 2024-05-16 02:23:50 发布

阅读量1k

点赞数

本文链接：https://blog.csdn.net/weixin_44740410/article/details/89503202

版权

jquery的get()和post()方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="jquery-1.8.3.min.js"></script>
<script>
    /**
     * $.get('url','data',successCallback,'返回的类型type')
     */
    $.get('test.html',{'name':'小明'},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>
</body>
</html>

jquery中的ajax

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<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/addproduct',
        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 :'小明',
        data:{
            name:'小明'
        },
        dataType:'json',
        success:function (res) {
            console.log(res);
        }
    })
</script>
</body>
</html>

jsonp

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--<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",
        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>
</html>

瀑布流

$(function () {
    /**
     * 1.先判断盒子中装多少box个相框
     * 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.outerHeight();
        console.log(current + "=====" + bottom);
        if (current>=bottom) {
            console.log(11);
            //添加小相框
           $.ajax({
               url:'6.json',
               type:'get',
               dataType:'json',
               success:function (res) {
                  // console.log(res);
                   for(var i=0;i<res.length;i++){
                       var obj=res[i];
                       var dvObj=$('<div class="box"><div class="info"><div class="pic"><img src="images/'+res[i].src+'"/></div> <div class="title">'+res[i].title+'</div></div></div>');
                       wrap.append(dvObj);
                   }
               }
           })
        }
    })

})

weixin_44740410

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery中的ajax

jquery的get()和post()方法<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><script src="jquer...
复制链接

扫一扫