ajax1

最新推荐文章于 2025-03-16 10:00:00 发布

转载最新推荐文章于 2025-03-16 10:00:00 发布 · 279 阅读

前端专栏收录该内容

14 篇文章

订阅专栏

本文介绍了一种利用Ajax技术实现实时更新网页新闻列表的方法。通过点击按钮触发Ajax请求，从服务器获取最新的新闻数据，并将其展示在页面上。此外，还设置了一个定时任务每秒钟自动刷新新闻列表。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script src="ajax.js"></script>
<script>
window.onload = function() {

var oBtn = document.getElementById('btn');

oBtn.onclick = function() {

/*ajax({
url : 'getNews.php',
success : function(data) {
//...
}
});*/

ajax('get','getNews.php','',function(data) {
var data = JSON.parse( data );

var oUl = document.getElementById('ul1');
var html = '';
for (var i=0; i<data.length; i++) {
html += '<li><a href="">'+data[i].title+'</a> [<span>'+data[i].date+'</span>]</li>';
}
oUl.innerHTML = html;
});

setInterval(function() {
ajax('get','getNews.php','',function(data) {
var data = JSON.parse( data );

var oUl = document.getElementById('ul1');
var html = '';
for (var i=0; i<data.length; i++) {
html += '<li><a href="">'+data[i].title+'</a> [<span>'+data[i].date+'</span>]</li>';
}
oUl.innerHTML = html;
});
}, 1000);

}
}
</script>
</head>

<body>
<input type="button" value="按钮" id="btn" />
<ul id="ul1"></ul>
</body>
</html>