从引导前端调用 Rails JSON-API答案

【问题标题】：Calling a Rails JSON-API from a Bootstrap Frontend从引导前端调用 Rails JSON-API
【发布时间】：2017-08-31 02:21:18
【问题描述】：

这可能是一个愚蠢的问题，但您能告诉我如何在 Bootstrap 页面中从现有 Rails JSON-API 服务器调用“端点”。 Bootstrap 页面是否必须位于 API 服务器的视图文件夹中，如果是，我如何调用控制器并将接收到的 JSON 放入我的前端元素中？

谢谢你，我希望你明白我的意思。

【问题讨论】：

到目前为止您尝试过什么？您是否做过任何可以与我们分享的研究？

标签： ruby-on-rails json twitter-bootstrap frontend rails-api

【解决方案1】：

您可能想查看rake routes，它会向您显示可用的路线。

所以本质上是在客户端发出请求，可能在某些 js 中到特定端点，然后该端点将返回数据，您可以使用这些数据在客户端做任何您想做的事情。

您很可能不会从您的视图中调用您的端点，通常您会有一个单独的 js 文件，但如果您真的想要，可以将一些 js 添加到您的视图中并直接从那里调用您的端点。

【讨论】：

【解决方案2】：

以blogs 的脚手架和rails routes (rake routes) 为例，您可以看到在routes.rb 中定义的所有“端点”：

   Prefix Verb   URI Pattern                    Controller#Action
    blogs GET    /blogs(.:format)               blogs#index
          POST   /blogs(.:format)               blogs#create
 new_blog GET    /blogs/new(.:format)           blogs#new
edit_blog GET    /blogs/:id/edit(.:format)      blogs#edit
     blog GET    /blogs/:id(.:format)           blogs#show
          PATCH  /blogs/:id(.:format)           blogs#update
          PUT    /blogs/:id(.:format)           blogs#update
          DELETE /blogs/:id(.:format)           blogs#destroy

如果您看到 blogs GET /blogs(.:format) blogs#index 正在通过 GET 请求为您提供所有 blogs。

这应该会为您带来 API 中的所有 blogs：

使用纯 Javascript

var request = new XMLHttpRequest();
request.open('GET', 'localhost:3000/blogs', true);

request.onload = function() {
  if (request.status >= 200 && request.status < 400) {
    var data = JSON.parse(request.responseText)
    ...
  } else {
    ...
  }
};
request.onerror = function() {
  ...
};
request.send();

同样使用 Javascript fetch:

fetch('localhost:3000/blogs', {
  ...
}).then(function(response) {
   console.log(response)
}).catch(function(err) {
   console.log(err)
});

使用 jQuery：

$.ajax({
  url: 'localhost:3000/blogs',
  dataType: 'script',
  success: function(result) {
    console.log(result)
  },
});

然后您可以根据需要继续插入、更新和/或删除数据。

【讨论】：

谢谢，这很有帮助！