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

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

后端2024-05-09 22:49:37

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
	}
	
}

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