Блог

Главная - Вопросы по программированию - Не удается утешить данные формы журнала в express js

Не удается утешить данные формы журнала в express js

#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