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

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

1 个答案: