您的位置：首页 > 其它

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

2013-08-06 17:38 1066 查看
<%@ 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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航