Как найти электронную почту в базе данных с помощью Ajax?

Опубликовано: 22 Февраля, 2023

В этой статье мы узнаем, как найти электронную почту в базе данных с помощью Ajax . Метод jQuery ajax() использует асинхронные HTTP-запросы для подключения к серверу. Здесь мы будем использовать сервер Node.js и базу данных MongoDB.

Разберемся с помощью пошаговой реализации.

Шаг 1. Создайте папку с именем CHECKEMAIL и выполните следующую команду, чтобы запустить приложение Node.js.

npm init -y

Шаг 2: Используя следующую команду, установите необходимые пакеты npm.

npm install express body-parser mongoose nodemon

Шаг 3: В каталоге вашего проекта создайте файл с именем index.js .

Структура проекта: теперь каталог нашего проекта должен выглядеть так.

Шаг 4: Требуйте и настройте экспресс-приложение, чтобы оно могло начать прослушивание запросов. Наш сервер настроен на использование порта 3000.

index.js

Javascript

const express = require("express");
const bodyParser = require("body-parser");
const app = express();
  
app.use(express.json());
app.use(
bodyParser.urlencoded({
    extended: true})
);
  
app.listen(3000, () => {
    console.log("Server started on port 3000");
});

Шаг 5: Включите приведенный ниже сценарий в файл package.json. Это означает, что мы можем запустить наш сервер с помощью npm start, который будет использовать ранее установленный пакет Nodemon.

пакет.json

"scripts": {
     "start": "nodemon index.js"
},

Шаг 6: Чтобы запустить сервер, введите команду npm start в терминале.

Шаг 7: Запросите и подключитесь к базе данных MongoDB с помощью пакета mongoose. Если вы работаете над локальным проектом, URL-адрес сервера MongoDB, вероятно, будет mongodb:/localhost:27017/databaseName. Порт по умолчанию — 27017.

Javascript

const mongoose = require("mongoose");
mongoose
    .connect("mongodb://localhost:27017/mydb", {
        useNewUrlParser: true,
      })
      .then(() => {
        console.log("Database connected");
      })
      .catch((err) => {
        console.log("Connection failed");
      })

Шаг 8: Перезапустите сервер, чтобы увидеть, успешно ли подключена база данных.

Шаги, чтобы найти электронную почту в базе данных с помощью Ajax:

Шаг 1: Создайте файл HTML с именем index.html, который содержит поле ввода и кнопку отправки. Когда пользователь нажимает кнопку отправки, он отправляет POST-запрос с данными JSON в / route на сервере, после чего сервер дает соответствующий ответ.

HTML

<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" 
        content="width=device-width, initial-scale=1.0" />
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js">
      </script>
</head>
  
<body>
    <h1 style="color: green">GeeksforGeeks</h1>
    <input type="text" placeholder="Email" 
        name="email" id="email" />
    <button id="btn">Submit</button>
    <div id="output" style="background-color: green; 
        color: #fff; width: fit-content">
      </div>
  
    <script>
        $(document).ready(() => {
            $("#btn").click(() => {
                $("#output").empty();
                let email = $("#email").val();
                $.ajax({
                    method: "POST",
                    url: "/",
                    data: { emailId: email },
                    success: function (data) {
                        
                        // Success callback function
                        if (data.length !== 0) {
                            $("#output").append(`<p>_id: 
                            ${data[0]._id}</p>`);
                            $("#output").append(`<p>email: 
                            ${data[0].email}</p>`);
                        } else {
                            $("#output").append(`<p>Not Found!</p>`);
                        }
                        console.log(data);
                    },
                    error: function (error) {
                        
                        // Error callback function
                        console.log(error);
                    },
                });
            });
        });
    </script>
</body>
  
</html>

Шаг 2: Создайте запрос на получение для отображения HTML-файла на нашем сервере.

Javascript

app.get("/", (req, res) => {
    res.sendFile(path.join(__dirname + "/index.html"));
});

Шаг 3: Создайте модель для представления структуры нашей базы данных. Здесь у нас есть схема, описывающая структуру нашей базы данных. Он имеет атрибут электронной почты.

Javascript

const userSchema = {
    email: {
        type: String,
        required: true,
      },
};
const user = mongoose.model("users", userSchema);

Шаг 4: Обработайте запрос на публикацию, используя только что созданную модель. Атрибут электронной почты принимает идентификатор электронной почты из тела запроса.

Javascript

app.post("/", async (req, res) => {
    try {
        const userEmail = await user.find({
            email: req.body.emailId });
        res.send(userEmail);
      } catch (error) {
        console.log(error);
      }
});

Выход:

Technical Scripter JavaScript Picked

Как найти электронную почту в базе данных с помощью Ajax?

Javascript

Javascript

HTML

Javascript

Javascript

Javascript

РЕКОМЕНДУЕМЫЕ СТАТЬИ