javascript - 从 JavaScript 接收数据到 PHP

Question

Working example below, hopefully this will help others learn!

我在 javascript 中使用 AJAX 将 JSON 字符串发送到 PHP。

我不熟悉 AJAX、javascript 或 php，所以我花了一些时间才开始。

我有一个带有用户名字段、密码字段和登录按钮的 html 文件。

然后我有一个 javascript 文件，它接受用户名传递并将其发送到一个 php 文件。

我知道正在访问 php 文件，因为我在控制台中看到了测试回显。

我只是不知道如何访问我发送到 php 的数据。

脚本。

function attemptLogin(){

var inputUserName = JSON.stringify(document.getElementById("userName").value);


var ajaxData = new XMLHttpRequest();
ajaxData.open('GET', 'ajax.php', true);
ajaxData.onreadystatechange = function(){

    var DONE = 4;
    var OK = 200;

    if (ajaxData.readyState === DONE) {
        if (ajaxData.status === OK) {
            console.log(ajaxData.responseText);
        }else{
            console.log("ERROR : " + ajaxData.status);
        }
    }
};
ajaxData.send(inputUserName);
}

ajax.php

<?php
    echo"TestInPHP";
?>

现在我想做的就是将用户名回显到控制台，我确信语法很简单，我只是不知道它是什么。

---

Here is an edit for the working code thanks to SuperKevin in the comments below. This code will take the string in the username and password fields in HTML by the JS, send it to PHP and then sent back to the JS to output to the browser console window.

index.html

<input type="text" name="userID" id="userName" placeholder="UserID">
<input type="password" name="password" id = passW placeholder="Password">
<button type="button" id = "button" onclick="attemptLogin()">Click to Login</button>

脚本.js

function attemptLogin(){

var inputUserName = 
JSON.stringify(document.getElementById("userName").value);
// console.log(inputUserName);
var inputPassword = JSON.stringify(document.getElementById("passW").value);

var cURL = 'ajax.php?fname='+inputUserName+'&pass='+inputPassword;


var ajaxData = new XMLHttpRequest();
ajaxData.open('GET', cURL, true);
ajaxData.onreadystatechange = function(){

    var DONE = 4;
    var OK = 200;

    if (ajaxData.readyState === DONE) {
        if (ajaxData.status === OK) {
            console.log(ajaxData.responseText);
        }else{
            console.log("ERROR : " + ajaxData.status);
        }
    }
};
ajaxData.send();
}

ajax.php

<?php
  echo $_GET['fname']; 
  echo $_GET['pass'];
?>

Answer 1

这是一个简单的示例，说明如何进行普通调用。

这是我们的主文件，称之为index.php。

<script>

    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            document.getElementById("demo").innerHTML = this.responseText;
        }
    };
    xhttp.open("GET", "delete.php", true);
    xhttp.send();

</script>

这是我们的服务器脚本。 删除.php

<?php

echo "HELLO THERE"; 

现在，如果您想将数据传递给您的脚本，您可以执行以下操作:

xhttp.open("GET", "delete.php?fname=Henry&lname=Ford", true);
xhttp.send();

要访问此数据，您可以在 php 中使用全局 $_GET 数组。看起来像这样:

$fname = $_GET['fname']; 
$lname = $_GET['lname'];

显然，您必须清理数据，但这就是它的要点。

要获得更深入的教程，请访问 W3Schools Tutorial PHP - AJAX .