脚本宝典收集整理的这篇文章主要介绍了Express+JQuery实现简易选项卡,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
利用Node.js的express框架及JQuery来完成如下要求: 1.设计一个html页面,页面中有三个选项卡按钮,分别为:“人力资源部”,“开发部”,“后勤保障部”。 2.点击不同的按钮,用JQuery的get方法请求一个路由,如:http://localhost/dev 3.利用node.js及express搭建一个web服务,并响应第2点的get请求,返回部门的人员json数据 4.html页面拿到json数据后,在对应按钮下方构建数据。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="./js/jquery-3.6.0.js"></script>
<title>选项卡</title>
<style>
.li{
margin-left: 30px;
}
.li:hover{
cursor: pointer;
}
.info{
margin: 20px;
}
.on{
border-bottom: 1px solid black;
}
</style>
</head>
<body>
<!--选项栏-->
<ul style="list-style: none; display: flex;">
<li class="li">人力资源部</li>
<li class="li">开发部</li>
<li class="li">后勤保障部</li>
</ul>
<!--内容栏-->
<div id="content">
</div>
<script>
//给li绑定点击事件
$("li").click(function () {
var div = $("<div class='info'></div>");
var index = $(this).index();//获取当前点击的li的下标
//get方法请求载入http://localhost:8808/dev中的信息
$.get('http://localhost:8808/dev',function(data){
$(".info").remove();
for(var j = 0; j < 2;j++){
var info = $("<div class='info-o'></div>");
$(info).append("<h3>姓名:"+data["dept"+(index+1)][j].name+"</h3>");
$(info).append("<h4>年龄:"+data["dept"+(index+1)][j].age+"</h4>");
$(info).append("<hr>")
$(div).append(info);
}
$("#content").append(div);
});
//li样式切换
$("li").eq($(this).index()).addClass("on").siblings().removeClass("on");
});
</script>
</body>
</html>
node一下这个文件
const express = require('express');
const path = require('path');
const fs = require('fs');
const app = express();
//跑test.html时,控制台报了这个net::ERR_CONNECTION_REFUSED错误,百度到说可能是跨域的问题,加上以下代码就好了。。。
//设置允许跨域请求
app.all('*', function(req, res, next) {
//设置允许跨域的域名,*代表允许任意域名跨域
res.header('Access-Control-Allow-Origin', '*');
res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
res.header('Access-Control-Allow-Metheds', 'PUT, POST, GET, DELETE, OPTIONS');
res.header('X-Powered-By', 'nodejs');
res.header('Content-Type', 'application/json;charset=utf-8');
next();
});
app.get('/dev', function(req, res) {
//__dirname 表示当前执行脚本所在的目录
//fs是node.js的文件系统模块,readFile()为该模块异步读取文件的方法
fs.readFile(path.join(__dirname, '../data/employees.json'), 'utf-8', function(err, data) {
if (err) {
res.send('文件读取失败');
} else {
res.send(data);
}
});
});
var server = app.listen(8808,function(){
var host = server.address().address;
var port = server.address().port;
console.log("http://%s:%s/dev",host,port);
});
{
"dept1":[
{
"name":"Bob",
"age":25
},
{
"name":"Anny",
"age":23
}
],
"dept2":[
{
"name": "Wang",
"age":20
},
{
"name":"Zhao",
"age":30
}
],
"dept3":[
{
"name": "Kity",
"age":20
},
{
"name": "Mary",
"age":29
}
]
}
(゜ー゜)菜鸟一枚,,如有问题,欢迎指出。。
以上是脚本宝典为你收集整理的Express+JQuery实现简易选项卡全部内容,希望文章能够帮你解决Express+JQuery实现简易选项卡所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。