Question

假设我正在尝试将数据发送到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);
    }
?>

Answer 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);

如果这样做，请不要使用以下内容覆盖内容类型：

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);

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

1 个答案: