ajax的使用案例-新闻列表的渲染

学习ajax使用的一个小案例
主要功能：通过ajax请求后端数据，然后将数据渲染到页面中。
主要代码：
1.首先引入template-web.js，对template进行管理

  <script src="javascripts/template-web.js"></script>

2.发送通过ajax网络请求，获取数据

<script>let ul = document.querySelector('.sports-list');let xhr = new XMLHttpRequest();xhr.onload = function() {if (xhr.status == 200) {// console.log(xhr.responseText);let data = JSON.parse(xhr.responseText);if (data.errcode == 0) {ul.innerHTML = template('tpl-sports', data)}}}xhr.open('POST', '/list', true);xhr.setRequestHeader('Content-Type', 'application/json');xhr.send(JSON.stringify({"page": 0,"count": 10}))</script>

3.编写后端代码，对ajax进行数据响应（router/index.js）

//引入fs模块
const fs = require('fs')
router.post('/list', async(ctx, next) => {// console.log(cxt.request.body);//规定参数的类型为numberlet args = [{ field: 'page', type: 'number' },{ field: 'count', type: 'number' }]//接收传入的数据let body = ctx.request.body;for (let i = 0; i < args.length; i++) {let item = args[i];//判断传入的参数个数if (!Object.keys(body).includes(item.field)) {ctx.body = {errcode: -1,errmsg: "参数个数错误"};return;} else {//判断参数的类型if (typeof body[item.field] != item.type) {ctx.body = {errcode: -2,errmsg: "参数类型错误"};return;}}}//通过node中fs模块打开json文件let data = fs.readFileSync('./data/list.json');//将json数据转换为对象形式data = JSON.parse(data);//截取数据，从页数x个数的乘积截取count个let list = data.splice(body.page * body.count, body.count)ctx.body = {errcode: 0,errmsg: 'ok',list}
})

4.将数据显示到页面上

 <script id='tpl-sports' type='text/html'>{{each list}}<li><div class="sports-list-text"><p>{{$value.title}}</p><p><span>{{$value.comment}}</span></span></p></div><div class="sports-list-img"><img src="{{$value.img}}" alt=""></div></li>{{/each}}</script>

实现效果
全部代码：
index.html

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}ul,ol {list-style: none;}img {display: block;}#sports-header {width: 100%;height: 50px;background: #537bff;display: flex;justify-content: space-between;align-items: center;color: white;font-size: 20px;padding: 0 10px;position: fixed;top: 0;z-index: 100;}#sports-main {margin-top: 50px;height: calc(100vh - 50px);}#sports-main ul {background: white;}#sports-main ul li {display: flex;border-bottom: 1px #f7f7f7 solid;margin: 0 18px;padding: 20px 0;}#sports-main .sports-list-text {flex: 1;font-size: 18px;line-height: 26px;}#sports-main .sports-list-text p:last-of-type {font-size: 14px;color: #828c9b;display: flex;margin-top: 10px;}#sports-main .sports-list-text p:last-of-type span {margin-right: 10px;}#sports-main .sports-list-img {width: 130px;margin-left: 20px;}#sports-main .sports-list-img img {width: 100%;border-radius: 10px;}#loadingDown {width: 100%;position: absolute;top: 60px;z-index: -1;text-align: center;}#loadingUp {width: 100%;text-align: center;padding: 20px 0;}#loading {position: absolute;left: 0;top: 0;right: 0;bottom: 0;margin: auto;width: 200px;height: 30px;line-height: 30px;text-align: center;z-index: 100;}</style><script src="javascripts/template-web.js"></script><script src="javascripts/axios.js"></script><script src="javascripts/better-scroll.js"></script>
</head><body><header id="sports-header">腾讯 | 体育</header><div id="loadingDown"></div><main id="sports-main"><div><ul class="sports-list"></ul><div id="loadingUp"></div></div><div id="loading"></div></main><script id='tpl-sports' type='text/html'>{{each list}}<li><div class="sports-list-text"><p>{{$value.title}}</p><p><span>{{$value.comment}}</span></span></p></div><div class="sports-list-img"><img src="{{$value.img}}" alt=""></div></li>{{/each}}</script><script>let ul = document.querySelector('.sports-list');let xhr = new XMLHttpRequest();xhr.onload = function() {if (xhr.status == 200) {// console.log(xhr.responseText);let data = JSON.parse(xhr.responseText);if (data.errcode == 0) {ul.innerHTML = template('tpl-sports', data)}}}xhr.open('POST', '/list', true);xhr.setRequestHeader('Content-Type', 'application/json');xhr.send(JSON.stringify({"page": 0,"count": 10}))</script>
</body></html>

router/index.js

const router = require('koa-router')()
const fs = require('fs')
router.get('/', async(ctx, next) => {await ctx.render('index', {title: 'Hello Koa 2!'})
})router.get('/string', async(ctx, next) => {ctx.body = 'koa2 string'
})router.get('/json', async(ctx, next) => {ctx.body = {title: 'koa2 json'}})// ctx 请求上下文
router.get('/list', async(ctx, next) => {// 接收查询字符串传入的数据console.log(ctx.request.query);// ctx.body = 'list data'ctx.body = {errcode: 0,errmsg: 'ok',list: [{ 'username': "lm", "age": "33" },{ 'username': "ml", "age": "13" },{ 'username': "lm", "age": "33" }]}
})router.post('/list2', async(ctx, next) => {// 接收查询字符串传入的数据console.log(ctx.request.body);ctx.body = 'list2 data'
})router.post('/list', async(ctx, next) => {// console.log(cxt.request.body);let args = [{ field: 'page', type: 'number' },{ field: 'count', type: 'number' }]let body = ctx.request.body;for (let i = 0; i < args.length; i++) {let item = args[i];if (!Object.keys(body).includes(item.field)) {ctx.body = {errcode: -1,errmsg: "参数个数错误"};return;} else {if (typeof body[item.field] != item.type) {ctx.body = {errcode: -2,errmsg: "参数类型错误"};return;}}}let data = fs.readFileSync('./data/list.json');data = JSON.parse(data);let list = data.splice(body.page * body.count, body.count)ctx.body = {errcode: 0,errmsg: 'ok',list}
})
module.exports = router

ajax的使用案例-新闻列表的渲染相关推荐

微信小程序搭建新闻列表(跟进上一篇博客案例)
本文旨在完善上一篇博客案例后台接口文档主要会用到的新语法罗列[ {发送请求篇:微信小程序如何向后端发送请求}, {页面跳转传递参数和接收参数:微信小程序页面跳转和接收参数}, {修改data中变量 ...
CSS盒子模型（border、padding、margin、圆角边框、盒子阴影、文字阴影、新闻列表综合案例、新浪导航栏案例）
1. 网页布局的本质首先利用CSS设置好盒子的大小,然后摆放盒子的位置. 最后把网页元素比如文字图片等等,放入盒子里面. 以上两步就是网页布局的本质 2. 盒子模型(Box Model) 盒子模型 ...
Ajax — 新闻列表
注意:本项目主要利用到了template,模板引擎进行编写模板引擎代码下载地址 <div id="news-list">< ...
使用AJAX Toolkit创建新闻列表
我们很多站点上面都需要显示新闻列表,由标题和正文组成的.一般客户都希望实现这样的效果: 开始的时候只是显示标题,当点击标题的时候,再展开正文.再点击,又可缩回去. 这是典型的AJAX效果,或者说以前你 ...
Node.js(一)——(Node.js安装及使用，通过Node.js搭建服务器，模块化及自定义模块，npm/yarn/nvm，内置模块fs的使用，buffer及stream，新闻列表案例)
目录 1.Node.js介绍 2.安装Node.js 3.使用Node.js实现第一个服务器 3.1初步感受Node.js 3.2Google Chrome 默认非安全端口列表,尽量避免以下端口. 3 ...
SwiftUI优秀文章经典案例制作简易的新闻列表Demo
SwiftUI制作简易的新闻列表Demo import SwiftUIstruct HomeView: View {@StateObject var newsViewModelVM = NewsVie ...
mui实现新闻列表和详情查看
1.新闻列表首页代码: <!doctype html> <html><head><meta charset="UTF-8">< ...
一步步打造漂亮的新闻列表（无刷新分页、内容预览）（4）
前面三篇文章实现了第一个目标,即无刷新分页.本文将实现第二个目标,即预览新闻内容.有两种方法可以实现内容的预览,一个是ajax,一个是伪ajax(姑且这么叫). 我们先用伪ajax实现新闻内容的预览. ...
phpcms发布新闻到数据库_如何利用PHPCMS调用新闻列表
我们使用phpcms搭建网站时,都会用到调用新闻列表的情况. 一般情况下,新闻列表页面在前台呈现给用户的都是每条记录为统一外观的列表.然而,文汇小编发现另一种情况,也就是调用同一个栏目下的内容,为了布 ...

ajax的使用案例-新闻列表的渲染

ajax的使用案例-新闻列表的渲染相关推荐

最新文章

热门文章