使用 Ajax 发送 Javascript 对象时未定义的数据答案

【问题标题】：Undefined data when sending Javascript Object with Ajax使用 Ajax 发送 Javascript 对象时未定义的数据
【发布时间】：2019-05-16 17:52:18
【问题描述】：

假设我正在尝试向 PHP 发送数据并使用纯 Javascript 接收它。

因此，当我使用 Ajax 发送字符串 "login="+1+"&username="+username+"&password="+password; 时，一切正常，但对象呢？在这种情况下，我的 PHP 代码总是告诉 username 和 password 是未定义的索引。

HTML 文档：

<body>
<form id="loginform">
    <input type="text" placeholder="username"  id="username" required autocomplete="off"><br>
    <input type="password" placeholder="password" id="password" required><br>
    <input type="submit" id="submit">
</form>

<script>
        document.getElementById("loginform").addEventListener("submit", function(e) {
            e.preventDefault();

            var username = document.getElementById("username").value;
            var password = document.getElementById("password").value;

            var data = {// ---- there is my Object -----
                login: 1,
                username: username,
                password: password
            }

            var xhr = new XMLHttpRequest();
            xhr.open("POST", "process.php", true);

            xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');

            xhr.onload = function() {
                console.log(this.responseText);
            }

            xhr.send(data);
        });
</script>
</body>

PHP 文档：

<?php
    if(isset($_POST["login"])) {
        $username = $_POST['username'];
        $password = $_POST['password'];
        echo($username . " , " . $password);
    }
?>

【问题讨论】：

标签： javascript php ajax javascript-objects

【解决方案1】：

对象呢？

send() 不希望传递一个普通对象，因此它通过调用其 toString() 方法对其进行转换，该方法为您提供 "[object Object]"，这（显然）不是 URL 编码数据。

不仅PHP不理解，而且你要发送的数据一开始也不包含在其中。

如果你有一个对象，你需要把它转换成你可以在服务器上解码的格式。

继续使用表单编码数据是最简单的方法。

var data = {
  login: 1,
  username: "example",
  password: "example"
};

var key_value_pairs = [];

Object.keys(data).forEach(function(key) {
  key_value_pairs.push(
    encodeURIComponent(key) + "=" + encodeURIComponent(data[key])
  );
})

var url_encoded_string = key_value_pairs.join("&");

console.log(url_encoded_string);

您也可以使用不同的格式发送数据。 PHP 理解可以使用 FormData 对象生成的多部分 MIME 编码。

var form_data = new FormData(document.getElementById("loginform"));
form_data.append("login", "1");
xhr.send(form_data);

如果您这样做，不要使用以下内容覆盖 Content-Type：

xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');

XMLHttpRequest 将使用来自 FormData 对象的多部分 MIME 边界参数生成正确的内容类型。

您还可以使用不同的数据格式对数据进行编码，例如 JSON：

xhr.setRequestHeader('Content-type', 'application/json');
xhr.send(JSON.stringify(data));

…但是，这是一个很大的问题，PHP 不知道如何解码 JSON 格式的请求，并且不会自动填充 $_POST。

您需要更改 PHP 来读取数据：

$json = file_get_contents('php://input')
$data = json_decode($json));
var_dump($data);

【讨论】：