未捕获的 ReferenceError：未定义数据

Question

我正在使用 ajax 来处理表单提交。在属性status 的表单单选按钮上。现在，当我尝试alert(data) 时，它会提醒 [object object]。

如何提醒当前表单提交。

console.log(数据)

Uncaught ReferenceError: data is not defined

index.html

<script>
   $(document).on('turbolinks:load', function() {
     $('.<%= attendance_form_id %>').on('ajax:success', function(event){
      const [data, status, xhr] = event.detail
      $('#<%= attendance_form_id %>').hide()
     }).on('ajax:error',function(event){
        alert("Something went wrong, please reload page")
     });
   });
</script>

Answer 1

您真的想在这里重新考虑您的整个方法。而不是使用内联脚本标签（boo），只需为您的元素分配一个类并将脚本移动到资产管道/包中。如果您认为需要使用 ERB 插值来定位元素，那您就错了。不要将您的 javascript 视为特定于单个元素/页面，而只需将其设计为可以通过定位类和/或属性附加到任何元素的行为。

如果您使用 ES6 功能，这一点尤其重要，因为如果您需要旧版浏览器支持，内联脚本标签将不会通过任何转译器。

不要将代码包装在 turbolinks:load 事件处理程序 (boo) 中并将处理程序直接附加到元素上，而是使用委托事件处理程序：

$(document).on('ajax:success', '.my_spiffy_form', function(event){
  const $form = $(this); // this is bound to the element that triggered the event
  const [data, status, xhr] = event.detail;
  console.log(data, status, xhr);
  // do something ...
}).on('ajax:error', '.my_spiffy_form', function(event){
  const $form = $(this); // this is bound to the element that triggered the event
  const [data, status, xhr] = event.detail;
  console.log(data, status, xhr);
  // do something ...
});

这个处理程序是幂等的，因为它会在事件冒泡到 DOM 顶部时捕获它。 jQuery.on 的第二个可选参数是用于过滤元素的选择器。

见Turbolinks: Making Transformations Idempotent。

另外请注意，传递给事件处理程序的参数会根据您使用的 Rails 版本而有所不同：

Rails 5.1 引入了 rails-ujs 并删除了 jQuery 作为依赖项。 [...] 与使用 jQuery 的版本不同，所有自定义事件仅返回 一个参数：事件。在这个参数中，有一个额外的 包含额外参数数组的属性详细信息。

• Rails Guides: Working with JavaScript in Rails

old jquery-ujs handler 的签名是：

$(document).on('ajax:success', '.my_spiffy_form', function(event, data, status, xhr){
  const $form = $(this); // this is bound to the element that triggered the event
  console.log(data, status, xhr);
  // do something ...
})