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); } } }) } }) })