Question

下面的工作示例，希望这有助于其他人学习！

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

我不熟悉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中的密码字段由JS发送，然后发送回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'];
?>

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 Tutorial PHP - AJAX。

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

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>";

?>

这将返回span标记，其类别为TotalValue，值为420，并在控制台中打印。

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

从JavaScript接收数据到PHP

3 个答案: