Question

我有一个链接可以在短和长之间切换描述长度。

最初我是通过js文件调用创建的，即只是

# /app/assets/javascripts/toggle_length.js
$.get('/toggle_full_details');

工作正常。（它使用css类来显示/隐藏长短描述。）

但理想情况下我想使用rails路由进行链接。

哪些（相关路线的部分列表）：

$ rake routes
    Prefix               Verb  URI Pattern                     Controller#Action
    ...
    toggle_full_details  GET   /toggle_full_details(.:format)  links#toggle_full_details
    toggle_row_shading   GET   /toggle_row_shading(.:format)   links#toggle_row_shading
    ...
    root                 GET   /                               links#index

所以我将我的long_or_sort_details.js文件重命名为long_or_short_details.js.erb并尝试使用rails路由，但以下尝试都没有奏效，我错过了什么/做错了什么？

$.get({ "<%= toggle_full_details_path %>" }) 
// Gave: undefined local variable or method toggle_full_details_path

$.get({"<%= toggle_full_details_url %>"}); 
// Gave: undefined local variable or method toggle_full_details_url

$.ajax({url:"/toggle_full_details", type: 'GET' }) 
// Works ok... but not using routes :(

$.ajax({ url:'<%= toggle_full_details_path %>', type: 'GET' }) 
// undefined local variable or method `toggle_full_details_path'

fyi my app/assets/javascripts/applications.js包含带

的文件

//= require long_or_short_details

Answer 1

这对我有用：

$.get("<%= Rails.application.routes.url_helpers.toggle_full_details_path %>");

如果通话失败，我不想要任何用户消息，因此没有$.ajax和success:或failure:来电。

如果我想要成功或失败的其他东西，可以使用类似的东西：

$.ajax({
  url: "<%= Rails.application.routes.url_helpers.toggle_full_details_path %>",
  type: 'GET',
  success: function(r) {
    $('span#messages').html('<span class="ok">yes</span>');
  },
  error: function(r) {
    $('span#messages').html('<span class="not_ok">no</span>');
  }
});

Answer 2

另一种选择可能是使用js-routes gem＆＃34; Brings Rails命名路由到javascript＆＃34;

https://github.com/railsware/js-routes

Answer 3

如果您使用的是webpacker，则可能要签出js_from_routes，以便您生成helper methods来发出AJAX请求。

如果您使用的是jQuery，则可以使用custom template的targets jQuery，然后：

resources :links do
  get :toggle_full_details, on: :collection, export: true
end

import LinksRequests from '@requests/LinksRequests'

LinksRequests.toggleFullDetails({ success: onSuccess, error: onError })

不过，您可以通过using axios获得更好的API。

LinksRequests.toggleFullDetails().then(onSuccess).catch(onError)

好处：

轻松指定应该生成帮助程序的路由。
无需手动指定URL和HTTP动词，从而避免错误并节省开发时间。

如何在js文件中使用rails路径进行GET＆＃39; s和ajax调用？

3 个答案: