Unable to receive something in PHP from XMLHttpRequest's

Unable to receive something in PHP from XMLHttpRequest's "POST"

本文关键字：XMLHttpRequest from PHP to receive something in Unable      更新时间：2023-09-26

首先，这里是我的代码：

HTML（"formdata index test.HTML"）：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Test page</title>
</head>
<body>   
<form id="the-form" method="post" action="formdata-validation-test.php">
    <input type="text" id="the-text">
    <input type="submit" value="Upload">
</form>
<script src="formdata-fields-control-test.js" type="text/javascript"></script>
</body>
</html>

JS（"表单数据字段控制测试.JS"）:

var form = document.getElementById("the-form");
form.onsubmit = function() {
var q = document.getElementById("the-text").value;
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
    if ((xhr.readyState == 4) && (xhr.status == 200)) {
        alert(xhr.responseText);
    }
}
xhr.open("POST", "formdata-validation-test.php", false);
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xhr.send("q="+q);
}

PHP（"formdata validation test.PHP"）：

<?php
$example = $_POST['q'];
echo $example;
if (empty($example)) {
        echo "Empty";
}
?>

现在，一开始，我没有得到任何响应，但经过几次尝试和代码更改，我能够在JS文件中收到警报。奇怪的是，即使收到警报，当表单提交后加载PHP页面时，我仍然会收到"空"的回声。有人知道为什么会这样吗？我的最终目标只是将文本从HTML文件发送到PHP文件，然后发送到数据库（也就是说，"responseText"并不是真正必要的，它在这里只是为了测试目的），但显然，PHP并没有真正接收JS发送的内容，而JS接收PHP发送的内容。这有意义吗？

点击提交按钮，表单上会触发提交事件。

JavaScript正在运行。它向PHP脚本发出HTTP请求，其中包含数据。由于您已强制它为同步请求（不要这样做，它会锁定事件循环），浏览器将等待响应后再继续。JS随后处理响应，并向值发出警报。

然后提交表格。它没有name="q"控件，因此对于PHP脚本的第二个请求，empty($example)将始终为true。

如果要停止提交表单，请对事件对象调用preventDefault。

form.onsubmit = function(event) {
    event.preventDefault();

试试这个：

1）在formdatafields-control-test.js中，将脚本作为一个函数：

function testFunction() {
var q = document.getElementById("the-text").value;
var params = "q="+q;
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if ((xhr.readyState == 4) && (xhr.status == 200)) {
    alert(xhr.responseText);
}
}
xhr.open("POST", "formdata-validation-test.php", false);
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xhr.send(params);
};

2）在formdata-index-test.html中，将action设置为空，并调用javascript函数onsubmit:

<form id="the-form" onsubmit="return testFunction()"  method="post"    action=""> 
<input type="text" id="the-text">
<input type="submit" value="Upload">
</form>

我认为问题在于表单同时具有操作和提交功能。

相关文章：