当前位置: 首页>后端>正文

ecf javascript交互 js数据交互效果代码

Node 是一个让 JavaScript 运行在服务端的开发平台,它让 JavaScript 成为与PHP、Python、Perl、Ruby 等服务端语言平起平坐的脚本语言——百度百科

数据交互

数据交互过程:前端页面提交数据(例如表单,注册登录);数据的传送格式JSON最为常见;发送请求服务器,后台从服务器中取数据,对数据进行处理,存入数据库。反过来,后台从数据库取出数据处理,在发送到前端,前端拿到数据进行渲染。即完成一次数据请求响应。
  • 今天就用成绩查询,此次实现就不涉及数据库了,我自己准备一个数据文件。 目录结构是
  • ecf javascript交互 js数据交互效果代码,ecf javascript交互 js数据交互效果代码_ecf javascript交互,第1张

  • view文件夹下query.html是成绩查询入口,resul.html是查询结果
  • 同级目录下index.js是使用node实现的服务器
  • score.json自己新建的数据文件

查询入口query.html

功能:用户输入自己的学号,点击查询即可查询到结果

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>查询成绩</title>
</head>
<body>
	<form action="http://localhost:8080/score" method="post">
		请输入考号:<input type="text" name="code">
		<input type="submit" value="查询">
	</from>
</body>
</html>

注意:书写此代码有几个地方是必不可少,要用form标签提交数据,action写下请求的地址,method请求的方式。input标签name属性必定写,后续会用到。

成绩结果文件result.html

功能:展示成绩数据

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>成绩结果</title>
</head>
<body>
	<div>
		<ul>
			<li>语文:$$chinese$$</li>
			<li>数学:$$math$$</li>
			<li>英语:$$english$$</li>
			<li>物理:$$wuli$$</li>
			<li>高数:$$gaoshu$$</li>
			<li>算法:$$suanfa$$</li>
		</ul>
	</div>
</body>
</html>

使用列表渲染数据,其中$$标识符是把数据包括,然后此处渲染数据。

服务器代码index.js

接下来就是编写服务器端的代码了,用JavaScript书写。

1.引入http模块

const http = require('http');

2.创建一个服务

http.createServer((req,res)=>{
	//首先是请求成绩查询页面,输入学号,再请求成绩结果页面
}).listen(8080,()=>{
	console.log('running...');
});

传入参数是一个回调函数,监听8080端口,此处8080与query.html中form的action属性的端口8080是一致的

读取文件内容

fs.readFile(path.join(__dirname,'view','query.html'),'utf8',(err,fileContent)=>{
			if(err){
				// 解决乱码问题
				res.writeHead(500,{
					'Content-Type': 'text/plain; charset=utf8'
				});
				res.end('服务器错误,请与管理员联系');
			}
			res.end(fileContent);
		});

写入数据

let pdata = '';
req.on('data',(chunk)=>{
	pdata += chunk;//一点一点的写入数据流
});

数据写入完毕后,渲染数据

req.on('end',()=>{
	let obj = querystring.parse(pdata);//解析数据,将数据转成对象
	let ret = scoreData[obj.code];
	fs.readFile(path.join(__dirname,'view','result.html'),'utf8',(err,con)=>{
		if(err){
			res.writeHead(500,{
				'Content-Type': 'text/plain; charset=utf8'
			});
			res.end('服务器错误,请与管理员联系');
		}
		// 返回内容之前要进行数据渲染
		con = con.replace('$$chinese$$',ret.chinese);
		con = con.replace('$$math$$',ret.math);
		con = con.replace('$$english$$',ret.english);
		con = con.replace('$$gaoshu$$',ret.gaoshu);
		con = con.replace('$$suanfa$$',ret.suanfa);
		con = con.replace('$$wuli$$',ret.wuli);
		res.end(con);
		});
});

inde.js完整代码如下

const http = require('http');
const path = require('path');
const fs = require('fs');
const querystring = require('querystring');
const scoreData = require('./score.json');

http.createServer((req,res)=>{
	// 路由(请求路径+请求方式)
	//查询成绩的入口地址/query
	if(req.url.startsWith("/query") && req.method == 'GET'){
		fs.readFile(path.join(__dirname,'view','query.html'),'utf8',(err,fileContent)=>{
			if(err){
				// 解决乱码问题
				res.writeHead(500,{
					'Content-Type': 'text/plain; charset=utf8'
				});
				res.end('服务器错误,请与管理员联系');
			}
			res.end(fileContent);
		});
	}else if(req.url.startsWith('/score') && req.method == 'POST'){
		//获得成绩的结果
		let pdata = '';
		req.on('data',(chunk)=>{
			pdata += chunk;//一点一点的写入数据流
		});
		req.on('end',()=>{
			let obj = querystring.parse(pdata);//解析数据,将数据转成对象
			let ret = scoreData[obj.code];
			fs.readFile(path.join(__dirname,'view','result.html'),'utf8',(err,con)=>{
				if(err){
					res.writeHead(500,{
						'Content-Type': 'text/plain; charset=utf8'
					});
					res.end('服务器错误,请与管理员联系');
				}
				// 返回内容之前要进行数据渲染
				con = con.replace('$$chinese$$',ret.chinese);
				con = con.replace('$$math$$',ret.math);
				con = con.replace('$$english$$',ret.english);
				con = con.replace('$$gaoshu$$',ret.gaoshu);
				con = con.replace('$$suanfa$$',ret.suanfa);
				con = con.replace('$$wuli$$',ret.wuli);
				res.end(con);
			});
		});
	}
	
}).listen(8080,()=>{
	console.log('running...');
});

测试的数据score.json

{
	"num123": {
		"chinese": 100,
		"math": 145,
		"english": 123,
		"gaoshu": 88,
		"suanfa": 82,
		"wuli": 99
	},
	"num124": {
		"chinese": 110,
		"math": 138,
		"english": 130,
		"gaoshu": 98,
		"suanfa": 95,
		"wuli": 78
	},
	"num125": {
		"chinese": 124,
		"math": 139,
		"english": 135,
		"gaoshu": 99,
		"suanfa": 83,
		"wuli": 70
	}
	
}

---------------到此,代码已经写完了,接下来就是运行了------------------------

  • Windows+R打开命令行窗口

ecf javascript交互 js数据交互效果代码,ecf javascript交互 js数据交互效果代码_html_02,第2张

  • 输入cmd,确定即可

ecf javascript交互 js数据交互效果代码,ecf javascript交互 js数据交互效果代码_html_03,第3张

  • 切换路径到书写的index.js。我的文件是放在e盘下

ecf javascript交互 js数据交互效果代码,ecf javascript交互 js数据交互效果代码_数据_04,第4张

  • 此时服务器已经启动了
  • 现在就到浏览器中请求吧

ecf javascript交互 js数据交互效果代码,ecf javascript交互 js数据交互效果代码_服务器_05,第5张

  • 现在输入学号查询吧

ecf javascript交互 js数据交互效果代码,ecf javascript交互 js数据交互效果代码_ecf javascript交互_06,第6张

ecf javascript交互 js数据交互效果代码,ecf javascript交互 js数据交互效果代码_ecf javascript交互_07,第7张

每天总结一点点,进步一点点。如有不对的地方,希望指教~~



https://www.xamrdz.com/backend/3j31951402.html

相关文章: