Question

我有：

<p id="click">Click here</p>

在控制器中：

@details=Family.find_by(famid: params[:famid])
respond_to do |format|
   format.html
   format.json {render :json => @details}
end

和：

$('#click').on('click',function(){
 $.ajax({
          type: "GET",
          data: 'famid='+id,
          dataType: "json",
          url: "/map",
          success: function(data){                
            document.getElementById('myModal').innerHTML = data.famid
          }
      });
}  

<div id="myModal"></div>

这很好用。 myModal div标记由正确的famid值填充。但我只是想通过ajax将数据发布到控制器并查询数据库，然后使用@details变量。所以我试过了：

$('#click').on('click',function(){
     $.ajax({
              type: "POST",
              data: 'famid='+id,
              dataType: "json",   //do I need this? should it be html?
              url: "/map"  
          });
    }

现在我想使用@details变量，如：

<div id="#myModal"> <%= @details.famid %> </div>

我该怎么做？

更新：好的我做了以下事情，一切正常（感谢@Rich＆amp; @NitinJ），除了部分。它没有正确呈现。

map.js.erb

$("#myModal").html("<%= escape_javascript(render(@details))%>");

_details.html.erb

<h3><%= @details.famid %></h3>

map.html.erb

    <div id="myModal">
      <%= render @details %>
    </div>

更新：

现在，部分在浏览器控制台中正确呈现。我可以看到#myModal div正确填充。但它仅在浏览器控制台中显示，而不在map.html.erb页面上显示。这有什么不对？

Answer 1

<强>的Ajax

$('#click').on('click',function(){
     $.ajax({
         type: "POST",
         data: {famid: id}, //you need to serialize your data
         dataType: "json",   //do I need this? should it be html?
         url: "/map"  
     });
}

AJAX非常简单 - 它代表您发送请求。 $.ajax函数来自JQuery，所以为了正确起见，你只需要向它传递正确的参数

<强>路线

#config/routes.rb
post "map", to: "your_controller#map"

因为您要发送POST请求（而不是GET），所以您需要一条路由来处理请求。而且，由于您要发送到/map，您需要确保自己能够接收到该请求。发送到右侧控制器

<强>控制器

#app/controllers/your_controller.rb
def map
   @details = Family.find_by(famid: params[:famid])
   respond_to do |format|
       format.html
       format.json {render :json => @details} 
   end
end

<强>响应

因为您正在处理JSON，我相信您最好直接在视图中处理响应，如下所示：

$('#click').on('click',function(){
     $.ajax({
         type: "POST",
         data: {famid: id}, //you need to serialize your data
         dataType: "json",   //do I need this? should it be html?
         url: "/map",
         success: function(data) {
             details = jQuery.parseJSON(data)
             $('#modal_body').html(details.famid);
         }
     });
}

据我所知，JSON旨在简洁地传递数据（尽可能少的移动部分），因此，我们始终处理来自Ajax请求的JSON响应;而不是单独的文件

您可以使用jQuery.parseJSON功能来处理此问题，然后创建一个可以附加到页面的对象

<强>更新

我相信你的问题是你正在使用JSON

您无法使用JSON加载rails .js文件 - 您必须加载.json.erb，或在前端视图中处理。您可能希望将您的请求更改为标准JS：

#JS
$('#click').on('click',function(){
 $.ajax({
          type: "POST",
          data: {famid: id},
          url: "/map"
      });
}  

 #Controller
 def map
    @details = Family.find_by(famid: params[:famid])
    respond_to do |format|
       format.js
       format.html
    end
 end

 #app/views/controller/map.js.erb
 $("#myModal").html("<%=j render(@details) %>");

Answer 2

您必须创建一个js.erb模板，而不是渲染此模板。现在，您可以在* .js.erb模板中访问此变量

alert("<%=@details.famid%>")

您还可以通过

更新p标签的文字

$("modal-body").text("<%=@details.famid%>")

Rails AJAX部分无法正确呈现

2 个答案: