如何在angularjs中使用$http post方法将数据写入json文件？答案

【问题标题】：How to write data to the json file using $http post method in angularjs?如何在angularjs中使用$http post方法将数据写入json文件？
【发布时间】：2016-06-09 07:42:42
【问题描述】：

我有一个包含对象数组的 json 文件，我想知道 $http post 方法将另一个对象添加到此 json（包含对象数组）。假设所有 3 个文件都在同一个文件夹中。这必须在 angularjs 中完成。请帮助并了解任何其他详细信息，请询问。干杯！

--contact_details.json--

[{
  "name": "Darshil Patira",
  "number": "9829038347",
  "image": "images/dawn_scenic.jpg",
  "email": "darshilpatira@gmail.com"
}, {
  "name": "Sujith V",
  "number": "9756423129",
  "image": "images/blue_ocean.jpg",
  "email": "sujithv@gmail.com"
}]

---addcontact.html---

<div class="form-style">
    <div class="form-style-heading">
        Provide your information
    </div>
    <form name="reviewForm" action="" ng-submit="addcontact()" ng-controller="addContactController">
        <label for="field1">
            <span>Name<span class="require">*</span>
            </span>
            <input type="text" class="input-field" name="field1" ng-model="name" required />
        </label>
        <label for="field2">
            <span>Email<span class="require">*</span>
            </span>
            <input type="text" class="input-field" name="field2" ng-model="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$" required />
        </label>
        <label for="field3">
            <span>Telephone<span class="require">*</span>
            </span>
            <input type="text" class="tel-number-field" name="field3" ng-model="number" pattern=".{5,10}" required />
        </label>
        <input type="file" name="pic" accept="image/jpg">
        <label>
            <span>&nbsp;</span>
            <input type="submit" value="Submit" />
        </label>
    </form>
</div>

---app.js(控制器)---

var app = angular.module("mainApp", ['ngRoute']);

app.controller('addContactController',function($scope,$http){
    var dataobj = { 'name':$scope.name, 'email': $scope.email, 'number':$scope.number };
    $http.post('contacts_details.json',dataobj);
});

【问题讨论】：

你不能依赖 angularjs（它是一个前端框架）来更新文件或数据库。您需要一个服务器（java、PHP、nodejs...）来发出请求并更新共享内容。
更改一个 json... 没有多大意义.. 你的 json 在哪里？在javascript变量中？你想把它存储在服务器上吗？请尝试多解释一下您想要达到的目标...
使用前端框架你将如何更新你的本地 Json 文件，如果你需要文件应该在服务器中
谢谢帕克曼！我有一些想法，但不确定，所以我问了！ @Paolof76，该 json 是另一个文件，仅具有所示的 objects 数组。一切都只在我的桌面文件夹中。

标签： angularjs json http

【解决方案1】：

Angular 不知道如何写入文件系统。 服务器负责将 HTTP 请求解释为数据库/持久性调用。

例子：

.controller('someCtrl', function($http){
 var baseUrl = ... ;

 $scope.doPost = function(){
  $http.post(baseUrl + '/resource', {param1: 1, param2: 2});
 }
});

//In server (NodeJS?)
var fs = require('fs'); //File system module
server.post('/resource', function(request, response){ //Every HTTP post to baseUrl/resource will end up here
 console.info('Updated myJSON.json');
 fs.writeFile('myJSON.json', request.body, function(err){
  if(err) {
   console.error(err);
   return response.status(500).json(err); //Let the client know something went wrong
  }
  console.info('Updated myJSON.json');
  response.send(); //Let the client know everything's good.
 });
});

【讨论】：

谢谢 Muli Yulzary ，但我不知道你想完成什么，你能解释一下吗？
您正在混合前端和后端作业。您的服务器应该是更新.json 文件的服务器，而不是相反。在我的示例中，您只在控制器中调用 .post() 方法。更新 JSON 文件并在更新成功与否时通知客户端是服务器的工作。代码的第二部分（第一条注释下方）是用node.js编写的后端代码示例
这有点清楚了！但我不了解后端技术（此处为 node.js）。上面的baseurl会是json的路径吗？您上面编写的服务器代码还会有一个单独的文件，如果有，扩展名是什么？如果不是，应该包含在哪个文件中？

【解决方案2】：

如果您只需要为开发提供 .json，您可以尝试json-server。这是一个快速简单的选择——非常适合您无法访问服务器但仍需要/可以通过 api 使用 json 数据的开发。

【讨论】：