Question

所以我目前正在尝试完成一个学校项目，但目前仍坚持使用php，javascript，json和ajax创建登录。我知道如何使用php进行简单的登录，但我是使用javascript和ajax的新手。我们不允许使用jQuery或mySql，所以只使用php，javascript，ajax和json。感谢您的帮助。

这是我的ajax.js文件

var ajaxRequest = new XMLHttpRequest();

function init(){
    var button = document.getElementById('button');
    button.addEventListener("click", sendRequest, false);
}

function sendRequest(){
    ajaxRequest.onreadystatechange = getRequest;

    var user = input.value['username'];

    ajaxRequest.open("POST", "loggIn.php", true);
    ajaxRequest.send(user);
}

function getRequest(){
    if (ajaxRequest.readyState==4 && ajaxRequest.status==200){

        var jsonObj = JSON.parse(ajaxRequest.responseText);

        if(jsonObj !== 'undefined'){
            window.location.replace('privat.php');
        }
    }
}

window.addEventListener("load",init,false);

所以我对此有一些疑问，使用

是否有效

var user = input.value['username'];

还是有另一种方法可以从用户输入的形式“用户名”中获取值吗？

另外，这个功能：

function getRequest(){
    if (ajaxRequest.readyState==4 && ajaxRequest.status==200){

        var jsonObj = JSON.parse(ajaxRequest.responseText);

        if(jsonObj !== 'undefined'){
            window.location.replace('privat.php');
        }
    }
}

从loggIn.php文件获取响应并且用户输入正确后我希望它重定向到“privat.php”，但不太确定如何。

以下是我的其余代码： privat.php

<a href="loggOut.php">Logga ut</a>

<br>
<?php
echo "user:" . $_SESSION['user'];
?>

loggIn.php

<?php
    session_start();

    if(isset($_POST['username'])){
        $_SESSION['user'] = $_POST['username'];

        echo json_encode($_SESSION['user']);
    }

?>
<!DOCTYPE html>
<html lang="sv">

<head>
    <meta charset="utf-8" >
    <title>Sessioner</title>
    <script type="text/javascript" src="ajax.js"></script>
</head>

<body>
<form method="post">
    Username: <input type="text" name="username" size="20" /><br />
    Password: <input type="password" name="password" size="20" /><br />
    <input type="submit" id="button" value="Logga in" name="login"/>
</form>
</body>
</html>

loggOut.php

<?php
session_start();

$_SESSION = array();
session_destroy();

header("Location: loggIn.php");
?>

Answer 1

var user = input.value['username'];肯定无效。您需要使用以下之一：

var user = document.forms[0].elements['username'].value;    
var user = document.querySelector('form').elements['username'].value;
var user = document.querySelector('[name="username"]').value;

如果你还没有学过CSS选择器，我会说第一个选择。

Answer 2

var user = input.value['username'];

以上陈述是错误的。

您可以使用以下方式获取表单元素：

var username = document.forms["loginform"]["username"].value;

为表单命名，您可以获取输入字符串。

使用php，javascript和ajax进行简单登录

2 个答案: