从零开始学习前端JAVASCRIPT(2)_H5之家 - 中国HTML5教程资源分享第一站

<!doctype html> <html lang=> <head> <meta charset=> <title>新闻列表</title> <style type=> *{ margin:0; padding:0; } .box{ width: 80%; margin: 0 auto; } .newsTitle{ font-size: 24px; text-align: center; margin: 0 auto; padding: 20px 10px; font-weight: normal; letter-spacing: 10px; } .newsList{ display: block; margin: 0 auto; line-height: 50px; font-size: 16px; list-style: none; } .newsList li{ border-top: 1px dashed #f4f4f4; padding: 0 20px; } .newsList li:nth-child(odd){ background: #f3f3f3; } .newsPage{ display: block; margin: 0 auto; text-align: center; } .newsPage li{ margin:20px 5px; display: inline-block; padding: 5px 10px; border:1px solid #f3f3f3; font-size: 14px; } </style> </head> <body> <div > <h3 >新闻列表</h3> <ul id==> <li>东航首位外籍女机长：来中国是最好的选择</li> <li>东航首位外籍女机长：来中国是最好的选择</li> <li>东航首位外籍女机长：来中国是最好的选择</li> <li>东航首位外籍女机长：来中国是最好的选择</li> <li>东航首位外籍女机长：来中国是最好的选择</li> </ul> <ul id==> <li data-page=>1</li> <li data-page=>2</li> <li data-page=>3</li> <li data-page=>4</li> <li data-page=>5</li> <li data-page=>6</li> <li data-page=>7</li> <li data-page=>8</li> <li data-page=>9</li> <li data-page=>10</li> </ul> </div> </body> <script type=src=></script> </html>

js页面

); var oNewsPage=Array.from(oNewsPage.children); ); oNewsPage.forEach(function (value) { value.onclick=function () { oNewsList.innerHTML = ""; pageNum = value.getAttribute(); xhr = new XMLHttpRequest(); pageNum = + pageNum; //xhr.open("get","ajax.php?"+pageNum,true); xhr.open(,,true); xhr.onreadystatechange=function () { (xhr.readyState === 4 && xhr.status === 200) { newsList = JSON.parse(xhr.responseText)//返回结果通过json将字符串进行转换 //数据结果渲染到页面 newsList.forEach( v => { ); oLi.innerHTML = v.title; oNewsList.appendChild(oLi); }); } } xhr.setRequestHeader(, ); xhr.send(pageNum);//post方式将参数传递的方式 } })

php后台页面

<?php $pageNum=$_POST[]; //接收参数页码 ($pageNum == 1) { //通过二维数组存储数据 $arr = [ [ => 1, => ], [ => 2, => ], [ => 3, => ] ]; } else if ($pageNum == 2) { $arr=[ [ =>4, => ], [ =>5, => ] ]; } else{ $arr=[ [ =>6, => ], [ =>7, => ] ]; } echo json_encode($arr); ?>

7：前后端分离（ajax函数的封装）

后台只管数据输出和业务逻辑处理，前端负责交互逻辑和界面展示。简单的说：前端静态页面中没有有后台程序代码，后台输出不带有HTML标签的数据。前后端分离靠ajax来实现数据的交互。

demo通过封装的ajax实现加载更多的功能以及通过事件源对象删除单条数据(本来打算将源码托管到GitHub,账号丢失)

文件夹目录

1.html页面

<!doctype html> <html lang=> <head> <meta charset=> <title>新闻列表</title> <link rel=href=> </head> <body> <div > <h3 >新闻列表</h3> <ul id==> <li> 冬天来了，春天还会远么 <a href=>×</a> </li> <li> 面朝大海，幸福花开 <a href=>×</a> </li> <li> Nothing is impossible! <a href=>×</a> </li> <li> 水能载舟亦能覆舟 <a href=>×</a> </li> <li> 中国是最好的选择 <a href=>×</a> </li> 给政府人员送礼的技巧_允硕品牌女装 </ul> <div id==> <img id==src=/> 加载更多... </div> </div> </body> <script type=src=></script> <script type=src=></script> </html>

ajax.html

2.css文件