Question

编辑：更新-解决方案

因此，我已经实现了所需要做的工作：将数据写入服务器上的文件。我不确定具体如何运作，但似乎：

xhttp.send(data);

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

userStringData = JSON.stringify(userData);

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

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

然后将其成功写入服务器上的文件。在文件中，我只有userStringData，而没有“ key”“ data”。

在我的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将数据写入服务器。（如有必要，请参考下面的原始问题）

感谢ADyson的评论，我取得了很多进步。我了解到XMHHttprequest是向服务器发出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读取输出。

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

1 个答案: