铠甲勇士666 2022-07-31 13:15 采纳率: 100%
浏览 68
已结题

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

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

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

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

这是index.html代码

<!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">
    <title>Document</title>
</head>
<body>
    <form action="">
        <input type="text" id="input">
        <button onclick="btn()">submit</button>
    </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进行比较，如果两个数据一样的页面弹出两个一样，不一样则弹出不一样。

  • 写回答

2条回答 默认 最新

  • CSDN专家-showbo 2022-07-31 16:36
    关注

    用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>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
查看更多回答(1条)

报告相同问题？

问题事件

  • 已结题 （查看结题原因） 8月1日
  • 已采纳回答 8月1日
  • 赞助了问题酬金5元 7月31日
  • 创建了问题 7月31日

悬赏问题

  • ¥100 嵌入式系统基于PIC16F882和热敏电阻的数字温度计
  • ¥20 BAPI_PR_CHANGE how to add account assignment information for service line
  • ¥500 火焰左右视图、视差（基于双目相机）
  • ¥100 set_link_state
  • ¥15 虚幻5 UE美术毛发渲染
  • ¥15 CVRP 图论 物流运输优化
  • ¥15 Tableau online 嵌入ppt失败
  • ¥100 支付宝网页转账系统不识别账号
  • ¥15 基于单片机的靶位控制系统
  • ¥15 真我手机蓝牙传输进度消息被关闭了，怎么打开？(关键词-消息通知)