Hantar data daripada React ke Node js menggunakan onSubmit
P粉281089485
P粉281089485 2024-04-02 16:36:07
0
1
341

Saya mempunyai ini onSubmit dalam skrip React saya yang dipanggil apabila saya mengklik butang hantar:

const handleSubmit = (event) => {
event.preventDefault();
const form = event.target;
const rawdata = new FormData(form);
const data = {
    email: rawdata.get('email'),
    password: rawdata.get('password'),
};

console.log(data);
const response = fetch('http://localhost:4000/register', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json',
    },
    body: JSON.stringify(data),
}).then(response => {
    if(response.ok) {
        console.log('Form data sent successfully');
    } else {
        console.error('Failed to send form data');
    }
}).catch (error => console.error(error));
}

Ia harus menghantar data ke skrip js nod saya dan memanggil fungsi berikut:

app.post("/register", function (req, res){
    console.log("inside /register");
    console.log("email: " + req.body.email);
    User.register({username: req.body.email}, req.body.password, function(err, user){
        if(err) {
            console.log(err);
            console.log("couldn't register");
            //res.redirect("/signup");
        } else{
            passport.authenticate("local")(req, res, function(){
                console.log("login granted");
            });
        }
    });
});

Tetapi ia mengatakan data yang saya cuba log (req.body.email) tidak ditentukan. Jika sesiapa boleh membantu saya, saya amat berterima kasih. Terima kasih

P粉281089485
P粉281089485

membalas semua(1)
P粉308783585

Saya mengedit kod di bawah dan kini saya boleh mendapatkan data daripada skrip React saya dalam skrip Node js saya:

const handleSubmit = (event) => {
    event.preventDefault();
    const form = event.target;
    const rawdata = new FormData(form);
    const data = {
        email: rawdata.get('email'),
        password: rawdata.get('password'),
    };

    console.log(data);
    fetch('http://localhost:4000/register', {
        method: 'POST',
        headers:{
            'Content-Type' : 'application/json'
        },
        body: JSON.stringify(data)
    })
    .then(response => {
        console.log("response ok: " + response.ok);
        console.log("response status: " + response.status);
        console.log("response json: " + response.json());
        if(response.ok) {
            console.log('Form data sent successfully');
            return response.json();
        } else {
            console.error('Failed to send form data');
        }
    }).catch (error => console.error(error));

Dan dalam skrip nod saya, saya terpaksa menambah baris berikut pada permulaan:

app.use(bodyParser.json());
app.use(express.static("public"));
app.set('view engine', 'ejs');
app.use(bodyParser.urlencoded({
   extended: true
}));

Ia berfungsi sekarang. Talian app.use dalam nod adalah masalahnya.

Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan