javascript - PHP，使用 AJAX 将数据从 javascript 发送到 PHP

Question

还是没有解决。有人可以帮助我更新新代码吗？新代码位于本文底部。

我正在学习 PHP，现在我正在尝试学习使用 AJAX 将数据从 JS 传递到 PHP。

这是我的表格:

<form id="login">
            <label><b>Username</b></label>
            <input type="text" name="username" id="username"
                   required>
            <label><b>Password</b></label>
            <input type="password" name="password" id="password"
                   required>
            <button type="button" id="submitLogin">Login</button>
        </form>

首先我有一个函数，像这样:

try {
    if (window.XMLHttpRequest) {
        request = new XMLHttpRequest();
    }else{
      Do stuff }
    }
 catch(error){ alert('"XMLHttpRequest failed!' + error.message); }

在此之后，我尝试使用 new FormData() 将我的表单数据发送到 php 文件，但我不太确定如何执行此操作。现在我有这样的代码:

if (getElementById('username').value != "" & getElementById('password').value != "") {
    request.addEventListener('readystatechange', Login, false);
    request.open('GET', 'login.php', true);
    request.send(new FormData(getElementById('login')));
}

登录函数是一个测试函数

if (request.readyState === XMLHttpRequest.DONE && request.status === 200) {

在我的 PHP 文件中，我现在有一个看起来像这样的函数:

session_start();
$logins = array('username1' => 'password1','username2' => 'password2');

if(isset($_GET['login'])) {
$Username = isset($_GET['username']) ? $_GET['username'] : '';
$Password = isset($_GET['password']) ? $_GET['password'] : '';

if (isset($logins[$Username]) && $logins[$Username] == $Password){
do stuff
}

我还需要将我的表单数据从 js 文件传递​​到 php 文件，这样我才能检查输入数据是否与数组中的数据相同？

-------------------------------------------- --------------------------

新代码:

function LoginToSite() {
if (getElementById('username').value != "" && getElementById('password').value != "") {
    request.addEventListener('readystatechange', Login, false);

    var username = encodeURIComponent(document.getElementById("username").value);
    var password = encodeURIComponent(document.getElementById("password").value);


    request.open('GET', 'login.php?username='+username+"&password="+password, true);
    request.send(null);
}

function Login() {
if (request.readyState === 4 && request.status === 200) {
    alert("READY");
    var myResponse = JSON.parse(this.responseText);
    getElementById("count").innerHTML = myResponse;
    getElementById('login').style.display = "none";
    if(request.responseText == 1){
        alert("Login is successfull");
    }
    else if(request.responseText == 0){
        alert("Invalid Username or Password");
    }
}
else{
    alert("Error :Something went wrong");
}
request.send();

session_start();
$username = $_REQUEST['username'];
$password = $_REQUEST['password'];
 if($username != '' and $password != ''){

foreach($user_array as $key=>$value){
    if(($key == $username) && ($value == $password)){
        echo "1";
    }else{
        echo "0";
    }
}

}else{
echo "0";
}

当我尝试登录时，网站首先警告出现问题，然后再次发生同样的事情，之后，它警告“准备就绪”。我必须更改什么才能正确执行此操作？

Answer 1

尝试运行以下代码。

HTML:

<form id="login">
        <label><b>Username</b></label>
        <input type="text" name="username" id="username"
               required>
        <label><b>Password</b></label>
        <input type="password" name="password" id="password"
               required>
        <button type="button" id="submitLogin">Login</button>
    </form> 

JavaScript:

function submitLogin{
var username = document.getElementById("username").value;
    var password = document.getElementById("password").value;
    var http = new XMLHttpRequest();
    var url = "login.php";
    var params = "username="+username+"&password="+password;
    http.open("POST", url, true);

    //Send the proper header information along with the request
    http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

    http.onreadystatechange = function() {//Call a function when the state changes.
        if(http.readyState == 4 && http.status == 200) {
            if(http.responseText == 1){
            alert("Login is successfull");
            }
            else{
            alert("Invalid Username or Password");
            }
        }
        else{
        alert("Error :Something went wrong");
        }
    }
    http.send(params);
}

PHP:

<?php
session_start();
$logins = array('username1' => 'password1','username2' => 'password2');
if(isset($_POST['username']) && isset($_POST['password'])){
$username = trim($_POST['username']);
$password = trim($_POST['password']);
foreach($logins as $key=>$value){
if(($key == $username) && ($value == $password)){
echo "1";
}else{
echo "0";
}
}

}else{
echo "0";
}

?>

希望对你有帮助