2

我有一个 jquery，它使用参数来查询 Plivo api。

$(".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 页面上“回显”结果？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 页面上没有任何内容。

感谢您考虑这一点！

4

1 回答 1

3

@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（请参阅jQuery-ajax-settings）

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

    accepts: "application/json",
    dataType: "json",

    data: { 'country_iso' : country_iso,  'region' : region,  'prefix' : prefix },
    success: function(data){
        window.location.href = '/local'
        // this is the bit where you render stuff
    }
  });

});

确认数据正确

我会把它留给你。您可以只检查状态代码并信任其余部分，或者您可以使用某种校验和或哈希……这由您决定和实施。

显示响应。

将带有 id search_echo_placeholder（或其他）的 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) ];
  },

类似的东西。我已经大量复制和粘贴并编造了一些内容，所以不要逐字逐句地依赖它，它可以给你一个想法。

于 2013-05-17T18:29:55.840 回答