无法在 .json 文件中发布数据

Question

我正在尝试使用 ionic 框架创建一个混合应用程序，但我被困在某一点上。我要做的就是将三个不同输入框中的值保存到“data.json”文件中，并在需要时检索该数据或进行更改，并且无论应用程序是否正在运行，值都应保留在那里。

$http.get('js/data.json').success(function (data) {
    $scope.values = data;
});

html

<div ng-repeat="yoyo in values">
    <p ><h2>{{yoyo.name}}</h2></p>
</div>`

使用这段代码，我可以遍历 data.json 文件中数组中可用的对象。但我无法在其中发布任何内容。

$scope.process = function () {
   // var SendData = angular.toJson({
     // json: JSON.stringify( ) });

var SendData= {
  "name": $scope.box1,
    "owners": $scope.box2,
  "country": $scope.box3,
};

$http.post('js/data.json',SendData)
    .success(function () { 
        console.log('done it bro'); 
    });
};

但是，只要单击按钮，就会触发上述功能。它应该从这三个框中获取值并应该推送到 data.json 文件中，但没有任何反应。我看不到 {{yoyo.name}} 有任何变化，因为这应该显示数组中的所有对象。但是我可以看到我的 .success 函数在console.log

中执行

请告知为什么我不能将数据保存在 .json 文件中或正确的方法是什么？

Answer 1

您无法使用原生 JavaScript 将文件保存在服务器中。想想如果恶意用户可以仅使用他的 JavaScript 控制台将数据发布到我们的服务器会发生的所有问题吗？这就是为什么它不允许。

所以我们使用 AJAX，这是一种与另一个服务器端 API 端点进行通信的工具，它实际上为我们完成了这项工作。在这里您可以使用localStorage 来保存您的SendData。更好的方法是使用这样的服务或工厂。

app.factory("LocalStorageService", ["$window", function ($window) {
    var HasKey = function (key) {
        return $window.localStorage && $window.localStorage.getItem(key);
    };
    var GetItem = function (key) {
        if ($window.localStorage) {
            return $window.localStorage.getItem(key);
        }
        return null;
    };
    var SetItem = function (key, value) {
        if ($window.localStorage) {
            $window.localStorage.setItem(key, value);
            return true;
        }
        return false;
    };
    var RemoveItem = function (key) {
        if ($window.localStorage) {
            return $window.localStorage.removeItem(key);
        }
        return null;
    };
    return {
        HasKey: HasKey,
        GetItem: GetItem,
        SetItem: SetItem,
        RemoveItem: RemoveItem
    };
}]);

现在插入localStorage，将工厂注入您的应用程序并调用它，

//To store into localStorage
LocalStorageService.SetItem("personalDetails", JSON.stringify(SendData));

//To retrieve from localStorage
var DTO = LocalStorageService.GetItem("personalDetails");
var personalDetails = JSON.parse(DTO);

P.S：请尽快开始使用更好的命名约定。否则它会成为一个不好改掉的坏习惯。 ;)

Answer 2

要执行$http.post，您需要一个后端 API（PHP、Node Js 等）来捕获您想要的数据并通过文件系统中的读写方法保存到数据库或 JSON 中。

Answer 3

您不能将数据直接写入 .j 子文件。但您可以从 .j 子文件中接收数据。对于此类场景，您可以选择浏览器本地存储、Web SQL、SQL lite 等选项。

记住本地的静态.json文件只能用于读取json值。