关于#html#的问题，如何解决？

问题遇到的现象和发生背景

实现文件内容与表单中输入框中的内容进行比较，看是否一样

问题相关代码，请勿粘贴截图

这是index.html代码

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">
    <title>Documenttitle>
head>
<body>
    <form action="">
        <input type="text" id="input">
        <button onclick="btn()">submitbutton>
    form>
    <script>
        function btn(){
            var value = document.getElementById("input").value
            alert(value)
        }
    script>
body>
html>

这是nodejs代码

const fs = require("fs");
const express = require("express");
const app = express();
const port = 3020;
 
app.get("/", (req, res) => {
  fs.readFile("./1.txt", "utf8", function (err, dataStr) {
    // 如果读取成功，则err的值为null，dataStr会显示例1.txt的文本内容
    // 如果读取失败，err的值为错误对象，展示出错误信息，dataStr的值为undefined
    console.log(err);
    console.log("------");
    console.log(dataStr);
    if (err) return res.send("内容读取失败!");
    res.send(dataStr);
  });
});
app.listen(port, () => console.log(`Example app listening on port ${port}!`));

我想要达到的结果

点击按钮可以对dataStr与value进行比较，如果两个数据一样的页面弹出两个一样，不一样则弹出不一样。

用ajax发送数据到node服务器，获取数据后对比，index.html也要放到node服务器上通过http协议访问，防止跨域，注意改为index.ejs，node用的ejs模板引擎，注意安装。简单示例如下，1.txt中内容为showbo

app.js

const express = require("express");
const fs = require("fs");
var bodyParser = require('body-parser');

const app = express();
app.set('view engine', 'ejs');
app.use(bodyParser());

app.get("/",  (req, res) =>{
    res.render('index')
});
app.post('/check', (req, res) => {
    var value = req.body.value;
    fs.readFile("./1.txt", "utf8", function (err, dataStr) {
        console.log(dataStr,value);
        if (err) return res.send("内容读取失败!");
        res.send(value == dataStr?"内容匹配":"内容不匹配");
    });
});

app.listen(3000, function () {
    console.log("server start at localhost:3000");
})

views\index.ejs

<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">
    <title>Document</title>
</head>
<body>
    <form action="">
        <input type="text" id="input">
        <button onclick="return btn()">submit</button>
    </form>
<script src="https://g.csdnimg.cn/??lib/jquery/1.12.4/jquery.min.js"></script>
    <script>
        function btn() {
            var value = document.getElementById("input").value
            $.ajax({
                url: 'check',
                method: 'POST',
                data: { value: value },
                complete: function (xhr) {
                    alert('服务器端返回\n'+xhr.responseText)
                }
            })
            return false;//阻止表单提交
        }
    </script>
</body>
</html>

action添加你的后台地址，点击submit先后端提交请求在根据返回的提示，前端进行相关操作就可以了啊。