前端之家收集整理的这篇文章主要介绍了
ajax实现鼠标拖动到底部自动加载新的数据的实例，
前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
<%@ 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> <!-- 引入jQuery --> <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> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <div id="resText"></div> <div style="align:center;" id="msg"></div> </body> </html>
原文链接：https://www.f2er.com/ajax/165996.html
