从 Bootstrap 前端调用 Rails JSON-API

Question

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

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

Answer 1

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

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

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

Answer 2

以 blogs 的脚手架为例 rails routes (rake routes) 您可以看到在 routes.rb 中定义的所有 "endpoints"：

   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)
  },
});

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

从 Bootstrap 前端调用 Rails JSON-API

Calling a Rails JSON-API from a Bootstrap Frontend

frontend

json

ruby-on-rails

twitter-bootstrap

rails-api