Как сделать уведомления в реальном времени из БД на локальный компьютер

Question

Я делаю веб-страницу, где вы можете подписаться, чтобы подписаться на список, чтобы получать уведомления о некоторых новостях.Все работает, но я хочу что-то изменить.Когда я ввожу электронное письмо и отправляю его, я получаю перенаправление на новую страницу (email.php), где я получаю предупреждение, сообщающее мне, если электронное письмо было добавлено в базу данных, где я храню все электронные письма.Я хочу сделать то же самое оповещение, не обновляя страницу (делайте оповещения на том же сайте, где мы включаем электронную почту)

Я делал это на AJAX, но я не очень хорош в JavaScript (ясвоего рода новый в JS).Я думаю, что мог сделать что-то не так, но я не смог этого увидеть.

Ниже приведен код

// HTML

<form method="POST" action="email.php" name="email-db" id="email-db">
                    <input type="email" class="email" name="email" placeholder="Enter your email">
                    <button  type="submit" class="submit" >&#10148;</button>
                </form>

// PHP

<?php
    $email = filter_input(INPUT_POST, 'email');
    if (!empty($email)){
        $host = "localhost";
        $dbusername ="root";
        $dbpassword ="";
        $dbname = "email";
        $alert1 = "<script type='text/javascript'>alert(\"Email has been written to subscribe list!\");</script>";
        $alertredirect = "<script type='text/javascript'>
           window.location = 'index.html'
      </script>";
        $alert2 = "<script type='text/javascript'>alert(\"Your email is already on our subscribe list!\");</script>";

        $conn = new mysqli ($host,$dbusername, $dbpassword , $dbname);
        if (mysqli_connect_error()){
            die('Connection problem('.mysqli_connect_errno().')'.mysqli_connect_error()); 
        }
        else{
            $sql = "INSERT INTO `email` (`email_id`, `email`) VALUES (NULL, '$email');";
            if ($conn->query($sql)){
                echo "$alert1";
                echo "$alertredirect";
            }
            else{
                echo "$alert2";
                echo "$alertredirect";
            }
            $conn->close();   
    }}
?>

Как вы можете видеть (на email.php), я делал перенаправления, но, как я уже сказал, все эти оповещения должны происходить в index.html - без обновления или перенаправления.

Спасибо заподдержка

Answer 1

1. Измените кнопку отправки на type=button, чтобы она не отправляла форму и не выполняла обратную передачу (есть другие методы)

2. Удалите javascript/ html из вашего обработчика php и возврата данных, например, простой true / false

3. добавить обработчик события js click, который вызывает $.ajax,

Например:

$("button.submit").click(function() {
    $.ajax({
        type: "POST", 
        url: your_url, 
        data: { email: $(".email").val() }, 
        success: function(result) {
            alert(result ? "Email saved" : "Already exists");
        },
        error: function(jqXHR, textStatus, errorThrown) {
            console.error(errorThrown);
        }
    });
});

Answer 2

Это должно работать идеально для вас:

ПЕРЕДНЯЯ ЧАСТЬ (JAVASCRIPT)
В интерфейсе вы можете использовать AJAX для отправки вашего запроса следующим образом:

$(document).ready(function(){
      $('#email-db').on('submit', function(){
           let email = $('.email').val();
           $.ajax({
              url: "email.php"
              type: 'post',
              data: { 'email': email },
              success: function(response){
                 alert(response);
              }
           });
       });
}

СТОРОНА (PHP)
На стороне сервера вы можете использовать PHP для возврата вашего сообщения с предупреждением

<?php
    if (isset($_POST['email']) && !empty($_POST['email'])) {
        $host = 'localhost';
        $dbusername = 'root';
        $dbpassword = '';
        $dbname = 'email';
        $alert1 = 'Email has been written to subscribe list';
        $alert2 = 'Your email is already on our subscribe list';
        $conn = new mysqli ($host, $dbusername, $dbpassword, $dbname);
        if (mysqli_connect_error()) {
            die('Connection problem('.mysqli_connect_errno().')'.mysqli_connect_error());
        } else {
            $sql = "INSERT INTO `email` (`email_id`, `email`) VALUES (NULL, '$email');";
            return $conn->query($sql) ? $alert1 : $alert2;
        }
    }
?>

Answer 3

<form method="POST" action="email.php" name="email-db" id="email-db"> <input type="email" class="email" name="email" placeholder="Enter your email"> <button type="submit" class="submit" >&#10148;</button> </form>

let form = document.querySelector("form");
form.addEventListener("submit", (event)=>{

   // This will help you to diable the defaut property of the form, And stops refresing on the submit 

   if(event && event.preventDefault){
      event.preventDefault();
   }

   let formData = new FormData(form)

   //This code will iterate data from the input elements from your form
   let postData = {};

   for(let [key, val] of formData.entries()){
    if(val) postData[key] = val;
   }


   postData(event.target.action, postData)
  .then(data => console.log(JSON.stringify(data))) 
  .catch(error => console.error(error));
})

function postData(url = '', data = {}) {
  // Default options are marked with *
    return 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
        referrer: 'no-referrer', // no-referrer, *client
        body: JSON.stringify(data), // body data type must match "Content-Type" header
    })
    .then(response => response.json()); // parses JSON response into native Javascript objects 
}

После этого вы отправите данные на сервер для вашего использования, а затем отправите данные обратно на ваш звонок.