Question

我正努力做到最清楚。

基本上，我只需要在HTML页面中使用JavaScript登录。这是因为我只能使用html页面。我有一个像下面这样的html表单：

<form id="privateform" method="post" action="post.php"><label>insert password</label>
   <input type="password" id="password" name="password">
   <input type="submit" value="Login">
</form>

我需要如果（密码提交===密码从PHP数据库读取）用户被重定向到HTML页面上的下一页。我怎样才能做到这一点？因为我的结果是我的html页面想要将PHP结果保存为JSON文件..

Answer 1

为此你应该使用ajax，我正在使用jquery库来实现这个

<form onsubmit="false" id="login_form">
            <div class="login_box" id="login" method="post">
                <legend>LOGIN</legend>
                    <p id="alert"></p>
                    <input type="text" name="username" class="username" id="username" placeholder="USERNAME" required>

                    <input type="password" name="password" class="password" id="password" placeholder="PASSWORD" required>
                    <br>
                    <button type="button" name="login" id="login" class="login" onclick="proceed_login();"> Login </button>
                   <a href="fgotpassword"><input type="button" value="Forgot password ?" id="fp" class="fp"></a>
            </div>
               </form>

将上述代码放在html页面上

然后js代码是

<script>
function proceed_login() {
    var username=document.getElementById('username').value;
    var password=document.getElementById('password').value;
    var alert=document.getElementById('alert');
    alert.innerHTML="processing...";
    if( !username || !password ){

        $("#login_form").effect( "shake", {times:2}, 200 );
       alert.innerHTML="please enter username and password";
       document.getElementById('login_form').reset();

    }else{
       $.post("http://yourloginurl",
          {
            username: username,
            password: password
          },
      function(data){  \\ getting the response and  parsing and validating it
         if (data=="ok") {  \\ on success response
            window.location="../dashboard";
         }else{ \\ on invalid credentials 
        alert.innerHTML="invalid username or password";

         }
      });
    }
}
</script>

登录URL中的

你应该提供对请求的响应在我的情况下，回复是"ok"
js代码处理响应并进行进一步处理

后端的PHP代码是

if(isset($_POST['username']) && isset($_POST['password']) ){

if(checkdatabase($_POST['username'],$_POST['password'])){ \\ function to check values against database 
   \\start the session and set user
  echo "ok";
}else{
 echo  "false";
}

}else{
echo "false";
}


public function checkdatabase($username, $password){

if exists in database 
return true;
else
return false;
}

在checkdatabase函数中编写ur数据库逻辑

Answer 2

首先使用HTML5表单，如下例所示

<form id="my-form" method="post" action="">
    <label for="username">username</label>
    <input type="text" name="username" id="username" value="" placeholder="username" required>
    <label for"password">password</label>
    <input type="password" name="password" id="password" value="" placeholder="password" required>
    <button type="submit">send me</button>
</form>

正如您所看到的，输入元素现在具有必需属性。现在没有用户可以使用空输入元素提交表单。因此，您不必处理javascript来验证表单。标签元素确实具有for属性，该属性适合属于所有输入元素的id属性。

接下来，您可以在表单元素上设置javascript事件侦听器。

<script>
    var form = document.getElementById('my-form'),
        password = document.getElementById('password');

    form.addEventListener('submit', function(event) {
        event.preventDefault();

        var data = new FormData(form);

        var xhr = new XMLHttpRequest();
        xhr.open('POST', 'https://your.domain.tld/check-password.php');
        xhr.onload = function() {
            if (xhr.status === 200) {
                // if the response is json encoded
                var response = JSON.parse(xhr.responseText);

                if (response.message == 'valid') {
                    // redirect here
                }

                if (response.message == 'invalid') {
                    password.setCustomValidity('your password is not correct');
                }
            }
        }
        xhr.send(data); 
    });
</script>

这一小段javascript代码在表单元素上设置了一个提交事件监听器。一旦表单成功提交，就会触发ajax请求，该请求将表单数据'username'和'password'发送到'check-password.php'文件。

在您的php文件中，您可以访问如下所示的数据：

<?php
    $username = $_POST['username'];
    $password = $_POST['password'];
?>

正如您所看到的，您不需要jQuery或任何其他javascript框架来执行此操作。请记住，代码示例是示例并且未经测试。

Answer 3

答案是＆＃34; Ajax ＆＃34;。

您可以找到官方文档here。

Javascript表单，将值发送到PHP并检索它

3 个答案: