Question

我的问题/问题是关于如何使用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。

Answer 1

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

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

到

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

此外，您的PHP文件正在尝试返回一些数据，但您的JavaScript尚未编程为接受该数据。

您需要添加request.onreadystatechange部分，以确保在完成请求后从PHP文件返回信息。在此功能内，您希望为按下提交后要发生的事情建立流程。

您需要在HTML文件中创建一个元素，以显示响应。我使用<div>创建了id='response'元素。您必须使用该新元素的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文件保存在同一文件夹中，它就可以正常工作。

希望这会有所帮助！

如何使用AJAX发送数据

1 个答案: