如何在 Javascript 中接收 PHP 响应

Question

过去一天我一直被困在这个上面，感觉我错过了什么。

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

这必须使用Javascript通过发送注册请求来实现.php Ajax。

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

我无法上班的是

• 使用 Javascript/Ajax 发送注册请求.php
• 获取注册.php根据输入的用户名运行查询，因为我不知道如何接收请求
• 获取寄存器.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 请求发送(打开寄存器.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