我的 Ajax 调用 return 的 js.erb 文件作为浏览器中的响应。我怎样才能使它有returnjson的内容,又能执行js.erb的文件呢?

My Ajax call returns js.erb file as the response in the browser. How do I make it return json contents, but also execute the js.erb file?

我是 Rails 上 Ruby 的新手,正在试用一个应用程序。我的应用程序 Ajax 调用正确,但响应在浏览器中显示为 js.erb 文件。如何在执行 js.erb 文件时显示 json 响应?是否可行或有更好的方法?

谢谢。

我的控制器文件

def new
  @department = Department.new
  # respond_to do |format|
  #   format.html
  #   format.json {render json: @department}
  # end
end

def create
  @departments = Department.all
  @department = Department.create(department_params)
  respond_to do |format|
    format.html
    format.js {render json: @department}
  end
end

Controller

我的部分表格

<div class="modal-dialog">
  <div class="modal-content">
  <%= form_for @department, remote: true, data: {type: :json} do |f| %>
  <div class="modal-body">
    <h2> Department: </h2>
    <ul class="errors"></ul>

    <div class="form-group">
      <%= f.label :title, class:"control-label" %>
      <%= f.text_field :title, class: "form-control" %>
    </div>
    <div class="form-group">
      <%= f.label :body, class: "control-label" %>
      <%= f.text_field :body, class: "form-control" %>
    </div>
  </div>
  <div class="modal-footer">
    <%= f.submit class: "btn btn-primary .departmentCreate" %>
    <%= link_to "Cancel", "#", class: "btn", data: {dismiss: "modal"} %>
  </div>
<% end %>
</div>
</div>

Form.html.erb

我的 Json 响应,如果我保持 format.js {render json: @department} Json Response

如果我从控制器中删除渲染 json,我的反应是: JS response

我的新.js.erb文件

$("#department-modal").html("<%= escape_javascript(render 'departments/new') %>")
$("#department-modal").modal("show")

我的 _new.html.erb 部分:

<%= render "form" %>

我创建.js.erb文件:

<%= render 'save' %>

我的_save.js.erb部分:

$("ul.errors").html("")
<% if @department.errors.any? %>
  <% @department.errors.full_messages.each do |message| %>
    $("ul.errors").append($("<li />").html("<%= message.html_safe %>"))
<% end %>
<% else %>
  $(".department-index").html("<%= escape_javascript(render 'departments/index') %>")
  $("#department-modal").modal("hide")

在浏览器中呈现 json 响应时,js.erb 文件不执行。如何在 js.erb 文件执行时在浏览器中显示 json 响应? 谢谢:)

你的 JavaScript 没有执行的原因是你的控制器中有一个块来处理响应。因此代码永远不会到达您的 JavaScript 文件。

换行:

format.js { render json: @department }

至:

format.js

这将告诉 Rails 您接受 JavaScript 请求,并且由于没有指定块,因此使用 "app/views/departments/create.js.erb" 中的模板。

如果您不想呈现默认模板,您可以像这样在块中指定它:

format.js { render: :new } # renders app/views/departments/new.js.erb

或:

format.js { render: 'some/path' } # renders app/views/some/path.js.erb

How can I show json response in browser while js.erb file executes? Thank you :)

如果我没有正确理解你的问题,答案是你不能。您的回复 Content-Type 将是 application/jsonapplication/javascript

浏览器将使用此 header 来处理响应。

而不是嵌套渲染 js.erb 直接从具有完整路径的控制器渲染模板。假设 _save.js.erb 的完整路径是 departments/save 另外 @departments 应在创建新部门后计算,以便新创建的记录将添加 @departments

def create
  @department = Department.create(department_params)
  @departments = Department.all
  render template: 'departments/save'
end

用partial:_

传递局部变量总是一个好习惯
$("ul.errors").html("")
<% if @department.errors.any? %>
  <% @department.errors.full_messages.each do |message| %>
    $("ul.errors").append($("<li />").html("<%= message.html_safe %>"))
<% end %>
<% else %>
  $(".department-index").html("<%= j render 'departments/index', departments: @departments) %>")
  $("#department-modal").modal("hide")

您不能同时渲染两者,但您可以在服务器端渲染部分,然后将结果存储在JSON中。在客户端,您可以处理 JSON,并在 JS 代码中提取和使用呈现的 HTML 片段。

Jbuilder 中用于呈现局部的语法:

json.some_key json.partial! 'my_partial.js.erb'

所以堆栈类似于..

控制器

# Render the JSON partial in views

respond_to do |format|
    format.json {}
end

View - 控制器操作将调用默认的 json 构建器来执行操作,例如 views/departments/new.json.jbuilder

在这里渲染你想要的任何原始 JSON,比如@department,但也渲染所需的 JS 部分并将其存储在 JSON

json.department @department


json.department_form json.partial! 'new.js.erb'

然后在接收 JSON 的客户端代码中,例如 data,部分将出现在键 department_form 下,您可以将呈现的表单分配给原始视图中的 html 占位符元素

     //... ajax call to your controller#action
     dataType: "json",
     success: function(data) {
                $("#department_form_placeholder").html(data['department_form'])