Input Nod Js + JS = document.getElementById

Question

Terdapat skrip JS nod (app.js) untuk menghantar surat ke e-mel:

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}`);
});

Terdapat butang dalam fail js lain yang menjalankan skrip js ini dan menghantar e-mel apabila saya menekan butang:

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));
});

Fail html mempunyai medan input untuk mesej teks

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

Bagaimana untuk menghantar e-mel nilai input ini dengan menekan butang?

Answer 1

Fetch API menerima parameter kedua, objek pilihan. Di sinilah anda menghantar input. Dalam kes anda, anda perlu menangkap nilai input. Jadi jika anda mempunyai:

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

Maka anda sepatutnya boleh mengakses nilai menggunakan input.value. Jika anda menghantarnya dalam harta badan objek pilihan, ia sepatutnya muncul dalam badan permintaan pada pelayan.

Perkara seperti ini:

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

Saya nampak anda juga sedang mendengar elemen lain (head）的点击。如果是这种情况，那么您可能需要在输入上使用 onChange pengendali yang menyimpan nilai di suatu tempat secara setempat. Kemudian apabila pengguna mengklik pada elemen lain, anda boleh menghantarnya ke dalam pilihan dapatkan.

Berikut ialah contoh sintaks untuk Pilihan Hantar (dipinjam daripada dokumen yang saya kongsi di atas) yang menunjukkan pilihan berbeza yang akan diterima:

// 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
  });