Rails.ajax 数据未传递给控制器

Posted 2023-05-08

【中文标题】Rails.ajax 数据未传递给控制器

【英文标题】：Rails.ajax data not being passed to controller

【发布时间】：2020-12-28 12:39:43

【问题描述】：

使用 Rails 5.2.4、coffee-rails 4.2、jquery-rails 4.4.0、jquery-ui-rails 6.0.1

我有一些用户可以拖动和调整大小的 div，这个功能很漂亮。问题是在他们完成移动对象之后，我想根据百分比保存它在页面上的位置的新值。我得到了数学，一切都解决了。问题是通过我的咖啡脚本中的 Rails.ajax 调用提交数据。除了我定义的数据外，一切似乎都很好。这是我所拥有的：

<div class="selector ui-draggable ui-draggable-handle ui-resizable" style="position: absolute; width: 200px; height: 25px; top: 0; left: 0;" id="67745394-df31-4231-85b6-db0cff13c4ea" data-url="/documents/0a910275-5432-4c4e-a22d-dc1b4f70b958/versions/11095c90-087d-4723-ad9d-602f97b9954f/pages/82c4602b-0b7a-4238-a59f-f96bd5acb5df/form_fields/67745394-df31-4231-85b6-db0cff13c4ea">
   <div class="ui-resizable-handle ui-resizable-n" style="z-index: 90;"></div>
   <div class="ui-resizable-handle ui-resizable-e" style="z-index: 90;"></div>
   <div class="ui-resizable-handle ui-resizable-s" style="z-index: 90;"></div>
   <div class="ui-resizable-handle ui-resizable-w" style="z-index: 90;"></div>
   <div class="ui-resizable-handle ui-resizable-ne" style="z-index: 90;"></div>
   <div class="ui-resizable-handle ui-resizable-nw" style="z-index: 90;"></div>
   <div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 90;"></div>
   <div class="ui-resizable-handle ui-resizable-sw" style="z-index: 90;"></div>
</div>

这是我用来处理移动/调整 div 大小的咖啡脚本，然后在每个事件的最热门事件之后调用该函数。

document.addEventListener 'turbolinks:load', ->
  $('.selector').draggable()
  $('.selector').resizable handles: 'n, e, s, w, ne, nw, se, sw'

  $('.selector').on 'resizestop', (event, ui) ->
    sizing($(this))
    return
  $('.selector').on 'dragstop', (event, ui) ->
    sizing($(this))
    return
  return

sizing = (div) ->
  oh = $('#form-layer').height()
  ow = $('#form-layer').width()
  height = (div.height() / oh * 100)
  width = (div.width() / ow * 100)
  left = (div.position().left / ow * 100)
  top = (div.position().top / oh * 100)
  Rails.ajax
    type: 'PATCH'
    dataType: 'script'
    accept: 'script'
    url: div.data('url')
    data:
      x: left
      y: top
      w: width
      h: height

问题是我没有将任何数据对象传递到控制器参数中，这些参数是这样传递的：

"controller"=>"form_fields", "action"=>"update", "document_id"=>"0a910275-5432-4c4e-a22d-dc1b4f70b958", "version_id"=>"11095c90-087d-4723-ad9d-602f97b9954f", "page_id"=>"82c4602b-0b7a-4238-a59f-f96bd5acb5df", "id"=>"67745394-df31-4231-85b6-db0cff13c4ea"

我认为这与数据块的格式有关，但我尝试了几种不同的尝试，但似乎找不到获取任何数据的正确方法。如果我通过以下内容，我会得到一些结果，但没有任何用处，我在 hello 之后放置的任何内容都不会通过。

...
    data:
      'hello'

我明白了

"hello"=>nil, controller"=>"form_fields",...

【问题讨论】：

Rails UJS 需要格式化为字符串参数的数据。查看此问题的答案：***.com/questions/45820587/… 以获取建议。

这正是我一直在挖掘的技巧，但我无法用我使用的关键词找到。非常感谢！

@rmlockerd 这根本不正确。 Rack 无法处理应用程序/javascript 请求的请求正文。

【参考方案1】：

为了发送 Rails（从技术上讲是 Rack）可以理解的请求正文，您需要使用它可以解码的 Content-Type：

application/x-www-form-urlencoded 多部分/表单数据 应用程序/json

Rack 只是不知道如何处理 application/javascript，因此不会将请求正文解析为 params 哈希。

Rails.ajax
    type: 'PATCH'
    dataType: 'json'
    accept: 'script'
    url: div.data('url')
    data:
      x: left
      y: top
      w: width
      h: height

将 Content-Type 设置为 application/json 并将 Accept 设置为 application/javascript 告诉服务器您正在发送 JSON，但您想要返回 javascript。

【讨论】：

通过这些设置，我仍然没有从数据对象的控制器参数中得到任何东西。