ajax实现鼠标拖动到底部自动加载新的数据的实例

发布时间：2020-12-16 00:56:47 所属栏目：百科来源：网络整理

导读：%@ page language="java" import="java.util.*" pageEncoding="UTF-8"% % String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/"; % !DOCTYPE ht

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/"; %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> * { margin: 0; padding: 0; } body { font-size: 12px; } p { margin: 5px; } .box { padding: 10px; } </style>  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function() { $(window).bind('scroll',function() { show() }); function show() { if ($(window).scrollTop() + $(window).height() >= $(document) .height()) { ajaxRead(); } } function ajaxRead() { var html = ""; $ .ajax({ type : 'get',dataType : 'jsonp',url : 'http://api.flickr.com/services/feeds/photos_public.gne?tags=car&tagmode=any&format=json&jsoncallback=?',beforeSend : function() { console.log('loading...'); $("#msg").html('loading...'); },success : function(data) { $ .each( data.items,function(i,item) { html += '<div class="box">'; html += '<h1>' + item.title + '</h1>'; html += '<a hreft="'+item.link+'"><img src="'+item.media.m+'"/></a>' html += '<div>' + item.tags + '</div>'; html += '</div>'; }); $("#resText").append($(html)); },complete : function() { console.log('mission acomplete.') } }); } }) </script> </head> <body> 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 往下拉 <div id="resText"></div> <div style="align:center;" id="msg"></div> </body> </html>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!