将变量分配给 href/button

Question

我正在尝试为学校项目的网站制作登录表单。

输入某个用户名和密码后，它可以进入下一页，我遇到问题的部分是弄清楚我是否可以将变量分配给href 或button。

例如，href 的变量为“A”，密码输入的变量为“B”，并且有一个 php 代码说：

If (B == ('Qwerty')) then
  A == 'google.com';
else
 echo ('Wrong password')

我知道这个示例代码可能做错了，但如果有人理解我想要问/做什么，你能帮忙吗？ 如果这有帮助，这就是我所拥有的。

<div class="col-md-4  form-group" data-for="password">
        <label for="password-form1-2" class="form-control-label mbr-fonts-style display-7">Password</label>
        <input type="password" name="email" data-form-field="password" required="required" class="form-control display-7" id="password-form1-2" placeholder="qwerty">
</div>                       
      <div class="col-md-12 input-group-btn align-center">
         <button type="submit" class="btn btn-primary btn-form display-4" onclick="window.location.href = '2after login.php';">Log in</button>
      </div>

Answer 1

您混淆了解决此问题的两种方法。一种是Javascript方式，它利用“onclick=....”，另一种是HTML Form post方法。为此，您需要在表单中输入您的输入。无论如何，您将需要学习 Javascript。所以这里是一个完美的起点。

<div class="col-md-4  form-group" data-for="password">
        <label for="password-form1-2" class="form-control-label mbr-fonts-style display-7">Password</label>
        <input type="password" name="email" data-form-field="password" required="required" class="form-control display-7" id="password-form1-2" placeholder="qwerty">
</div>                       
<div class="col-md-12 input-group-btn align-center">
        <button type="submit" class="btn btn-primary btn-form display-4" onclick="validateEntry()">Log in</button>
        <a id="result"></a>
</div>



<script>    
function validateEntry(){
  var password = encodeURIComponent(document.getElementById("password-form1-2").value);
  if (!password || 0 === password.length){
     document.getElementById("result").innerHTML = 'Nothing entered.  Please, enter a password';
  }else{
    login(password);
  }
}

function login(password) {
  var fail = true;
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      var fail = false;
      if (this.responseText == "Updated"){
          window.location.href = "wizard17.php";
      }else{
          document.getElementById("result").innerHTML = this.responseText;
      }  

    }else{
      window.setTimeout(failed(fail), 5000);
    }
  };
  xhttp.open("POST", "login.php", true);
  xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  xhttp.send("password="+password);
}

function failed(fail){
      if(fail){
          document.getElementById("result").innerHTML = 'Connection Failed.';
      }
}

</script>

简单的表单post方法（如下）不具备同种响应能力：

<div class="col-md-4  form-group" data-for="password">
        <form action="login.php" method="post">
        <label for="password" class="form-control-label mbr-fonts-style display-7">Password</label>
        <input type="password" name="password" data-form-field="password" required="required" class="form-control display-7" id="password" placeholder="qwerty">
        <button type="submit" class="btn btn-primary btn-form display-4">Log in</button>  <!--notice that onclick is not used here -->
        </form>
</div>  

Answer 2

有几种方法可以将信息从一个页面发布到另一个页面，首先是最简单的方法：

index.html

<form action="login.php" method="post">

  <input type="text" name="username" placeholder="enter your username" required><br>
  <input type="password" name="password" placeholder="enter your password" required><br>
  <input type="submit" value="Login">

</form>

登录.php

<?php

$username = $_POST[ "username" ];
$password = $_POST[ "password" ];
$expected_password = "password123";

if ( $password == $expected_password ) {

    echo "Passwords match!";

} else {

    echo "Incorrect password!";

}

这会将表单值发布到 login.php（在表单的 action 属性中指定）。您将被引导至浏览器中的/login.php，并会看到两条消息之一 - 输入的“密码”与预期的“密码”匹配，或者您收到“密码错误”消息。

请注意，密码显然不会在实际应用程序中硬编码，这只是为了演示如何将信息从一个页面发布到另一个页面。

---

使用AJAX:

index.html

<form action="login.php" method="post" id="my-form">

  <input type="text" name="username" placeholder="enter your username" required><br>
  <input type="password" name="password" placeholder="enter your password" required><br>
  <input type="submit" value="Login">

</form>

<div id="output"></div>

<script src="form.js"></script>

form.js

let form = document.querySelector( "#my-form" );
let output = document.querySelector( "#output" );

form.addEventListener( "submit", function( e ) {

  e.preventDefault();

  let formData = new FormData( form );
  let xhr = new XMLHttpRequest();

  xhr.onreadystatechange = function() {

    if ( this.readyState == 4 && this.status == 200 ) {

      output.innerHTML = this.responseText;

    }

  }

  xhr.open( "post", "login.php" );
  xhr.send( formData );

});

这会将表单的值发布到login.php 并将信息发回，而无需重新加载页面或导航离开。来自上述login.php 的响应将显示在输出<div> 中。

Answer 3

您应该做的是在检查凭据后重定向到您的登录 php 文件。

您必须进行匹配才能知道网址，然后在最后插入：

header('Location: '. $url);
exit;

这会重定向