分类导航

程序问答发布时间：2022-06-02 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了将 JSON 数据从 index.html 发送到 NodeJS 服务器，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决将 JSON 数据从 index.html 发送到 NodeJS 服务器？

开发过程中遇到将 JSON 数据从 index.html 发送到 NodeJS 服务器的问题如何解决？下面主要结合日常开发的经验，给出你关于将 JSON 数据从 index.html 发送到 NodeJS 服务器的解决方法建议，希望对你解决将 JSON 数据从 index.html 发送到 NodeJS 服务器有所启发或帮助；

我正在尝试将数据从 index.HTML 发送到 NodeJs 服务器，该服务器将进一步将其保存在本地运行的 MongoDB 数据库中。
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>User</title>
    <link href="https://cdn.Jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/CSS/bootstrap.min.CSS" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
</head>
<body>
    <div class="container">
        <nav class="navbar navbar-expand-lg navbar-dark bg-dark rounded">
            <h1 class="navbar-brand" style="padding: 5px">MovIE</h1>
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link">User</a>
                </li>
                <!-- <li class="nav-item">
                    <a class="nav-link" href="admin.HTML">admin</a>
                </li> -->
            </ul>
        </nav>
    </div>

    <div class="container">
        <h1>User Register</h1>
        <div class="row">
            <div class="col-6">
                <form ID="form">
                    <div class="mb-3">
                        <label for="email" class="form-label">Email address</label>
                        <input type="email" class="form-control" ID="email" oninput="onChange(this)">
                    </div>
                    <div class="mb-3">
                        <label for="password" class="form-label">password</label>
                        <input type="password" class="form-control" ID="password" onchange="onChange(this)">
                    </div>
                    <button type="submit" class="btn btn-priMary" ID="submit">submit</button>
                </form>
            </div>
        </div>
    </div>

    <script src="https://cdn.Jsdelivr.net/npm/@popperJs/core@2.9.1/dist/umd/popper.min.Js" integrity="sha384-SR1sx49pculnqZUnnPwx6FCym0wLsk5JZuNx2bPPENzswTNFaQU1RDvt3wT4gWFG" crossorigin="anonymous"></script>
    <script src="https://cdn.Jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/Js/bootstrap.min.Js" integrity="sha384-j0CNLUeiqtyarmlzUHCPZ+Gy5fQu0dQ6eZ/xAww941Ai1SxSY+0EQqNXNE6DZiVc" crossorigin="anonymous"></script>
    <script>
        var obj = {};

        const onChange = (E) => {
            obj[e.ID] = e.value;
        }

        document.querySELEctor('#submit').addEventListener('click',(E) => {
            e.preventDefault();
            console.log(obj);
            let res = {};
            (async () => {
                const rawResponse = await fetch('http://localhost:3001/user',{
                    mode: 'no-cors',method: 'POST',headers: {
                        'Accept': 'application/Json','Content-Type': 'application/Json'
                    },body: JsON.Stringify({ email: obj.email,password: obj.password })
                });
                // const content = await rawResponse.Json().then(res => console.log(res)).catch(err => console.log(err));
                // res = content;
                return await rawResponse.Json();
            })().then(res => console.log(res)).catch(err => console.log(err));
        });
    </script>
</body>
</HTML>

index.HTML 不在服务器文件夹中。它独立于不同的文件夹运行。
package.Json

{
  "name": "nodeJs","version": "1.0.0","description": "","main": "index.Js","scripts": {
    "test": "echo \"Error: no test specifIEd\" && exit 1"
  },"author": "","license": "ISC","dependencIEs": {
    "express": "^4.17.1","mongoose": "^5.12.5","valIDator": "^13.6.0"
  },"devDependencIEs": {
    "nodemon": "^2.0.7"
  }
}

index.Js

const express = require("express");
const mongoose= require("mongoose");
const valIDator = require("valIDator");

const app = express();
app.use(express.Json());

mongoose.connect('mongodb://127.0.0.1:27017/movIE-info',{
    useNewUrlParser: true,useUnifIEdtopology: true,useCreateIndex: true 
});

const userscheR_121_11845@a = new mongoose.scheR_121_11845@a({
    email: {
        type: String,required: true,trim: true,lowercase: true,unique: true,valIDate(value) {
            if (!valIDator.isEmail(value)) {
                throw new Error('Email is InvalID');
            }
        }
    },password: {
        type: String,minLength: 7,valIDate(value) {
            if (value.tolowerCase().includes('password')) {
                throw new Error('password cAnnot contain "password"');
            }
        }
    }
});

const User = mongoose.model('User',userscheR_121_11845@a);

const movIEscheR_121_11845@a = mongoose.scheR_121_11845@a({
    name: {
        type: String,required: true
    },date: {
        type: Date
    },director: {
        type: String,actor: {
        type: String
    },genre: {
        type: String,desc: {
        type: String
    }
});

const MovIE = mongoose.model('MovIE',movIEscheR_121_11845@a);

app.post('/user',async (req,res) => {
    try {
        console.log(req.body);
        const user = new User(req.body);
        await user.save();
        res.send(user);
    } catch (err) {
        res.status(400).send(err);
    }
});

app.post('/admin',res) => {
    try {
        const movIE = new MovIE(req.body);
        await movIE.save();
        res.send(movIE);
    } catch (err) {
        res.status(400).send(err);
    }
});

app.Listen(3001,() => {
    console.log("Port working");
})

问题是当我从 index.HTML 单击提交时，它会向我发送 POST http://localhost:3000/user net::ERR_ABORTED 400 (Bad request)，这是我必须设置从我的服务器路由 /user 抛出的错误。你能帮我理解我在这里缺少什么吗？
PS：路由 /user 正在工作，因为我通过从 Postman 发送数据来测试它，并且数据被保存在 MongoDB 中。在这里，我以 JsON 格式发送数据并以 JsON 格式接受。（同样来自 index.HTML）。

更改：在 console.log(req.body) 路由中添加 /user 后，当我单击 index.HTML 文件中的提交时，它会向服务器控制台提供以下结果：