提问人：user14552956 提问时间：2/19/2023 最后编辑：user14552956 更新时间：2/20/2023 访问量：849
我使用 fetch api 方法将 javascript 变量传递给 php，但在 php 文件中我收到错误：未定义的数组键“数据”。如何解决？
I am passing javascript variable to php using fetch api method post but in php file i am getting error: undefined array key 'data'. How to fix it?
问：
------html 代码------
<html>
<body>
<textarea id="my-textarea"> </textarea>
<button onclick="_post_text_area_()" id="submit-btn">Submit</button>
</body>
<html>
------JavaScript 代码------
# get value of textarea
var textarea = document.getElementById("my-textarea");
function _post_text_area_() {
var data = textarea.value;
# show textarea value to console
console.log(data);
# pass data variable using fetch api POST method
fetch('_process.php', {
method: 'POST',
body: 'data=' + data
})
.then(function (response) {
return response.text();
})
.then(function (data) {
console.log(data);
});
}
--- _process.php ---
<?php
$data = $_POST['data'];
echo "Received data: " . $data;
?>
我在_process.php文件中收到错误：未定义的数组键“数据”。我想，我收到这个错误是因为我的 javascript 函数无法创建发布请求，但我不知道我收到此错误的确切原因。
我尝试了不同的技术，如ajax XmlHttpRequest将数据变量传递给_process.php文件，但我遇到了同样的错误。
var textarea = document.getElementById("my-textarea");
var submitBtn = document.getElementById("submit-btn");
submitBtn.addEventListener("click", function() {
var data = textarea.value;
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
console.log(this.responseText); // Print the response from the server
}
};
xmlhttp.open("POST", "process.php", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send("data=" + data);
});
答：
0赞
Professor Abronsius
2/20/2023
#1
在创建要发送的有效负载时，通常首选使用它 - 以下确实会发送 AJAX 请求，但由于沙盒限制而失败。FormDatafetch
const d=document;
d.addEventListener('click',e=>{
if( e.target instanceof HTMLButtonElement && e.target.id=='submit-btn' ){
let fd=new FormData();
fd.set('data', d.getElementById("my-textarea").value );
fetch('_process.php', {method:'post',body:fd })
.then(r=>r.text())
.then(console.log)
.catch(alert)
}
});<textarea id="my-textarea"></textarea>
<button id="submit-btn">Submit</button>
0赞
asiby
2/20/2023
#2
最初发布的相同代码仅适用于您适当地设置内容类型。因此，该变量留空。$_POST
您可以将命令更改为以下版本：fetch
fetch('_process.php', {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
body: 'data=' + data
})
.then(...)
...
或者，您可以在命令中使用内容类型：application/jsonfetch
fetch('_process.php', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: 'data=' + data
})
.then(...)
...
...在 PHP 中，您不依赖于对象，而是执行以下操作：$_POST
<?php
$postedData = json_decode(file_get_contents('php://input'), true);
$data = $postedData['data'];
echo "Received data: " . $data;
评论
document.getElementById("my-textarea")没有元素.你有没有看到它包含什么？您是否使用浏览器的 DevTools/Network 选项卡来查看发送/返回的内容？idconsole.logdata