#javascript #html #css #node.js #express
#javascript #HTML #css #node.js #экспресс
Вопрос:
Я пытался перенести данные формы консольного журнала на сервер, но я не могу их получить и даже не получаю никаких ошибок
//jshint esversion: 6
const express= require("express");
const https= require("https");
const bodyParser = require("body-parser");
const app= express();
app.use(bodyParser.urlencoded({extended:true}));
app.use(express.static("public"))
app.get("/",function(req,res){
res.sendFile(__dirname "/signup.html")
});
app.post("/",function(request,response){
const data= {
members:[
{
email_address:email,
status:"subscribed",
merge_fields:{
FNAME:fname
}
}
]
};
const jsonData =JSON.stringify(data);
const url= "https://us17.api.mailchimp.com/3.0/ping/69a872e3fb"
const options ={
method: "POST",
auth: "om:3ec130f17cc439ca15defea6a5592fac-us17"
}
var request= https.request(url,options,function(response){
response.on("data",function(data){
const print = console.log(JSON.parse(data));
console.log(print);
})
})
request.write(jsonData);
request.end();
});
app.listen("3000",function(){
console.log("Site is working !!");
});
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Jekyll v4.1.1">
<title>Signin Template · Bootstrap</title>
<link rel="canonical" href="https://getbootstrap.com/docs/4.5/examples/sign-in/">
<!-- Bootstrap core CSS -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<!-- Favicons -->
<link rel="apple-touch-icon" href="/docs/4.5/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
<link rel="icon" href="/docs/4.5/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
<link rel="icon" href="/docs/4.5/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
<link rel="manifest" href="/docs/4.5/assets/img/favicons/manifest.json">
<link rel="mask-icon" href="/docs/4.5/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
<link rel="icon" href="/docs/4.5/assets/img/favicons/favicon.ico">
<meta name="msapplication-config" content="/docs/4.5/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">
<style>
.bd-placeholder-img {
font-size: 1.125rem;
text-anchor: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
@media (min-width: 768px) {
.bd-placeholder-img-lg {
font-size: 3.5rem;
}
}
</style>
<!-- Custom styles for this template -->
<link href="css/style.css" rel="stylesheet">
</head>
<body class="text-center">
<form action="/" class="form-signin">
<h1 class="h3 mb-3 font-weight-normal">Sign Up For Our Newsletter</h1>
<label for="inputEmail" class="sr-only">First Name</label>
<input type="text" id="inputEmail" name="fname" class="form-control" placeholder="First Name" required autofocus>
<label for="email" class="sr-only">Email Address</label>
<input type="email" id="inputPassword" name="email" class="form-control" placeholder="Email Addres" required>
<div class="checkbox mb-3">
</div>
<button class="btn btn-lg btn-primary btn-block" type="submit">Sign Up</button>
</form>
</body>
</html>
Я также пробовал использовать simple form:
const express= require("express");
const https= require("https");
const bodyParser= require("body-parser");
const app= express();
app.use(bodyParser.urlencoded({extended:true}));
app.get("/", function(req,res){
res.sendFile(__dirname "/signup.html");
});
app.post("/",function(request,response){
var fname= req.body.fname
var lname= req.body.lname
var email = req.body.email
console.log(fname, lname, email)
});
app.listen("3000",function(){
console.log("server is running!!")
});
<!DOCTYPE html>
<html>
<head>
<title>Sign Up Form</title>
<meta charset="UTF-8">
<meta viewport="width=device-width,initial-scale=1">
</head>
<body>
<form action="/">
<input type="text" name="fname" placeholder="First Name">
<input type="text" name="lname" placeholder="Last Name">
<input type="text" name="email" placeholder="E-Mail Address">
<input type="submit" name="submit" value="submit">
</form>
</body>
</html>
Я пытался изменить действие в форме, но это не работает так же хорошо, я попытался воссоздать весь проект с нуля, но все равно получаю проблему того же типа.
Ответ №1:
добавьте method
в свою HTML-форму.
<form method="post" action="/" class="form-signin">
и чтобы упростить жизнь, установите morgan, чтобы увидеть все ваши подключения к серверу, и вы увидите, что форма не отправляет POST-запрос
const morgan = require("morgan"); // npm i morgan
app.use(morgan("dev")); // log every request to the console