javascript - JS 在 PHP 中不起作用（document.getElementById）

Question

我正在为我的网络开发项目做一个非常菜鸟密码注册的事情，我被困在这里

<script>   
    <?php  
        if ( isset($_POST['enter']) ){
            if ($_POST['password']=='0000'){
                echo('document.getElementById("adminsection").style.display = "block";
                document.getElementById("passsection").style.display = "none" ;');
            }
            else{
                echo ("alert('password incorrect');");
            }
        }
    ?>
</script>

由于某种原因，当满足条件时，这部分似乎不起作用：

 echo('document.getElementById("adminsection").style.display = "block";
 document.getElementById("passsection").style.display = "none" ;');

adminsection 和 passsection 只是包含页面元素的部分标签，它们看起来有点像这样

<form style="width:100%; margin:10% 0 10% 0" action="administrator123.php" method="POST">
<section id="passsection">
    <input style="margin-left:-5px" id="passfield" name="password" type="password" placeholder="****">
    <input type="submit" id="password" name="enter" value="enter">
</section>
<section id="adminsection">
    <p>hey</p>
</section>
</form>

此代码背后的目标是隐藏密码部分并在输入正确密码时显示管理部分如果您为我提供不涉及 jQuery 的解决方案，我将不胜感激

标签： javascriptphpdomdocument

Answer 1

您以错误的方式混合了 javascript 和 PHP。

普通表单提交。操作顺序为：

• 您在 html 中有一个表单（您缺少表单元素）
• 用户提交表单
• 这会将提交发送到服务器，导致页面加载/重新加载
• 服务器端 PHP 检查密码是否正确
• 新加载的页面会处理 PHP 输出。

<?php
if ( isset($_POST['enter']) ){
    if ($_POST['password']=='0000'){
       $loggedin = true;
    } else {
       $error="Password was incorrect";
    }
}
?>

  <?php if (!$loggedin) {?>
  <section id="passsection">

    <?php if ($error) {?>
    <div class='error'>
      <?php echo $error;?> </div>
    <?}?>

      <form method='post'>
        <input style="margin-left:-5px" id="passfield" name="password" type="password" placeholder="****">
        <input type="submit" id="password" name="enter" value="enter">
      </form>
  </section>

  <?}?>

Ajax 表单提交。操作顺序为：

• 您在 html 中有一个表单（您缺少表单元素）
• 用户提交表单
• javascript防止表单重新加载页面，并通过ajax将表单数据发送到服务器
• 服务器端 PHP 检查密码是否正确并以 json_encode() 格式输出响应
• ajax 函数获取响应并使用该数据提供反馈。

您的 php 将位于一个单独的文件中

doLogin.php

<?php
$loggedin = false;
if ( isset($_POST['enter']) ){
    if ($_POST['password']=='0000'){
       $loggedin = true;
    } else {
       $error="Password was incorrect";
    }
}

$response = array('isLoggedIn' => $loggedin);
if ($error) $response['error'] = $error;
echo json_encode($response);

?>

document.querySelector('#passsection form').addEventListener('submit', function(e) {
  e.preventDefault(); // stop the page from reloading
  var request = new XMLHttpRequest();
  let url = "/php/doLogin.php";
  request.open("POST", url, true);
  request.setRequestHeader("Content-Type", "application/json");
  request.onreadystatechange = function() {
    if (request.readyState === 4 && request.status === 200) {
      var jsonData = JSON.parse(request.response);
      if (jsonData.isLoggedIn) {
        document.querySelector('#passsection').style.display = "none"
      } else if (jsonData.error) {
        document.querySelector('#passsection form .error').innerHTML = jsonData.error
      }
    }
  };
  let data = JSON.stringify({
    "passfield": document.getElementById("passfield").value
    });
  request.send(data);
});

<section id="passsection">
  <div class='error'></div>
  <form method='post'>
    <input style="margin-left:-5px" id="passfield" name="password" type="password" placeholder="****">
    <input type="submit" id="password" name="enter" value="enter">
  </form>
</section>