使用 Ajax 加载页面后，Rails 应用程序在视图中呈现外部 API json 响应

Question

我有一个 Rails 应用程序，它有多个页面，必须从外部 API（salesforce API）中提取信息。我已经成功地通过 API 提取数据，但是我想为我的用户提供更好的体验并首先加载视图，然后进行 API 调用并使用 Ajax 加载 API 响应。 我有两条适用的路线。第一个路由加载视图，第二个路由发出 API 请求

routes.rb

get 'pending_loans', to: 'lender_account#pending_loans'
get 'pull_pending_loans', to: 'lender_account#pull_pending_loans'

对应的控制器动作如下：

lender_account_controller.rb

def pull_pending_loans
  @user = current_user
  if @user.activated?
    client = Restforce.new
    @account = client.find('Account', @user.salesforce_id, 'Id')
    pending_query = "select Loan__r.Business_Name__r.Name, Loan__r.Id, Loan__r.Name, Loan__r.Loan_Risk__c, Interest_Rate__c, Amount_Lent__c, Status__c, Loan__r.Time_Left_on_Listing__c, Loan__r.Funded__c from Loan_Part__c where Account__c ='%s' AND Status__c = 'Pledge'" % @account.Id.to_s
    @pendingloanparts = client.query(pending_query)
  end
  render :json => @pendingloanparts
end 

def pending_loans
  @user = current_user
end

在我看来，我有以下几点： pending_loans.html.erb

<script type="text/javascript">
  $.ajax({
    url: "/pull_pending_loans",
    cache: false,
    success: function(html){
      $("#pending_loans").append(html);
    }
  });
</script>

<div class="profile container content">
  <div class="row">
    <%= render 'lenders/sidebar' %> 
      <!-- Begin Content -->
        <div class="col-md-9">
          <div class="profile-body">
            <!-- Pending Loans -->
              <div class="panel panel-purple margin-bottom-40" id="small">
                <div class="panel-heading">
                  <h3 class="panel-title"><i class="fa fa-refresh"></i> Pending Loans</h3>
                </div>
                <div class="table-responsive">
                <table class="table table-hover" id="pendingloanlist">
                  <thead>
                    <tr>
                      <th>Company</th>
                      <th>Loan Title</th>
                      <th>Risk</th>
                      <th>Rate</th>
                      <th>Amount</th>
                      <th>% Funded</th>
                      <th>Time Left</th>
                    </tr>
                  </thead>
                  <tbody>
                    <td><div id="pending_loans"><p>Loading..</p></div></td>
                  </tbody>
                </table>
              </div>
            </div>                  
          <!-- Pending Loans -->
       </div>
    </div>
  <!-- End Content -->
</div>

截至目前，当我加载页面时，视图会立即加载，但是我没有看到 json 在待处理的贷款 div 中呈现。此外，如果我确实收到了带有记录列表的 json，我将如何遍历它们并正确填充表？

Answer 1

页面加载时需要使用jQuery ready()方法执行AJAX调用。

使用控制台方法（webkit 和 ff）console.log() 和 console.debug() 查看脚本执行期间发生的情况也很有用。

像这样包装你的 AJAX 调用：

$(function() {
 console.log('DOM ready!');
 // show a preloader or something
 $.ajax({
    url: "/pull_pending_loans",
    cache: false,
    success: function(html){
      // evaluate results, or generate the table with JSON data
      console.log('Got the result',html);
      $("#pending_loans").append(html);
      // hide preloader
    }
  });
});

从 ruby​​ 发送 HTML 不是一个好主意，您最好返回 JSON 集合并使用前端框架进行模板生成表格。 看看Handlebars