Noeud Js + entrée JS = document.getElementById

Question

Il existe un script node JS (app.js) pour envoyer une lettre par e-mail :

const { response } = require("express");
const express = require("express");
const nodemailer = require("nodemailer");
const app = express();
const port = 5000;

//
function sendEmail(tel) {
  return new Promise((resolve, reject) => {
    var tranporter = nodemailer.createTransport({
      service: "gmail",
      auth: {
        user: ,
        pass: ,
      },
    });
    const mail_configs = {
      from: "myEmail",
      to: "artemdvd@mail.ru",
      subject: "Testing Koding 101 Email",
      text: "tel",
    };
    tranporter.sendMail(mail_configs, function (error, info) {
      if (error) {
        console.log(error);
        return reject({ message: "An error has occured" });
      }
      return resolve({ message: "Email sent succesfuly" });
    });
  });
}

app.get("/", (req, res) => {
  sendEmail()
    .then((response) => res.send(response.message))
    .catch((error) => res.status(500).send(error.message));
});

app.listen(port, () => {
  console.log(`nodemailerProject is listening at http://localhost:${port}`);
});

Il y a un bouton dans un autre fichier js qui exécute ce script js et envoie un e-mail lorsque j'appuie sur le bouton :

let input = document.getElementById("phonenumber");

head.addEventListener("click", function () {
  fetch("http://localhost:5000/")
    .then((response) => response.json())
    .then((data) => console.log(data))
    .catch((error) => console.error(error));
});

Le fichier html comporte un champ de saisie pour les messages texte

<input id="phonenumber" class="text-order" type="text"
        placeholder="___________"'/>

Comment envoyer par e-mail cette valeur d'entrée en appuyant sur un bouton ?

Answer 1

Fetch API accepte le deuxième paramètre, un objet d'options. C'est ici que vous transmettez les entrées. Dans votre cas, vous devez capturer la valeur de l'entrée. Alors si vous avez :

let input = document.getElementById("电话号码");

Ensuite, vous devriez pouvoir accéder à la valeur en utilisant input.value. Si vous l'envoyez dans la propriété body de l'objet options, il doit apparaître dans le corps de la requête sur le serveur.

Des choses comme ça :

fetch("http://localhost:5000/", {
  body: JSON.stringify(input.value)
})

Je vois que vous écoutez également un autre élément (head）的点击。如果是这种情况，那么您可能需要在输入上使用 onChange gestionnaire qui stocke la valeur quelque part localement. Ensuite, lorsque l'utilisateur clique sur l'autre élément, vous pouvez le transmettre dans l'option get.

Voici un exemple de syntaxe pour les options d'envoi (emprunté au document que j'ai partagé ci-dessus) démontrant les différentes options qu'il acceptera :

// Example POST method implementation:
async function postData(url = '', data = {}) {
  // Default options are marked with *
  const response = await fetch(url, {
    method: 'POST', // *GET, POST, PUT, DELETE, etc.
    mode: 'cors', // no-cors, *cors, same-origin
    cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
    credentials: 'same-origin', // include, *same-origin, omit
    headers: {
      'Content-Type': 'application/json'
      // 'Content-Type': 'application/x-www-form-urlencoded',
    },
    redirect: 'follow', // manual, *follow, error
    referrerPolicy: 'no-referrer', // no-referrer, *no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin, strict-origin-when-cross-origin, unsafe-url
    body: JSON.stringify(data) // body data type must match "Content-Type" header
  });
  return response.json(); // parses JSON response into native JavaScript objects
}

postData('https://example.com/answer', { answer: 42 })
  .then((data) => {
    console.log(data); // JSON data parsed by `data.json()` call
  });