如何在js文件中使用rails路径来获取's和ajax调用

How to use rails paths in js files for GET's and ajax calls?

本文关键字：获取 调用 ajax 路径 js 文件 rails      更新时间：2023-09-26

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

最初，我用一个js文件的调用创建了它，即只是

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

这很好。（它使用css类来显示/隐藏长短描述）。

但理想情况下，我想使用铁路路线连接。

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

$ 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，并尝试使用铁路路线，但以下尝试都不起作用，我错过了什么/做错了什么？

$.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我的app/assets/javascripts/applications.js包括带有的文件

//= require long_or_short_details

这对我有效：

$.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>');
  }
});

另一个选项可能是使用js-routes gem，它"将Rails命名路由带到javascript"

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

如果您正在使用webpacker，您可能需要签出js_from_routes，它允许您生成用于发出AJAX请求的辅助方法。

如果您使用的是jQuery，您可以使用一个针对jQuery的自定义模板，然后：

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

import LinksRequests from '@requests/LinksRequests'
LinksRequests.toggleFullDetails({ success: onSuccess, error: onError })

但是，使用axios可以实现更好的API。

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

优点：

  • 轻松指定应生成帮助程序的路由
  • 无需手动指定URL和HTTP谓词，可以防止错误并节省开发时间
相关文章：