javascript - 如何从数据库向本地计算机发出实时通知

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. 从 php 处理程序中删除 javascript/html 并返回数据，例如简单的 true/false

3. 添加一个调用$.ajax的js点击事件处理程序，

例如:

$("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);
        }
    });
});