Question

作为一个初学者，我已经定义了一个小吃店功能（snackbarfunction），并且应该在程序的不同阶段显示3个元素（例如，当用户输入电子邮件时，应将“成功，谢谢”消息显示为小吃店显示）因此，我要通过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.

在程序的不同阶段使用小吃店功能的不同元素

1 个答案: