时间戳

首页 > 解决方案 > 如何使用 AJAX 发送数据

javascript - 如何使用 AJAX 发送数据

问题描述

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

标签： javascriptphphtmljsonforms

解决方案

编辑： 好的，我让它工作了，在你的 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 文件保存在同一个文件夹中，它就可以工作。

希望这可以帮助！

推荐阅读