未捕获的 ReferenceError：未定义数据

Posted 2023-05-09

【中文标题】未捕获的 ReferenceError：未定义数据

【英文标题】：Uncaught ReferenceError: data is not defined

【发布时间】：2021-01-04 04:45:29

【问题描述】：

我正在使用 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>

【问题讨论】：

尝试在event.detail 上执行console.log()。看看是否未定义。

@edddd, Uncaught TypeError: event is undefined 我这样的错误。我可以提交表单数据，但无法alert 提交了哪些数据

ajaxSuccess 方法怎么样？ $(...).ajaxSuccess(function(event, xhr, settings ) your code

@JoonaYoon 它的工作我可以隐藏成功``` $('#').hide()``` 失败警报也正在执行跨度>

alert(any_object) 将始终显示[object object] - 停止使用警报进行调试并改用console.log（或使用调试工具进行调试）

【参考方案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 ...
)

【讨论】：

您想使用turbolinks:load 的唯一情况是您必须集成某种非幂等库，例如所有这些日期选择器和其他 jquery 小饰品。

我从数据中获取undefined