使用RubyonRails、jQuery和Ajax从onChange中提取查询

以下是我想做的：

基于两个下拉值：year、：category，从tablename中检索select* 其中年=：年和类别=：类别。 我想从$'lookup\u category'中执行此操作。更改而不是表单提交。 以下是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 

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

---

谢谢

您走上了正确的道路，但是可以做一些改进：

确保在触发AJAX请求之前提供了类别和年份 从javascript代码中删除URL“/lookup/rows”，当您更改路由时，硬编码URL将导致问题。 将查找请求实现为GET请求 我假设您已经安装了jquery rails gem，如果没有安装，请按照以下说明操作：

现在，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' %>

剩下的是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); 
}); 

---

使用用户输入进行数据库查询总是一个好主意，让孩子们非常开心？即使他们来自select options？不管他们来自何方，任何人都可以在ajax函数中写入任何内容，这些命令直接传输到服务器，无需清理和检查，有人可以用一行代码删除整个数据库。另外，您的数据应该是->数据：{year:year，category:category}，我如何防止任何人写入该ajax函数？即使我在集合中有：year\u select，在分组集合中有：category\u select，这是否有效？是的，只要输出是一个标记，它就应该有效；是否有一个示例说明如何在成功处理程序中显示数据？控制器应返回一个JSON对象，您可以通过添加console.logdata来检查成功处理程序中的数据；进入成功处理程序。然后，您将在浏览器的开发控制台firebug、IE开发工具等中看到数据内容，。。。。数据的内容可以像javascript中的任何数组/对象一样进行访问。显示数据取决于您，您很可能会遍历数据并创建HTML标记，如$.textdata['name'].appendTo$'body'；我很难让它工作。我在ajax:before调用中的'var categorySelect'前面放了一个console.logXX，而这不会出现在firebug控制台中。下面是我在“true，：data\u url=>'/lookup/getrows'，：data\u type=>'json'>'中的内容，我想确保分组的\u集合中的参数选择正确。我相信我正确地使用了您的示例，但是console.log没有显示这一事实意味着某些地方出了问题。谢谢你的帮助。

// 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); 
});