javascript - 在程序的不同阶段使用 Snack bar 功能的不同元素

Question

作为一个初学者，我定义了一个 snackbar 功能(snackbarfunction)，在程序的不同阶段应该显示 3 个元素(例如，当用户输入电子邮件时，消息“成功，谢谢”应该是 snackbar 所示)因此，我将通过一个变量将元素与我的 PHP 页面分开。但是，在 JS 或 HTML 部分中无法检测到该变量。

除了我现在的工作方式，还有什么不同的方法吗？

有这样的形式:

<?php

     require_once "indexRequest.php";

 ?>
                <form class="news-letter" id="email-form" method="post" action="indexRequest.php">
                 <div class="subscribe-hide">
                        <input class="form-control" type="email" id="subscribe-email" name="email" placeholder="Email Address" required>
                        <button onclick="snackbarfunction()"  id="subscribe-submit" class="btn"><i class="fa fa-envelope"></i>
                        </button>
                       <span id="subscribe-loading" class="btn"> <i class="fa fa-refresh fa-spin"></i> </span> 

                        <div id="snackbarrepeated">Email already exists.</div>
                        <div id="snackbardone">Successful, Thanks.</div>
                        <div id="snackbarfailed">Unsuccessful, Please try again.</div>


                  </div>
                </form>

                <br>

                <p class="section-description">
                    We Will Notify You!
                </p><!-- /.section-description -->
                <br>
            </div>
        </div>
        <br> <br>


    </div>
    <!-- /.container -->
</div>
<!-- /.pattern -->
</section>

function snackbarfunction() {
    <?php  if(!is_null($status)) { ?>
    var x = document.getElementById("snackbarfailed");
    x.className = "show";
    setTimeout(function(){ x.className = x.className.replace("show", ""); }, 3000);

    var y = document.getElementById("snackbarrepeated");
    y.className = "show";
    setTimeout(function(){ y.className = y.className.replace("show", ""); }, 3000);

    var z = document.getElementById("snackbardone");
    z.className = "show";
    setTimeout(function(){ z.className = z.className.replace("show", ""); }, 3000);
    <?php  } ?>
}
</script>
<script>
// wait for the DOM to be loaded
$(document).ready(function() {
    // bind 'email-form' and provide a simple callback function
    $('#email-form').ajaxForm(function() {
    });
});
</script>
</body>
</html>

那是我的 PHP 代码:

<?php

require_once "DB.php";

        $status = null;


        if($_SERVER["REQUEST_METHOD"] == "POST")
        {
            $status = "s";
            $email = $_POST['email'];
            if(filter_var($email , FILTER_VALIDATE_EMAIL) && htmlspecialchars($_POST['email']))
            {
                $conn = connectToDB();
                if( ! userGet($email , $conn))
                {
                    userSave($email , $conn) ? $status = "Done" : $status = "Not-Done";

                }
                else
                {

                    $status = "Duplicated";

                }
            }

        }

        ?>

在此先感谢您提供的任何帮助。

Answer 1

首先，php 脚本在服务器端运行，而 js 在客户端运行，因此如果双方不相互“交谈”，就无法完成您想要做的事情。我可以看到您创建了一个 ajax，这是实现这种通信的一种方式。

第二件事:您的 php 脚本需要向 ajax 发送响应。我相信这样做的常用方法是使用 json 响应。在 .php 的末尾，您应该放置以下代码:

header('Content-Type: application/json');
echo json_encode($status);

现在您需要让 js 读取响应并对其进行处理。您必须在表单上添加响应，以便 js 知道您将以某种方式使用它

$(document).ready(function() {
    // bind 'email-form' and provide a simple callback function
    $('#email-form').ajaxForm(function(response) {
         console.log(response); //here you will have your $status variable, but readable from js.
         // now you shoul call the function to make the changes on the page
         snackbarfunction(response);
    });
});

Obs1:我放置了一个 console.log('response') 因为 $status 可能不是直接的 response 变量，它可能在响应中，像这样:response.data

我冒昧地更改您的函数以使用 JS 变量:

function snackbarfunction(response) {
    if(response == "Done"){
       var z = document.getElementById("snackbardone");
       z.className = "show";
       setTimeout(function(){ z.className = z.className.replace("show", ""); }, 3000);
    }else if(response == "Duplicated"){
        var y = document.getElementById("snackbarrepeated");
        y.className = "show";
        setTimeout(function(){ y.className = y.className.replace("show", ""); }, 3000);
    }else{
        var x = document.getElementById("snackbarfailed");
        x.className = "show";
        setTimeout(function(){ x.className = x.className.replace("show", ""); }, 3000);
    }
}

更新

在表单的同一目录中创建一个新文件:

<?php

require_once "DB.php";
$status = null;
if($_SERVER["REQUEST_METHOD"] == "POST")
{
    $status = "s";
    $email = $_POST['email'];
    if(filter_var($email , FILTER_VALIDATE_EMAIL) && htmlspecialchars($_POST['email']))
    {
        $conn = connectToDB();
        if( ! userGet($email , $conn))
        {
            userSave($email , $conn) ? $status = "Done" : $status = "Not-Done";

        }
        else
        {
            $status = "Duplicated";
        }
    }

}

header('Content-Type: application/json');
echo json_encode($status);

您的表单页面:

The rest of the file...

            <form class="news-letter" id="email-form" method="post" action="send_mail.php">
                 <div class="subscribe-hide">
                        <input class="form-control" type="email" id="subscribe-email" name="email" placeholder="Email Address" required>
                        <button onclick="snackbarfunction()"  id="subscribe-submit" class="btn"><i class="fa fa-envelope"></i>
                        </button>
                       <span id="subscribe-loading" class="btn"> <i class="fa fa-refresh fa-spin"></i> </span> 

                        <div id="snackbarrepeated">Email already exists.</div>
                        <div id="snackbardone">Successful, Thanks.</div>
                        <div id="snackbarfailed">Unsuccessful, Please try again.</div>


                  </div>
                </form>

                <br>

                <p class="section-description">
                    We Will Notify You!
                </p><!-- /.section-description -->
                <br>
            </div>
        </div>
        <br> <br>


    </div>
    <!-- /.container -->
</div>
<!-- /.pattern -->
</section>
<script>
    function snackbarfunction(response) {
        if(response == "Done"){
           var z = document.getElementById("snackbardone");
           z.classList.add('show');
           setTimeout(function(){ z.classList.remove('show'); }, 3000);
        }else if(response == "Duplicated"){
            var y = document.getElementById("snackbarrepeated");
            y.classList.add('show');
           setTimeout(function(){ y.classList.remove('show'); }, 3000);
        }else{
            var x = document.getElementById("snackbarfailed");
            x.classList.add('show');
           setTimeout(function(){ x.classList.remove('show'); }, 3000);
        }
    }
// wait for the DOM to be loaded
$(document).ready(function() {
    // bind 'email-form' and provide a simple callback function
    $('#email-form').ajaxForm(function(response) {
         console.log(response); //here you will have your $status variable, but readable from js.
         // now you shoul call the function to make the changes on the page
         snackbarfunction(response);
    });
});
</script>
</body>
</html>

我将 className 更改为 classList 因为如果元素有另一个类，它将被替换。像这样:

<div id="a" class="a b"></div>
<script>
document.getElementById("a").className = "c"; // The element would lose class a and b and only have c
document.getElementById("a").classList.add("c");//The element would have class a,b and c 
</script>
```

Obs2: The code may need some changes, like i pointed on obs1, but if you debug the code you should have no problem with that.