從用戶個人資料頁面僅需要為用戶拉一個JSON字符串並使用jQuery顯示

Question

我只需要從一個案例中的數據庫中拉出單個用戶，我正在嘗試實現以下流程：

• 從顯示所有用戶的頁面開始（我已完成）
• 點擊特定的用戶
• 然后它導航到我試圖呈現該特定用戶的所有數據的頁面。

目前，我正在為所有用戶頁面創建的循環之外對其進行建模。 我知道我需要擺脫循環，但是我不確定如何顯示相同的信息。 我需要幫助弄清楚要使用什么，而不是下面的循環。 第二組文本向您顯示我已經擁有的內容（包括循環）。 謝謝！

    $(document).ready(function () {
      $.ajax({
      url: "http://.../getaccount",
      type: 'GET',
      dataType: "json",
      data: {
        'account': 'all'
    },
    // once json data is retrieved with the get request using ajaax then display teh following table rows.
    }).then(function (data) {
    // for loop for looping through th elenght o fth json data
    for(var i = 0; i < data.accounts.length; i++){
        // creates the table row every time a new instance is created
        $('#myTable tbody').append("<tr>");
        // pulls image source for each individule user and displays it 
        $('#myTable tbody').append("<td class=\"photo_url\">" + ("<img src='" + data.accounts[i].photo_url + "'/>") + "</td>");
        // displays Turbo user name in a new instance of a user
        $('#myTable tbody').append("<td class=\"user_id\">" + data.accounts[i].user_id + "</td>"); 
        // displays user real name in  
        $('#myTable tbody').append("<td class=\"name\">" + data.accounts[i].name + "</td>");
        // displays individule session token for each user.
        $('#myTable tbody').append("<td class=\"session_token\">" + data.accounts[i].session_token + "</td>");
        // $('#myTable tbody').append("<td class=\"photo_url\">" + data.accounts[i].photo_url + "</td>");   
        $('#myTable tbody').append("</tr><br>"); 
    }
});

console.log('finished');
});

    $(document).ready(function () {
$.ajax({
    url: "http://.../getaccount",
    type: 'GET',
    dataType: "json",
    data: {
        'account': 'all'
    },
    }).then(function (data) {
    // for loop for looping through th elenght o fth json data
    for(var i = 0; i < data.accounts.length; i++){
        // i need to find a way to pull the user data from 
        // the indivifule and not  on  loop possibly using the 
        // $(this) method 
        $('body .head').append("<div class=\"photo_url\">" + ("<img src='" + data.accounts[i].photo_url + "'/>") + "</div>");
        $('body .head').append('<h1 class="user_id">'+ data.accounts[i].user_id + '</h1>');
        // finding total matches but using dummy data for now.
        // $('body .sideUl').append('<li class="total_matches">' + data.account[i].total_matches +'</li>');
        $('body .sideUl').append('<li class="total_matches">' + "Total Matches" +'</li>');
        // same thing as above: code is ready to be run but not set up on the server right meow.
        // $('body .sideUl').append('<li class="total_wins">' + data.account[i].total_wins +'</li>');
        $('body .sideUl').append('<li class="total_wins">' + "Total Wins" +'</li>');
    }
});
    console.log("got info")
});

Answer 1

首先，我同意@Zihao，這是一個很好的建議。 +1。 我的方法在某些方面可能是相似的，但我將以不同的方式進行說明。

請回答編號的問題：

1.（對我而言）確認兩個頁面的第一次AJAX調用都已擁有所需的所有數據。 是還是不是？ 如果是，則避免重復通話是件好事。 我們可以探討您的選擇。 如果否，則指定第二個呼叫應獲取的內容。 例如，API可能不正確。

我將這些分開：

是的，您將在首頁請求中獲得所需的所有數據。 然后，單擊-現在您知道所選的用戶，並擁有該用戶的所有數據。 是？ 是!

從那里開始的挑戰是-如何將數據獲取到詳細信息頁面-這取決於您的體系結構。

* a）如果您使用的是單頁應用程序（SPA）或MVC，*這變得不那么重要了，我們只需要將用戶的ID（唯一標識符）傳遞給新的布局（例如函數參數），並它從存儲的結果（模型）中提取數據（使用ID參數），然后將該布局（視圖）呈現到屏幕上。

但是...從您的問題中有些暗示，我認為您現在正在搖頭。 SPA會是您理想的選擇。 但是如果沒有，我們繼續...

2.確認（對我而言）單頁應用程序體系結構或MVC，例如Backbone.js？ 或其他任何js框架，請。

b）如果您的頁面是從服務器呈現的（就像大多數Java語言一樣），則可以在URL末尾使用查詢字符串參數告訴該頁面請求了哪個用戶。 看起來像這樣：

http://www.example.com/userpage.html？user = 12345

但是同樣，這可能不是您的體系結構。 確認是否

c）另一種選擇是服務API錯誤，或者您對它的調用錯誤。

對於這種問題，有一個常見的模式稱為“主/詳細”模式。 這個想法是，用戶列表是“主用戶”，而單個用戶是“詳細信息”。

也許，而不是要求額外的數據的兩倍，這應該是兩個AJAX調用，但兩個不同的電話-一個為所有用戶：

data: {
    'account': 'all'
},

然后是一秒鍾的具體數據：

data: {
    'account': data.accounts[i].user_id
},

我希望這是答案。 您可以通過在此時將真實ID復制並粘貼到代碼中來測試此解決方案，例如：

data: {
    'account': '123real-id456'
},

並查看數據是否返回。 :)

3）在chrome開發工具中使用逐步調試器。 這是關鍵。 因為您只需單擊或將鼠標懸停在“數據”對象上即可查看所有數據。

您可以通過鍵入debugger輕松獲得此信息：

}).then(function (data) {
  debugger;

當您在“源”選項卡上時，這將凍結該行代碼的執行，然后您可以查看數據內容並知道您是否進行了正確的調用。 如果用戶呼叫正常，則應該沒問題。 但是，如果跳過斷點，則調用可能會悄悄地從服務器返回錯誤。

投資時間googlin是一個關於chrome step-debugger的教程是一個好主意。

4）請確認上面的代碼在單獨的文件中？ 如果所有代碼都在一個js或html中，則我們需要討論其他內容。 但是我沒有看到任何點擊處理程序，因此我猜不是這樣。

希望能有所幫助。