将变量分配给 href/button

Question

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

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

例如href的变量是'A'，密码输入的变量是'B'，还有php的代码说：

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

我知道这个示例代码可能做错了，但如果有人明白我在做什么 ask/do，你能帮忙吗？如果这对您有帮助，这就是我所拥有的。

<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

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

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

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

那会重定向

Answer 2

您混淆了两种解决此问题的方法。一种是Javascript方式，利用"onclick=...."，另一种是HTML形式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 3

有几种方法可以post从一页到另一页的信息，首先是最简单的方法：

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>

login.php

<?php

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

if ( $password == $expected_password ) {

    echo "Passwords match!";

} else {

    echo "Incorrect password!";

}

这会将post表单值login.php（在表单的action属性中指定） ).您将在浏览器中被定向到 /login.php，并会看到两条消息之一 - 输入的 "password" 与预期的 "password" 匹配，或者您收到 "incorrect password" 消息。

请注意，在实际应用程序中显然不会对密码进行硬编码，这只是为了演示如何 post 从一页到另一页的信息。

使用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 );

});

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

中

将变量分配给 href/button

Assigning a variable to a href/button

html

css

php

href

button