Question

首先，这是我的代码：

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（“formdata-fields-control-test.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发送的内容。它有意义吗？

Answer 1

单击提交按钮并在表单上触发提交事件。

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

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

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

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

Answer 2

试试这个：

1）在formdata-fields-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>

我认为问题在于表格中有一个动作和一个onsubmit功能。

无法从XMLHttpRequest的“POST”中收到PHP中的内容

2 个答案: