如何使用 AJAX 发送数据答案

【问题标题】：How to send data using AJAX如何使用 AJAX 发送数据
【发布时间】：2018-09-18 19:00:00
【问题描述】：

我的问题/问题是关于如何使用 JSON 将数据从表单发送到 PHP 页面。我尝试了多种方法，但由于某种原因，它不起作用。我相信我发送的数据不正确，这就是我无法在 PHP 页面上接收数据的原因。

这是我登录页面上的代码（使用 HTML 和 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 的结果为 NULL。

我需要帮助来尝试找出我没有在 PHP 页面上接收数据的原因。如果我发送数据的方式是正确的（不认为是）或者我接收数据的方式是正确的？我也试过json_decode() 和file_get_content() 都导致NULL。一段时间以来，我一直试图弄清楚这一切，但没想到这么久。

另外，像警报这样的额外代码行仅供我检查表单数据是否正确/完全通过 JavaScript。

另外，想想我是如何做到这一点的过程：获取表单数据并将其插入到对象中。然后使用 JSON.stringify(object)。然后将其发送到 PHP 页面。至于 PHP 页面，我只是想接收数据并将其回显或 var_dump 输出只是为了检查我是否收到它。

另外，不使用 JQuery。谢谢你，吨谢谢

编辑 1：将 json_data 更改为 json_name。仍然输出 NULL。

【问题讨论】：

尝试只发送 var 数据。不要认为您需要对其进行字符串化。之后在 $_POST['uname'] 中找到 uname 和 uppass。
在这种情况下 json_upload = {json_name: json_data};
使用均值将request.send(json_upload)更改为request.send(data)，然后在php页面中将$_POST['json_name']更改为$_POST['uname']。如果这就是你的意思，我试过了，在 var_dump 之后仍然得到 NULL。
@AdamMoffat 我正在检查 PHP 页面，看看 json 是否与密码和用户名一起发送。
Welp 我浪费了这么多时间试图做一些它做不到的事情。感谢您的帮助

标签： javascript php html json forms

【解决方案1】：

编辑： 好的，我搞定了，在您的 HTML 文件中，您需要更改

<input type="submit" value = "Submit" onclick = "submit_form()">

到

<button onclick="submit_form()">Submit</button>

另外，你的 PHP 文件正试图返回一些数据，但你的 JavaScript 还没有被编程来接受它..

您需要添加request.onreadystatechange 部分以确保在完成请求后从PHP 文件返回信息。正是在这个函数中，您想要为按下提交后想要发生的事情构建流程。

您需要在 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 文件保存在同一个文件夹中，它就可以工作。

希望这会有所帮助！

【讨论】：

谢谢我在我的代码中更改了它，但在 var_dump 之后仍然会导致 NULL 的输出。
再次检查此答案并告诉我
我尝试添加你所说的，但它仍然导致 NULL。如果我使用 Firefox 和 chrome 有关系吗？我认为不应该，但可能是个问题。