ajax - 使用 Ruby on Rails、jQuery 和 Ajax 拉回基于 onChange 的查询

Question

这是我想做的事情：

1. 基于两个下拉值（:year、:category），检索“select * from tablename where year = :year and category = :category”。
2. 我想通过 $('#lookup_category').change() 而不是表单提交来做到这一点。

这是 jQuery 代码（lookup.js）：

$('#lookup_category').change(function(){
     year = $('#lookup_year :selected').text()
     category = $('#lookup_category :selected').text()

     $.ajax({
         type:'POST',
         url:'/lookup/getrows',
         data: 'year, category',    //// I dont know if this is correct
         datatype:  //// dont know what i want here yet, JSON maybe 
     })
});

这是我在查找控制器中的 getrows 方法：

def getrows
  @lookuprows = Lookup.return_lookup_row(params[:year], params[:category])
end

这是我在 Lookup 类中的查询：

def self.return_lookup_row
  Lookup.select("year, category, field, serialnumber, active, remarks").where("year =
               ? and category = ?", params[:year], params[:category]) 
end 

你能告诉我是否朝着正确的方向前进吗？以及如何将这些查询结果返回到同一页面。

谢谢

Answer 1

您走在正确的道路上，但可以进行一些改进：

1. 确保在触发 AJAX 请求之前提供类别和年份
2. 从您的 javascript 代码中删除 URL '/lookup/rows'，当您更改路由时，硬编码的 URL 会导致问题。
3. 将查找请求实现为 GET 请求

我假设您已经安装了 jquery-rails gem，如果没有，请安装并按照此处的说明进行操作：https ://github.com/rails/jquery-ujs

现在，Rails UJS（不显眼的 javascript）中有一个漂亮的功能，可以让您创建一种与标签绑定的 javascript。

让我们在表单构建器中修改视图中的几行：

<%= f.select :year, ... your previous parameters ..., :'data-remote' => true, :'data-url' => '/lookup/getrows', :'data-type' => 'json' %>
<%= f.select :category, ... your previous parameters ..., :'data-remote' => true, :'data-url' =>  '/lookup/getrows', :'data-type' => 'json' %>

这是什么意思？

data-remote：在 HTML 标记上设置一个标志，应观察选择框以进行更改 data-url：定义查找数据的 URL（如果可能，请尝试使用 url 帮助器，如 lookup_getrows_path 或类似的）数据类型：响应将是什么数据类型

现在到应该响应 JSON 的控制器：

def getrows
  @lookuprows = Lookup.return_lookup_row(params[:year], params[:category]).all

  respond_to do |format|
    format.json { render :json => @lookuprows }
  end
end

剩下的是 javascript，结果非常简单：

// this handler will be invoked BEFORE the request is sent to the server, we can do checking here
$('#lookup_category, #lookup_year').live('ajax:before', function(evt) {
  var categorySelect = $('#lookup_category');
  var yearSelect = $('#lookup_category');

  // we need both values to send a request
  if(categorySelect.val() && yearSelect.val()) {
    // add parameters
    $(this).data('params', categorySelect.serialize() + '&' + yearSelect.serialize());
  }
  else
  {
    return false;
  }
});

// this handler will be invoked when the request has completed successfully
$('#lookup_category, #lookup_year').live('ajax:success', function(evt, data) {
  // data is now an array containing your objects 
  // you can dump them on firebug or your web browser console using console.log(data); 
});