最近在练习使用 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 文档为:

<div class="container">
<h2>Create a Book here</h2>
<div 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>
</div>
<br />
<button ng-click="addBook()">Insert this book</button>
<p>{{msg}}</p>
</div>

希望有朋友能够帮忙找下错误在什么地方,谢谢!

3个回答

答案对人有帮助,有参考价值1答案没帮助,是错误的答案,答非所问
采纳

在 Angular 官网的 IRC 里得到了帮助,答案(翻译)大概如下:

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

好,那么现在问题来了,讨论技术哪里强………………

答案对人有帮助,有参考价值0答案没帮助,是错误的答案,答非所问


以上我传输json post方法,正确的返回结果了

+1

是的 :D 把文件放在服务器(比如你用到的 http://localhostXXX)里就可以实现了。我之前错误是直接操作本地文件(api/books.json)。

KAFFEECKO· 2015年05月29日

Angular 通过 $http.post 写入本地 JSON 文件的更多相关文章

  1. Node.js读取某个目录下的所有文件夹名字并将其写入到json文件

    针对解决的问题是,有些时候我们需要读取某个文件并将其写入到对应的json文件(xml文件也行,不过目前用json很多,json是主流). 源码如下:index.js var fs = require( ...

  2. HTML5实现本地JSON文件的读写

    参考: 使用HTML5来实现本地文件读取和写入  (FileReader读取json文件,FileSaver.js保存json文件) w3school <input>标签 FileRead ...

  3. 读取本地json文件,转出为指定格式json 使用Base64进行string的加密和解密

    读取本地json文件,转出为指定格式json   引用添加Json.Net 引用命名空间 using Newtonsoft.Json //读取自定目录下的json文件StreamReader sr = ...

  4. 访问本地json文件因跨域导致的问题

    我使用jquery的getJSON的方法获取本地的json文件,并进行操作,获取json 数据代码如下: $.getJSON("invite_panel.json",functio ...

  5. 读取本地json文件,并转换为dictionary

    // 读取本地JSON文件 - (NSDictionary *)readLocalFileWithName:(NSString *)name { // 获取文件路径 NSString *path = ...

  6. jQuery ajax读取本地json文件

    jQuery ajax读取本地json文件 json文件 { "first":[ {"name":"张三","sex": ...

  7. 第三天,爬取伯乐在线文章代码,编写items.py,保存数据到本地json文件中

        一. 爬取http://blog.jobbole.com/all-posts/中的所有文章     1. 编写jobbole.py简单代码 import scrapy from scrapy. ...

  8. JavaScript读取本地json文件

    JavaScript读取本地json文件 今天调试了一上午,通过jQuery读取本地json文件总是失败,始终找不出原因,各种方法都试了 开始总以为是不是json格式的问题.高了半天不行 后来读了一个 ...

  9. LitJson(读Exce文件写入到json文件):

    读Exce文件写入到json文件汇总: //命名空间 using System.Collections; using System.Collections.Generic; using System. ...

随机推荐

  1. 二模 (2) day2

    第一题: 题目描述: 在一个长方形框子里,最多有 N(0≤N≤6)个相异的点.在其中任何-个点上放一个很小的油滴,那么这个油滴会一直扩展,直到接触到其他油滴或者框子的边界.必须等一个油滴扩展完毕才能放 ...

  2. 第一个servlet小例子

    1.sendForward.jsp <%@ page language="java" contentType="text/html; charset=UTF-8&q ...

  3. IT公司100题-4-在二元树中找出和为某一值的所有路径

    问题描述: 输入一个整数和一棵二元树.从树的根结点开始往下访问一直到叶结点所经过的所有结点形成一条路径.打印出和与输入整数相等的所有路径. 例如输入整数30和如下二元树   14 / \ 5 16 / ...

  4. C++-const_cast, reinterpret_cast, static_cast的用法

    /////////////////////////////////////////////////////////////////////////////// // // FileName : cas ...

  5. 8种主要排序算法的C#实现

    作者:胖鸟低飞 出处:http://www.cnblogs.com/fatbird/ 简介 排序算法是我们编程中遇到的最多的算法.目前主流的算法有8种. 平均时间复杂度从高到低依次是: 冒泡排序(o( ...

  6. 蓝桥杯 2015年省赛最后一题 生命之树(树形dp)

    题目描述: 生命之树 在X森林里,上帝创建了生命之树. 他给每棵树的每个节点(叶子也称为一个节点)上,都标了一个整数,代表这个点的和谐值.上帝要在这棵树内选出一个非空节点集S,使得对于S中的任意两个点 ...

  7. Linux Program

    vhost : web.myftp.com storage.myftp.com ...... not vhost : storage.myftp.com eg : top eg : htop eg : ...

  8. JAVA每日一旅3

    1.关于byte byte在内存中占一个字节,范围是-128-127,128作强制类型转换到byte变成-128,因为128的二进制表示:1000 0000,最高位是符号位. 2.关于Hibernat ...

  9. JVM-class文件完全解析-类索引,父类索引和索引集合

    类索引,父类索引和接口索引集合 前面介绍了class文件,从头开始的魔数,次版本号,主版本号,常量池入口,常量池,访问标志.那么再接下来的就是用来确定这个类的继承关系的类索引,父类索引和接口索引集合这 ...

  10. 有关PHP安装,基础学习

    首先要安装 wamp 和 NavicatMySQLFront (要在非中文目录下) 打开DW 点击站点 ——新建站点:设置站点名称,选择本地站点文件夹:wap\www 服务器:添加 +    服务器名 ...