这是在Rails 4中执行AJAX请求的好方法吗？

Question

我最熟悉完整的JavaScript堆栈，并且自从我在Ruby on Rails中工作以来，我对发出XHR请求的方式就从未完全充满信心，因此，我想验证自己的理解。 我看了以下问题

• Ajax请求引发500错误，但该请求有效
• 请求完成后的处理
• Rails 3：如何在Ajax调用中“ redirect_to”？

但没有完全回答我的问题。

根据我的理解，这就是正在发生的事情。 在Rails中，我们拥有MVC，而Controller本质上就是我们控制路线将呈现的内容的地方。 它也可以设计为API，用于执行CRUD之类的事情。

接下来，在我们的前端，为简单起见，让我们使用jQuery。 我们要发出AJAX请求并处理响应。

$.ajax({
  url: '/new-sandwich/'+food_id,
  type: 'post',
  data: { food_id: food_id}
})
.done(function() {
  // if it works, refresh the page
})
.fail(function(e) {
  // if it works alert the user and refresh the page
  alert(e.responseText)
  return location.reload();
})

假设此控制器非常厚，因此响应可能需要几秒钟。

经过大约100行后，问题随即发生。

如果失败，它会向用户发出警报，并且刷新后仍会继续进行，好像一切正​​常。 要解决此问题，我相信我必须在控制器操作的顶部添加更好的验证。

接下来，问题在于，由于这是一个发帖请求，我不知道要在哪里重定向？ 如果请求成功，我希望它刷新，但是我该从客户端还是从服务器执行？ 如果我在POST Controller Action的末尾不添加render :nothing => true ，我将得到...

ActionView::MissingTemplate - Missing template sandwich/create_sandwich, application/create_sandwich

但是如果我这样做了，那么在JavaScript中有这样做的意义吗？

Answer 1

好吧，在我的控制器中，我通常按照以下方式进行操作：

class FooController < ApplicationController

  def create
    ... do some stuff
    render partial: 'some_partial', locals: {if: :needed}
  end

end

然后在javascript中，如下所示：

$.ajax({
  url: '/new-sandwich/'+food_id,
  type: 'post',
  data: { food_id: food_id}
})
.success(function(data) {
  $('#someSelector').html(data)
})
.fail(function(e) {
  // if it works alert the user and refresh the page
  alert(e.responseText)
  return location.reload();
})

因此，控制器返回一些HTML，然后js将HTML插入到$('#someSelector')定义的位置的页面中。

如果我的控制器方法确实需要很多时间，那么我通常会按照以下方式进行操作：

class FooController < ApplicationController

  def create
    render json: {job_id: FooCreateService.call(some: params[:thing])}, status: :ok
  end

end

然后我的ajax调用可能类似于：

$.ajax({
  url: '/new-sandwich/'+food_id,
  type: 'post',
  data: { food_id: food_id}
})
.done(function(data) {
  @.$jobId = data['job_id']
  @showAWorkingOnItNotification()
  @pollForResults()
})
.fail(function(e) {
  // if it works alert the user and refresh the page
  alert(e.responseText)
  return location.reload();
})

我的@pollForResults函数将使用@.$jobId来轮询后台作业服务以完成操作，然后在作业完成时（成功或失败）做出适当的响应。

自然，这比所有的事情都要复杂。 但是，这就是我通常的方向。