Jquery 使用Ruby/Sinatra在HTML中呈现ajax调用的结果

我有一个jquery，它使用参数来查询plivoapi

$(".localsearch").click(function() {
        var country_iso = $("#local").val();
        var region = $("#region").val();
        var prefix = $("#prefix").val();
        $.ajax({
        type: "GET",
        url: "/local/data",
        data: { 'country_iso' : country_iso,  'region' : region,  'prefix' : prefix },
        success: function(data){
            window.location.href = '/local'
        }
      });
});

ruby代码块通过api接收参数和查询

get '/local/data' do
      country_iso =  params[:country_iso]
      region = params[:region]
      prefix = params[:prefix]
      p = RestAPI.new(AUTH_ID, AUTH_TOKEN)
      params = {'country_iso' => country_iso, 'region' => region, 'prefix' => prefix, 'limit' => 1}
      warn params.inspect   
      response = p.get_number_group(params)
      obj = response.last
      puts obj["objects"][0]["stock"]
      puts obj["objects"][0]["region"]
      @stock = obj["objects"][0]["stock"]
      @region = obj["objects"][0]["region"]
      @prefix = obj["objects"][0]["prefix"]
      @voice_rate = obj["objects"][0]["voice_rate"]

      erb :local
end

参数被传递，终端控制台显示成功结果：

{"country_iso"=>"US", "region"=>"NY", "prefix"=>"646", "limit"=>1}
57  # = puts obj["objects"][0]["stock"]
New York, UNITED STATES # = puts obj["objects"][0]["region"]

我的问题是：如何在local.erb页面上“回显”RESSULT？Local.erb如下：

<h2>Your search returned the following result</h2>
        <ul>
          <li><span class="fixed">Stock:</span><span class="fixed"><%= @region %></span></li>
          <li><%= @region %></li>
          <li><%= @prefix %></li>
          <li><%= @voice_rate %></li>
          <li><input type="submit" class="buynumber" value="Buy this number" /></li>
          </ul>

您的搜索返回了以下结果

股票：

结果仅在带有puts的终端中打印。。当jquery将用户重定向到local.erb时，local.erb页面上不会显示任何内容

---

谢谢你的考虑

@akonsu给出了很好的回应。不要在AJAX调用结束时重定向到路由

还有两种方法可以做到这一点：

• 发送一些数据后，您将得到一个作为回音的响应，然后使用该响应进行确认和显示
• 发送一些数据时，您会得到一个作为回音的响应，然后使用回音进行确认，但使用发送的数据进行显示

你已经完成了数据的发送

作为回音得到回应。 将

get'/local/data'

路由的最后一行更改为：

  halt 200, {stock: @stock, region: @region, prefix: @prefix, voice_rate: @voice_rate}.to_json
end

最好使用

halt

而不是将其作为最后一个语句，因为您还可以添加一个，这在执行get以外的操作时非常有用

如果仍然需要将路由渲染到浏览器，而不仅仅是AJAX调用，则可以执行以下操作：

  if request.xhr? # XHR is the X in AJAX, so this is the AJAX call
    halt 200, {stock: @stock, region: @region, prefix: @prefix, voice_rate: @voice_rate}.to_json
  else # this would serve browsers, you could also filter by content type… YMMV
    erb :local
  end
end

在AJAX请求中，添加几行以确保请求JSON（请参阅）

}))

确认数据是正确的 我把这个留给你。您可以只检查状态代码并信任其余的代码，或者您可以使用某种校验和或散列…由您决定并实现

显示响应。 在搜索页面中添加一个id为

search\u echo\u占位符的div（或任何内容），您希望在其中显示输出

在javascript中，执行如下操作：

display = function(data) {
  var stock, region, prefix, voice_rate, _i, _len, _ref;

  result = "";
  for (_i = 0, _len = data.length; _i < _len; _i++) {
    _ref = data[_i], stock = _ref.stock, region = _ref.region, prefix = _ref.prefix, voice_rate = _ref.voice_rate;
    result += "<li>" + stock + "</li>";
    result += "<li>" + region + "</li>";
    result += "<li>" + prefix + "</li>";
    result += "<li>" + voice_rate + "</li>";
  }
  result = "<ul>" + result + "</ul>";
  return result;
};

// add this to the AJAX function
  dataFilter: display,
  success: function(result, status, xhr) {
    return [ $("#search_echo_placeholder").html(result) ];
  },

display=功能（数据）{
var股票、地区、前缀、语音/速率、\u i、\u len、\u ref；
结果=”；
对于（_i=0，_len=data.length；_i<_len；_i++）{
_ref=data[\u i]，stock=\u ref.stock，region=\u ref.region，prefix=\u ref.prefix，voice\u rate=\u ref.voice\u rate；
结果+=“
”+股票+“
”；
结果+=“
”+区域+“
”；
结果+=“
”+前缀+“
”；
结果+=“
”+语音速率+“
”；
}
结果=“
”+结果+”
”；
返回结果；
};
//将其添加到AJAX函数中
数据过滤器：显示，
成功：功能（结果、状态、xhr）{
返回[$（“#搜索#echo_占位符”）.html（结果）]；
},

沿着这些路线的东西。我已经大量地复制、粘贴和编造了一些片段，所以不要依赖于这个逐字记录，它会给你一个想法。
如果在调用完成时重定向，那么使用AJAX有什么意义？如果我可以在同一个页面（search.erb）上呈现它，那就太好了。我该怎么做呢？将
/local/data
中的值（
@region
，
@stock
等）作为json返回，然后在
success
函数中解析响应（因为它是json，所以您甚至没有解析它），并将其放入页面中。例如，你可以用“谢谢”，你能再详细说明一下吗。。。？如果我知道怎么做，我就不会问了。如何解析成功函数中的响应？以下是我在web上找到的众多教程之一：。它使用敲除，但您不必使用它。谢谢您令人难以置信的深思熟虑的回答。现在，我正在努力将所有这些放在一起，但是出现了一个额外的问题，即返回的数据（来自api调用）没有作为“正确的”json返回！我将继续插入，再次感谢。不幸的是，在最近几次尝试中，它不起作用，我无法调试它。我会继续努力的。谢谢你的努力和漂亮的剧本。我将把它储存起来，以便将来在不同的环境中使用。我想我将不得不以另一种方式处理这个特定的问题，因为我仍然无法从服务器获取正确的json。@user1903663不必麻烦，很高兴尝试并提供帮助。JSON出现了什么问题？请随意张贴。
display = function(data) {
  var stock, region, prefix, voice_rate, _i, _len, _ref;

  result = "";
  for (_i = 0, _len = data.length; _i < _len; _i++) {
    _ref = data[_i], stock = _ref.stock, region = _ref.region, prefix = _ref.prefix, voice_rate = _ref.voice_rate;
    result += "<li>" + stock + "</li>";
    result += "<li>" + region + "</li>";
    result += "<li>" + prefix + "</li>";
    result += "<li>" + voice_rate + "</li>";
  }
  result = "<ul>" + result + "</ul>";
  return result;
};

// add this to the AJAX function
  dataFilter: display,
  success: function(result, status, xhr) {
    return [ $("#search_echo_placeholder").html(result) ];
  },