如何使用AJAX发送数据
我的问题是如何使用JSON将表单中的数据发送到PHP页面。我尝试了多种方法，但由于某些原因，它不起作用。我相信我发送的数据是错误的，这就是为什么我不能接收PHP页面上的数据。
这是我登录页面上的代码(使用超文本标记语言和JavaScript)：
<!DOCTYPE html>
<html>
<body>
<h2>UserName and Password</h2>
<form ID = "PassUser">
Enter UserName:
<input type="text" id="username" >
Enter Password:
<input type="password" id="password">
<br><br>
<input type="submit" value = "Submit" onclick = "submit_form()">
</form>
<script>
function submit_form() {
var user = document.getElementById("username").value;
var pass = document.getElementById("password").value;
var data = {}
data.uname = user;
data.upass = pass;
alert(data.uname);
alert(data.upass);
var json_data = JSON.stringify(data);
alert(json_data);
var json_upload = "json_name=" + json_data;
var request= new XMLHttpRequest();
request.open("POST", "test-middle.php");
request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
request.send(json_upload);
};
</script>
</body>
</html>
这是php页面上的代码：
<?php
$data = $_POST["json_name"];
var_dump($data);
echo $data;
?>
var_dump的结果为空。
我需要帮助，试图找出为什么我没有收到PHP页面上的数据。如果我发送数据的方式是正确的(我不这么认为)，或者我接收数据的方式是正确的？我也尝试过json_decode()和file_get_content()，结果都是空的。我试图弄清楚这一切已经有一段时间了，这并不是很长的时间。
另外，像警报这样的额外代码行只是让我检查表单数据是否正确/完全通过了JavaScript。
此外，我还考虑了我如何完成此操作的过程:获取表单数据并将其插入到对象中。然后使用JSON.stringify(object)。然后将其发送到PHP页面。至于PHP页面，我只是想接收数据并将其回显出来，或者使用var_dump将其传出，以检查我是否收到了它。
另外，不要使用JQuery。谢谢你，谢谢
编辑1:将json_data更改为json_name。仍然输出NULL。
回答 1
Stack Overflow用户
发布于 2018-09-19 03:06:02
HTML编辑：好的，我让它工作了，在你的文件中，你需要修改
<input type="submit" value = "Submit" onclick = "submit_form()">至
<button onclick="submit_form()">Submit</button>另外，你的PHP文件试图返回一些数据，但是你的JavaScript没有被编程来接受它。
您需要添加request.onreadystatechange部件，以确保在完成请求后从request.onreadystatechange文件返回信息。正是在这个函数中，您想要为按下提交后要发生的事情构建流程。
您需要在HTML文件中创建一个元素，以便显示响应。我用id='response'创建了<div>元素。您必须使用这个新元素的ID来告诉JavaScript将来自PHP脚本的响应放在哪里。
所以我把你的HTML文件编辑成这样：
<!DOCTYPE html>
<html>
<body>
<h2>UserName and Password</h2>
<form ID = "PassUser">
Enter UserName:
<input type="text" id="username" >
Enter Password:
<input type="password" id="password">
<br><br>
<button onclick="submit_form()">Submit</button>
</form>
<div id='response'>
<!-- THIS IS THE RESPONSE -->
</div>
<script>
function submit_form() {
var request = new XMLHttpRequest();
var user = document.getElementById("username").value;
var pass = document.getElementById("password").value;
var data = {};
data.uname = user;
data.upass = pass;
alert(data.uname);
alert(data.upass);
var json_data = JSON.stringify(data);
alert(json_data);
var json_upload = "json_name=" + json_data;
request.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("response").innerHTML = this.responseText;
}
};
request.open("POST", "test-middle.php", true);
request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
request.send(json_upload);
}
</script>
</body>
</html>在此之后，只要您的PHP文件保存在相同的文件夹中，它就应该可以工作。
希望这能有所帮助！
https://stackoverflow.com/questions/52393022
复制相似问题