使用 Ruby/Sinatra/AJAX 将一个 ERB 页面呈现到另一个页面中答案

【问题标题】：Rendering one ERB page into another using Ruby/Sinatra/AJAX使用 Ruby/Sinatra/AJAX 将一个 ERB 页面呈现到另一个页面中
【发布时间】：2015-08-30 08:46:42
【问题描述】：

我正在制作一个使用 Twitter API 检索时间线的 Ruby/Sinatra 应用程序。我有一个索引页面，其中包含一个要求搜索 Twitter 句柄的表单。单击提交按钮时，我希望时间线出现在同一页面上的表单下方，而不是现在他们要去的 result.erb 上。

我可能在我的 AJAX 调用中呈现错误的结果页面（“” 字面意思是显示的内容）但我一直未能找到正确的方法来做到这一点并且可以'不知道这是不是唯一的问题。

app.rb:

class App < Sinatra::Base
  get '/' do
    erb :index
  end

  post '/result' do
    @username = params[:username] || "justinbieber"    
    connection = GetTweets.new(@username)
    @all_tweets = connection.get_search_results
    erb :result, :locals => {'username' => @username}
    end
  end
end

index.erb：

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="/stylesheets/style.css">
    <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="/javascripts/script.js.erb"></script>
  </head>
  <body>
    <div id="input-form">
      <form action="/result" method="POST">
        @ <input type="text" name="username">
        <input type="submit">
      </form>
    </div>
    <div id="loading"></div>
    <div id="result"></div>
  </body>
</html>

结果.erb：

<%= @all_tweets.first.user.name %>

<% @tweet_array.each do |tweet| %>
  <p><span class="username">@<%= @username %>: </span>
    <span class="tweet"><%= tweet %></span>
  </p>
<% end %>

script.js.erb：

$(document).ready(function() {
  $('form').submit(function(e){
    e.preventDefault();
    $('#loading').html("<img src='images/loading.gif' height='325' width='325'><br>processing...");
      $.ajax({
      type: "POST",
      url: "/result",
      data: $('form').serialize(),
      success: function(){
          $('#loading').hide();
          $('#result').html("<%= erb :result %>")
      },
      error: function(){
        $("#result").html("No success.")
      }
    });
  });
});

谢谢！

【问题讨论】：

标签： ruby ajax sinatra

【解决方案1】：

已修复...答案在 script.js 中...我忘记在成功函数中包含一个参数。哎呀8）

   success: function(result){
              $('#loading').hide();
              $('#result').html(result)
          },

【讨论】：