通过XmlHttpRequest将数据从JS传递给PHP

Posted 2021-04-16

我现在遇到一个问题，包括向php发送一个JS对象，我发现它应该通过htmlHttpRequest完成，但问题是我是PHP的新手，而且，我不明白很好，这个XmlHttpRequest如何工作。我尝试了不同的方法，但是，我发现适合我的方法，不断返回相同的错误。代码将在下面发布，现在关于问题，我可以执行此请求，但是当我执行此操作时，PHP端会返回一条错误消息，指出存在未定义的索引。

这是所需的代码

JS部分：

function createTransaction() {
    var xmlhttp = new XMLHttpRequest();
    var newTransaction = {"name": document.getElementById('wallets').value}
    newTransaction.data = {
        "transactionID": document.getElementById('trans-id').value,
        "time": document.getElementById('creation-time').value,
        "senders": getSenders(),
        "receivers": getReceivers(),
        "finalSum": setSum()
    };
    xmlhttp.open('POST', '/admin.php', true);
    xmlhttp.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
    xmlhttp.onreadystatechange = function () {
        if (this.readyState === 4 || this.status === 200) {
            console.log(this.responseText); // echo from php
        }
    };
    xmlhttp.send({newTransaction});
    console.log(JSON.stringify(newTransaction));
}

简短描述：在这个函数中，我正在生成一个对象，然后使用XmlHttpRequest请求通过POST发送到PHP，这就是所有，在PHP端有一个变量捕获这个请求并回应它。这是代码：

$newTransaction = $_POST['newTransaction'];
echo $newTransaction;

有什么问题和/或如何更好地解决这个问题？

答案

你做错了两件事。

1. 在发送之前，您没有将对象转换为JSON：xmlhttp.send(JSON.stringify({newTransaction}));。相反，您将发送对象的默认字符串表示形式："[object Object]"，这是没有用的。
2. 您的PHP希望接收URL编码或Multipart表单数据。它不期望收到JSON。见this answer

另一答案

简称XmlHttpRequest或Ajax是一个不会重新加载页面的请求，这个逻辑你发送一个POST请求就像你在表单中所做的那样，当你发送一个表单时，你发送一对key : values到你的文件'发送让我们说你有这样的表格

<input name="transactionID">
<input name="time">
<input name="senders">
<input name="receivers">
<input name="finalSum">

这些值将在全局$_POST数组中以这样的方式接收

{
    "transactionID": "some id",
    "time": "some time",
    "senders": "some senders",
    "receivers": "some receivers",
    "finalSum": "final sum"
}

当你执行Ajax请求时，你做同样但没有inputs html，当你发送这样的数据时

newTransaction.data = {
    "transactionID": document.getElementById('trans-id').value,
    "time": document.getElementById('creation-time').value,
    "senders": getSenders(),
    "receivers": getReceivers(),
    "finalSum": setSum()
};
xmlhttp.send({newTransaction});

在你的admin.php，你会收到类似的东西

{
    "data" : {
        {
            "transactionID": "some id",
            "time": "some time",
            "senders": "some senders",
            "receivers": "some receivers",
            "finalSum": "final sum"
        }
    }
}

我推荐你2件事

1. 在你的admin.php中使用echo var_dump($_POST);die();来确切地看到你收到了什么
2. 使用插件来执行像jQuery，axios等的ajax调用。这将为您提供更好地处理请求和响应的工具。