使用JavaScript将从API检索的数据写入主机服务器

Question

编辑：更新 - 解决方案

所以我已经实现了我需要做的事情：将数据写入服务器上的文件。我不确定事情是如何运作的，但似乎：

xhttp.send(data);

不会发送FormData变量中的所有数据，而只发送带有“key”“data”的数据。 （对不起，如果我的术语在这里错了。）所以我做的是我把我的对象“userData”并应用了以下内容：

userStringData = JSON.stringify(userData);

然后我将userStringData放入FormData变量，如下所示：

var data = new FormData();
data.append("data" , userStringData);

然后，这成功写入服务器上的文件。在文件中我只有用户字符串数据而不是“密钥”“数据”。

在我的PHP文件中，每次写入后我还包括一个新行，以便每个userString数据都在一个新行上：

if(!empty($_POST['data'])){
    $data = $_POST['data'];
    $fname = "users.txt";
    $file = fopen("./AJG_Data/".$fname, 'a');
    fwrite($file, $data);
    fwrite($file, "\r\n");
    fclose($file);

所以现在这对我有用。感谢那些提供建议和帮助的人。

编辑：更新：

目标：使用AJAX和PHP将数据写入服务器。 （如有必要，请参考下面的原始问题）

感谢A Dyson的评论，我取得了很多进展。我了解到XMLHttprequest是向服务器发出AJAX请求的方法。我有这个代码：

    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            let successString = `Thank you ${userData.athlete.firstname} you have successfully granted permission to read your data.`
            document.querySelector("#message-0").innerHTML = successString;
        }
    };
    xhttp.open("POST","/path_to_my_php_file/file_write.php", true);
    xhttp.send(data);
}

在服务器端，我在我的php文件中有这个：

<?php

$dir = 'AJG_Data';

// create new directory with 744 permissions if it does not exist yet
// owner will be the user/group the PHP script is run under
if ( !file_exists($dir) ) {
     mkdir ($dir, 0744);
}

file_put_contents ($dir.'/test1.txt', 'Hello File');


if(!empty($_POST['data'])){
    $data = $_POST['data'];
    $fname = "users.txt";
    $file = fopen("./AJG_Data/".$fname, 'w');
    fwrite($file, $data);
    fclose($file);
}
?>

上面的目录创建部分不是必需的，这是我的故障排除的一部分。

如果我发送如下创建的简单FormData，上述工作将完美无缺：

var data = new FormData();
data.append("data" , "the_text_you_want_to_save");

我遇到的问题是，当我尝试发送更复杂的FormData时。它不起作用。它无法识别我的FormData，并且它没有通过这个if语句：

if(!empty($_POST['data']))

我使用以下代码检查了我的FormData：

for (var pair of data.entries()) {
    console.log(pair[0]+ ', ' + pair[1]); 
}

上面的代码返回以下内容：

token_type, Bearer
expires_at, 12345678910
expires_in, 1234
refresh_token, 1234567890abcefg...
access_token, 1234567890abcdefg...
athlete[id], 1234567
athlete[username], joe_soap
athelete[resouce_state], 2
athlete[firstname], Joe
...
...
athelete[created_at], 2017,01-03T16:07:37Z
...
...
athlete[profile], https://some.web.address/larg.jpg

所以据我所知，我有很好的FormData，但没有任何东西写在服务器端。

我怎么能纠正这个？

谢谢。

原始问题如下。

我已经使用JavaScript代码从Strava API成功检索了数据。我将数据存储在变量中作为JavaScript对象。我想将数据写入服务器上的文件。

我花了几个小时搜索网络，但找不到解决方案。看来这可能是使用ajax或jQuery，但我找不到一个简单的逐步解释如何做到这一点。

结论：我想要一种简单的方法，使用JavaScript或与JavaScript相关的快速且易于实现的数据将数据写入服务器上的文件。假设我可以成功写入文件，我稍后会想要从文件中读取。

Answer 1

您需要在后端使用另一个文件，这实际上会写入。我会假设PHP。我建议base64对数据进行编码，并将其存储编码以节省时间。

使用Javascript：

if (window.XMLHTTPRequest) {
    var xhttp = new XMLHTTPRequest();
} else {
    var xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        //Process output, get result text with this.responseText, decode base64, and parse JSON
        alert(JSON.parse(window.atob(this.responseText)));
    }
}
xhttp.open("POST", "file-load.php?key=" + window.btoa(JSON.stringify(value)), true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhttp.send();

PHP：

<?php
$key = $_POST['key'];
file_put_contents("storage.txt", $key); //Set file contents

或者，如果你想追加它：

<?php
$key = $_POST['key'];
$current = file_get_contents("storage.txt");
file_put_contents("storage.txt", $current . "\n" . $key);

要读取文件，只需使用与以前相同的设置javascript，但使用file-load.php而不是file-read.php：

echo file_get_contents("storage.txt");

使用onreadystatechange读取输出。