从JavaScript接收数据到PHP

Question

以下是范例，希望可以帮助其他人学习！

我正在使用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";
?>

现在我只想将用户名输出到控制台，我知道语法很简单，但我确实不知道是什么。

---

以下是由评论区的SuperKevin提供的可行代码。该代码将通过JS获取HTML中用户名和密码字段中的字符串，并将其发送到PHP，然后再发送回JS以输出到浏览器控制台窗口。

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>

script.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'];
?>

- MKUltra

---

搜索如何使用ajax传递查询参数或提交参数。 - Roland Starke

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>

这是我们的服务器脚本。 delete.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 PHP-AJAX教程。

- Kevin Pimentel

---

谢谢！我之前使用send()函数发送数据时出现了错误，后来发现这与我在php端使用的CURL类似，数据是通过URL发送的！我已经更新了上面的代码以显示可工作的代码。 - MKUltra

Answer 2

你可以通过以下方式查看发送到你的 PHP 的所有数据：

<?php
   print_r($_GET); //if it's send via the method GET
   print_r($_POST); //if it's send via the method POST
?>

所以，在你的情况下，它会是这样的：

<?php
  echo $_GET['username'];
?>

- Nico_

Answer 3

如果您没有使用jQuery，请不要关注我的答案，坚持使用纯JavaScript的解决方案。

使用jQuery，您可以像这样做：

第一页：

$.ajax({
      url: 'sportsComparison.php',
      type: 'post',
      dataType: 'html',
      data: {
         BaseballNumber = 42,
         SoccerNumber = 10
      },
      success: function(data) {
        console.log(data);
      });

这将发送值42和10到sportsComparison.php，变量名为BaseballNumber和SoccerNumber。在PHP页面上，它们可以使用POST（或GET如果最初是这样发送的）进行检索，执行一些计算，然后发送回来。

sportsComparison.php:

<?php
$BaseballValue = $_POST["BaseballNumber"];
$SoccerValue =  $_POST["SoccerNumber"];

$TotalValue = $BaseballValue * $SoccerValue;

print "<span class='TotalValue'>".$TotalValue."</span>";

?>

这将返回一个带有 TotalValue 类和值为 420 的 span 标签，并将其打印在控制台中。

使用 jQuery 进行 ajax 的简单方法。不要忘记在参数列表中加逗号。

- blackandorangecat