Ruby - Sinatra：以表单输入为参数的异步调用方法答案

【问题标题】：Ruby - Sinatra: Asynchronously calling method with form input as parameterRuby - Sinatra：以表单输入为参数的异步调用方法
【发布时间】：2012-03-19 06:28:15
【问题描述】：

我目前正在尝试构建一个小部件，它将根据用户名检索艺术家列表。

Ruby 方法需要一个用户名参数，然后调用 API 来检索实际的字符串数组。

网页有一个输入字段，用户可以在其中填写他/她的用户名。我的目标是立即调用 ruby 方法并显示艺术家列表。我的问题是能够使用实际的表单输入作为参数。我认为使用 params[:user] 会相对容易，就像在 Sinatra post 方法中一样。唉，事实证明不是。

我尝试了 JS 方法并在 :onkeyup 之后直接调用该方法。

Javascript：

userChanged = function() {                  
    var user = document.getElementById("username");
    if (user.value.length != 0){                
    artists = #{RFCore::get_artists(:name => params[:user]).to_json};
    art_list.innerHTML = artists
    };
};

:onkeyup

:onkeyup => "art_list.innerHTML = #{RFCore::get_artists(:name => params[:user])[0]}"

我已将 params[:user] 替换为我能想到的所有变体，例如“#{user}”和 user。

返回的错误是“#{user}”和用户的未定义方法[]' for params[:user] and undefined local variable or methoduser'。

也许有一个简单的解决方案；但这种感觉开始蔓延到我身上，我的方法一开始就是错误的。我对实现这一目标的任何其他方式持开放态度。

【问题讨论】：

标签： ruby asynchronous sinatra user-input

【解决方案1】：

据我了解，您正在动态生成该 JavaScript。因此，当您的 Ruby 代码生成它时，它会在您生成 JavaScript 代码时评估 RFCore::get_artists 表达式，而不是在用户与网页交互时。

如果是这样，我建议：

使用jQuery。它让您的生活更轻松。
当有一些用户交互（例如，按键）时，使用 Ajax 与您的服务器通信以获取艺术家列表。

这是一个演示这种方法的小型 Sinatra 应用程序：

require 'sinatra'

get '/' do
  <<html
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
function userChanged()
{
  $.get('/get-artists',
        {username: $('#username').val()},
        function(data){
          $('#artists').html(data);
        });
}
</script>
User: <input id="username" type="text">
<button onclick="userChanged();">Look up</button>
<div id="artists"/>
html
end

get '/get-artists' do
  "Generate here list for user #{params[:username]}"
end

请注意，上面的代码只是一个示例。生成的HTML全错，没有使用模板语言等

【讨论】：

感谢您的回复。完美运行，除了： {username: $('#username').val()} 我必须编辑它以包含 document.getElementById。由于某种原因，它没有正确接收用户名......也许与不同的名称和 ID 标签有关？
这真的应该有效； jQuery 特别擅长查找元素。在 jQuery 中，当你说$('#username') 时，你的意思是你想找到 id 为username 的元素。如果您要查找的元素只有一个 name 属性，则它将不起作用。