如何使用ajax将数据发送到rails上的ruby中的控制器

Question

我是ROR.i的新开发人员,使用带事件更改的ajax将show.html.erb中select_tag的数据发送到def show ... end中的控制器.我尝试发送数据,但我的脚本不工作.下面是我的脚本:

<script type="text/javascript">
    $('#cbo').change(function() {
       $.ajax({
        url: "/product_details/show",
        type: "POST",
        data: {"cbo_id" : $('#cbo').val()},
        dataType: "html",
        success: function(data) {
          alert('successfully');
        }
      });
    });
</script>

在product_details/show.html.erb中

<%= form_tag(product_detail_path, :method => "post") do %>
  <%= select_tag "categories", options_from_collection_for_select(Category.all, :id,     :category_name),:id => 'cbo' %>
<% end %>

def show
  @getcbo = params[:cbo_id]
end

我认为url可能有问题:"/ product_details/show".那么我如何使用url将数据发送到def show ...在控制器中结束？.请帮我 !

Answer 1

你需要调整很多东西

MVC

首先,让我解释一下ajax调用应该如何在Rails中运行

因为Rails基于MVC(模型视图控制器)编程模式 - 您需要围绕此构建应用程序.对于许多新手开发者来说,问题在于解决这个问题有点棘手 - 可以相对简单地学习一些东西:

正如您所看到的,MVC基本上将"控制器"置于聚会的中心.您必须明白,在MVC应用程序中,您的请求不会首先进入"视图"(许多人认为) - 它们会转到控制器,它会从模型中构建相关数据,然后为您呈现视图

因此,每当您向MVC应用程序发送请求时,您都需要记住将其基于控制器操作(而不是您的视图)

-

阿贾克斯

我不知道你对ajax(异步Javascript和XML)有多少经验,但如果你没有多少,请让我解释一下.

Ajax基本上只是一种在浏览器中创建"伪请求"的方法.通过"伪请求",我的意思是它基本上会从"普通"应用程序的典型流程中发送另一个请求:

因为HTTP是"无状态的"(IE它不会持久存在任何设置/"状态"),所以没有办法提供"实时"连接而不需要像Web套接字那样的东西.

Ajax为您提供了在典型加载过程完成后发送和接收数据的功能,使您看起来"实时"接收数据.实际上,您只是向您的应用发送伪请求(始终记住Ajax不是魔术)

码

您的代码需要在几个地方进行更改

-

首先,你需要让你的javascript不引人注目(IE从你的视图中删除它并放入你的资产piepline)

#app/assets/javascripts/application.js
$(document).on("change", "#cbo", function() {
   $.ajax({
   url: "/product_details/show",
   type: "POST",
   data: {"cbo_id" : $(this).val()},
   dataType: "json",
   success: function(data) {
       alert('successfully');
     }
   });
});

#app/controllers/product_details_controller.rb
Class ProductDetailsController < ApplicationController
   respond_to :js, :json, :html

   def show
      @product = Product.find params[:id]
      respond_with @product
   end
end

这将使您能够接收已在控制器中设置的产品JSON对象,这是一个非常基本的示例.

如果你给我一些关于你想要达到的目标的更多信息,我肯定会给你一个更精致的解决方案; 希望上面的代码演示了MVC原理的工作原理等