jQuery - 在没有刷新的情况下成功函数后无法更新视图

Question

我是 jQuery 新手。我想在不刷新页面的情况下更新视图。数据正在控制台中登录，但未在未刷新的情况下加载到视图中。 $('#ajax').html(ajax); - 没有给我看任何东西。我正在调用数据 AJAX。

Javascript

<script>
$(document).ready(function() {
  $('#api_key').click(function() {

    var request = $.ajax({
      url: "/account/settings/api_token",
      method: "POST",
    });

    request.done(function(msg) {

      if (msg['status'] == 'success') {
        var request2 = $.ajax({
          url: "/account/settings/get_all_tokens",
          method: "GET",
        });
        request2.done(function(ajax) {
          $('#ajax').html(ajax);
          console.log(ajax);
        });
        request2.fail(function(jqXHR, textStatus) {
          alert("Request failed: " + textStatus);
        });
      }
    });

    request.fail(function(jqXHR, textStatus) {
      alert("Request failed: " + textStatus);
    });
  });
});
</script>

HTML

<div class="api-cta-container">
   <p> <%= t("account.settings.api.disclaimer_text_html") %></p>
   <button type="button" id="api_key" class="btn btn-default"><%= 
   t("account.settings.api.add_api_key") %></button>
   <%#= link_to t("account.settings.api.add_api_key"), 
   /account/settings/api_tokens, method: :post, class: "btn btn-default" %>
</div>

<table class="table" id="ajax">
<thead>
    <tr>
    <th><%= t("global.name") %> <</th>
    <th><%= t("global.creation_date") %></th>
  </tr>
</thead>
<tbody>
<% @all_tokens.each_with_index do |token, index|%>
<tr>
    <td><%= (index+1) %></td>
    <td><%= token.created_at %></td>
    <button type="button" class="btn btn-default"><%= t("global.edit") %> <i class="fa fa-sort-desc" aria-hidden="true"><i></button>
    </td>
</tr>
<% end %>
</tbody>

Console中的数据：函数成功后，这是Object中的数据

(4) [{…}, {…}, {…}, {…}]
0:{granted_by: "service", created_at: "2018-07-23T01:06:12.716-04:00", 
time_to_live: 1532927173, refresh_token_expires_at: "2018-07- 
30T01:06:12.714-04:00", client_id: "0f28ad93-d481-47f5-aaec- 
5b9d9b1edff9", …}
1:{granted_by: "service", created_at: "2018-07-23T00:37:29.244-04:00", 
time_to_live: 1532925449, refresh_token_expires_at: "2018-07- 
30T00:37:29.243-04:00", client_id: "0f28ad93-d481-47f5-aaec- 
5b9d9b1edff9", …}
2:{}
3:{}  .........

After Clicking API ButtonAfter Refreshing

Answer 1

$(document).ready(function() {

  $.ajax({
    url: "/account/settings/api_token",
    method: "POST",
  }).done(function(msg) {
    if (msg['status'] == 'success') {
      $.ajax({
        url: "/account/settings/get_all_tokens",
        method: "GET",
      }).done(function(ajax) {
        $('#ajax').html(ajax);
        console.log(ajax);
      }).fail(function(jqXHR, textStatus) {
        console.log("Request2 failed: " + textStatus);
      });
    }
  }).fail(function(jqXHR, textStatus) {
    console.log("Request1 failed: " + textStatus);
  });
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

试试这个。如果这有帮助。或者使用 jQuery.When