搜尋

首頁  >  問答  >  主體

angular.js - Angular 透過 $http.post 寫入本地 JSON 文件

最近在練習使用 Angular,在實作 $http 對本地 JSON 文件讀寫的時候遇到了問題。

問題

使用 GET 方法成功將 JSON 文件的內容讀出來;但是在使用 POST 插入本地 JSON 文檔 newBook 的時候,Chrome 的終端裡出現瞭如下錯誤:

 Failed to load resource: the server responded with a status of 404 (Not Found)

關鍵的程式碼貼出來:

var bookLibraryApp = angular.module('bookLibraryApp', ['ngRoute']);

bookLibraryApp.controller('BookLibraryController', function($scope, $http){
    $http.get('api/books.json').success(function(data){
        $scope.books = data;
    }).error(function(){
        alert("an unexpected error ocurred!");
    });

    $scope.addBook = function(){
        var newBook = {
                        isbn: $scope.newBook.isbn, 
                        title: $scope.newBook.title,
                        year: $scope.newBook.year
                      };

        $http.post('api/books.json', newBook).success(function(){
            $scope.msg = 'Data saved';
        }).error(function(data) {
            alert("failure message:" + JSON.stringify({data:data}));
        });
    }
});

對應的 HTML 文件為:

<p class="container">
    <h2>Create a Book here</h2>
    <p class="createBookInfo">
        <p>ISBN: <input type="text" ng-model="newBook.isbn"/></p>
        <p>Title: <input type="text" ng-model="newBook.title" /></p>
        <p>Year: <input type="number" ng-model="newBook.year" /></p>
    </p>
    <br />
    <button ng-click="addBook()">Insert this book</button>
    <p>{{msg}}</p>
</p>

希望有朋友能夠幫忙找下錯誤在什麼地方,謝謝!

迷茫迷茫2743 天前746

全部回覆(3)我來回復

  • 淡淡烟草味

    淡淡烟草味2017-05-15 16:51:59

    在 Angular 官網的 IRC 裡得到了幫助,答案(翻譯)大概如下:

    file:/// 是本地简单的文本服务器,能够实现 $http.get() 的服务,但是要实行 POSTPUTDELETE 的服务,就需要真正的网络服务器了。如果你会多种语言的话,可选的种类有很多种,基于 PHPRailRubyJava 等等。
    當然可以選擇全 JS 的解決方案,例如我現在就在使用 MEAN,祝你玩兒的愉快。

    好,那麼現在問題來了,討論技術哪裡強………………

    回覆
    0
  • 滿天的星座

    滿天的星座2017-05-15 16:51:59


    以上我傳輸json post方法,正確的回傳結果了

    回覆
    0
  • 迷茫

    迷茫2017-05-15 16:51:59

    books.json裡面該怎麼寫?

    回覆
    0
  • 取消回覆