如何在 Javascript 中接收 PHP 响应

Question

在过去的一天里，我一直坚持这一点，感觉就像我错过了什么。

我的任务是：
创建一个 php 文件 register.php，允许用户输入他们的姓名、姓氏、用户名和电子邮件（通过 HTML 表单），然后对这些数据进行一些服务器端验证。
该文件还可以用作 html 表单，用户可以在其中输入数据。对于用户名输入字段，我必须在每次击键时检查我的数据库中是否已存在具有该用户名的用户。

这必须使用 Javascript 通过使用 Ajax 向 register.php 发送请求来完成。

我知道如何运行必要的查询来根据某个用户名搜索我的数据库。那部分不是问题。

我无法上班的是

• 使用 Javascript/Ajax 向 register.php 发送请求

• 让 register.php 根据输入的用户名运行查询，因为我不知道如何接收请求

• 获取 register.php 以“返回”响应而不将其写入 DOM

到目前为止我已经尝试过：

let username= document.getElementById('username');

username.addEventListener('input', validateUsername);

function validateUsername(){

    var xhttp = new XMLHttpRequest();

    xhttp.onreadystatechange = function() {

        if (this.readyState == 4 && this.status == 200) {

            // Typical action to be performed when the document is ready:

            console.log(xhttp.responseText);

        }

    };

    xhttp.open("POST", "../obrasci/registracija.php", true);

    xhttp.send("username="+username.value);

}

这部分有效，我正在取回整个 HTML 文档。我知道是因为整个结构都被打印到控制台中了。

现在这是我无法开始工作的部分。到目前为止，在 PHP 中我已经知道了，但我无法让脚本对用户名执行任何操作。

if( isset($_POST['username'])  ){

    json_encode($_POST['username']);

}

编辑：我忘了补充一点，该站点需要动态处理使用 ajax 发送的数据（如果该用户名已被占用，则将输入标记为无效，直到用户选择未被占用的用户名为止）。

这可能是我使用它的方式的问题，因为 PHP 中的 if 仅在第一次加载时进行测试？

任何帮助表示赞赏。

Answer 1

首先，您可以检查请求是否作为 POST 请求发送（在浏览器中打开 register.php 将是 GET 请求）。您可以通过这样的方式包装您的表单处理if ($_SERVER['REQUEST_METHOD'] === 'POST') {  // check if username exists  if (isset($_POST['username'])) {    echo 'username: ' . $_POST['username'];    die;  } else {    echo 'no username';    die;  }}相应地更改代码，用于echo json_encode($data)以 JSON 格式返回数据。在您的请求中，您可能需要添加正确的标头来告诉 PHP 如何解释随请求一起发送的正文。function validateUsername(){    var xhttp = new XMLHttpRequest();    xhttp.onreadystatechange = function() {        if (this.readyState == 4 && this.status == 200) {            // Typical action to be performed when the document is ready:            console.log(xhttp.responseText);        }    };    // add this line     xhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");    xhttp.open("POST", "../obrasci/registracija.php", true);    xhttp.send("username="+username.value);}另外，请确保您的命名正确。在你的代码示例中，你将你的输入称为变量username，但是你将事件侦听器添加到kor_ime，我不知道你是否将某些内容更新为英语并忘记了它的其他部分以解决这个问题或者这是否是你的实际代码let username= document.getElementById('username');username.addEventListener('input', validateUsername); // here change kor_ime to username and update the function name, you can omit the extra function wrapper