Rails+AngularJS 实现Ajax前后端完全分离

因为网上的教程字数太多，而且都是英文的（没错这才是重点）。想要前后端完全分离的我完全懒得考虑这么多，就自己开始折腾能不能很轻松的完全只是用Control和Model而不管View，不引入gem，现在简单的小demo终于成功了。

准备完这个，接下来我们就只要管Control怎么写就行了。

首先来尝试一下get，最简单。

1	def index
2		json_str = {"xx" => "hello"}.to_json
3		render :json=>json_str, status=>'200'
4	end
5

在这里我们用了一个to_json方法来处理，把Hash转换为json格式，to_json方法是Rails中特有的，并非Ruby本身的方法。

接着我们就可以滚去前端了：在需要调用的位置使用：$http.get('http://localhost:3000');，这是最简单的获取方法，当然我们自然不可能获取了就走人，这只是一个测试，接下来我们要使用then来进行get之后的操作。

提示：使用$http接收之后json都会经过fromJson等一系列方法，务必保证收到的是JSON,否则会报错。

1.then(function(res) {
2	console.log(res);
3	angular.forEach(res.data, function(value, key) {
4		$scope.message.push({author: key, content: value});
5	});
6});
7

我们把get的分号去掉，加上这个，为了确定res收到的是什么，我们可以在控制台输出看一下，res.data里存储的就似乎收到的json（Object），用angular.forEach遍历即可。

这样一个简单的get就完成了。

POST相比较之下就比较折腾了，但也不是很复杂，最主要的是要确定怎么样才能获取POST的值，这里并没有像$_POST这样简单的变量。

在Controller 详解中我们知道：

如果在初始化脚本中开启了 config.wrap_parameters 选项，或者在控制器中调用了 wrap_parameters 方法，可以放心的省去 JSON 格式参数中的根键。Rails 会以控制器名新建一个键，复制参数，将其存入这个键名下。因此，上面的参数可以写成：

1{ "name": "acme", "address": "123 Carrot Street" }
2

会自动进行转换，然后就可以用对应控制器名来访问。

这里我们检查config>initializers的对应文件夹，发现默认开启，，使用这个黑科技。

1	def create
2		json_str = params[:article]
3		json_str = json_str.to_json
4		render :json=>json_str, status=>'200'
5	end
6

我们的Controller是ArticlesController，所以很明显的这样子获取传进来的值，转换为json，接着传出（只是一个测试，理论上接下来要实验写入数据库）。

接下来开始写前端的部分：$http.post('http://localhost:3000/create', message)简单的POST操作，尝试是否成功获取到值。

post的参数非常有意思：post(url, data, [config]);其中data可以传入任意类型，他会尽可能的转换成json传入，之后获取到的值也会用fromJson尽可能的转换，供之后使用。

在post的之后是由是否成功来进行分支处理的，这里我们只写success。

1.success(function(res) {
2	console.log(res);
3	$scope.message.push({author: res.author, content: res.content});
4});
5

一样，可以在控制台看看输出的值，会发现是一个json的Object，没有其他信息，直接使用即可。

CodeSky 代码之空

Rails+AngularJS 实现Ajax前后端完全分离

评论 (0)