在jQuery mobile中將json數據顯示為列表

Question

我正在嘗試從我的數據存儲區中檢索Staff實體列表，然后將其顯示為我的jQuery移動應用程序中的列表。 當我從瀏覽器本地測試它時，它顯示數據就像這樣：

[{"ID": "67", "Name": "Stevie Gerrad"},{"ID": "100", "Name": "Christiano Ronaldo"}]

但是，當我從我的jQuery移動應用程序嘗試它時，沒有任何反應。雖然沒有任何錯誤，我得到狀態代碼：

Status Code: HTTP/1.1 200 OK.

在我的Python代碼中，我有：

class Staff(ndb.Model):
    staff_id=ndb.IntegerProperty(required=True)
    staff_name=ndb.StringProperty(required=True)

def asJSONString(self):
    return '{"ID": "%s", "Name": "%s"}' % (self.staff_id, self.staff_name)

 def toTableRow(self):
     return "<tr><td>" + self.staff_id + "</td><td>" + self.staff_name + "</td></tr>"

class StaffHandler(webapp2.RequestHandler):
    def get(self):
        staff_id=self.request.get('id')
        callback=self.request.get('callback')
        staff=Staff.get_by_id(staff_id)

    if staff:
        self.response.write("A member with this id already exists")
    else:
        s_id = int(self.request.get('id'))
        s_name= self.request.get('name')
        staff=Staff(id=s_id, staff_id=s_id, staff_name=s_name)
        staff.put()
    if callback:
            self.response.write(callback + '(' + staff.toJSON() + ')')
    else:
            self.response.write(staff.toJSON())


   def getStaffList(callback):
      members_of_staff =  Staff.query()
      strList=""
      for staff in members_of_staff:
       if len(strList) > 0:
        strList+= ',' + staff.asJSONString()
    else:
        strList=staff.asJSONString()
     if callback=='':
        return '[' + strList + ']'
    else:
        return callback+ '([' + strList + ']);'

    class StaffViewHandler(webapp2.RequestHandler):
       def get(self):
          callback=self.request.get('callback')
          self.response.headers["Content-Type"] = "application/json"
          self.response.out.write(getStaffList(callback))


  app=webapp2.WSGIApplication([

    ('/staff',StaffHandler),
    ('/viewStaffList', StaffViewHandler)

    ], debug=True)

然后在我的staff.js文件中，我做了類似這樣的事情：

viewMembersURL = "http://localhost:8030/viewStaffList";

$ (document).ready(function() {

   $("#showMembers").bind('click', function(event) {
    event.preventDefault();
    doViewMembersRequest();

    });
 });

 function doViewMembersRequest() {
     $.ajax({
         type: "GET",
         url: viewMembersURL,
         async: true,
         jsonpCallback: 'handleResults',
         contentType: "application/json",
         dataType: 'jsonp'

    });
  }

 function formatStaffList(members) {
    var html = "<li><div>";
     html+="<p><strong>" + members.id + "</strong></p>" +
     "<h5>" + member.name + "</h5>";
      html+="</div></li>";
        return html;
    }

 function handleResults(members) {
    var i, list="";
     for (i=0; i<members.length; i +=1) {
      list+=formatStaffList(members[i]);
   }
    displayMembers(list);
   }

   function displayMembers(list) {
      $("#staff_members").html(list).listView();
   }

最后，我的staff.html代碼部分，我想在點擊按鈕時顯示列表：

<div data-role="content">
    <ul data-role="listview" data-theme="b" data-inset="true">
        <a href="#" id="showMembers" data-role="button" data-theme="b">Show Members</a>
    </ul>
    <ul id="staff_members" data-role="listview" data-inset="true">
        <!--Members list to go in here-->
    </ul>
</div>

我真的很感激對此的第二個想法。

更新：

我運行了幾個測試，看看我是否只能顯示名稱。有些人，我設法讓listview顯示：

顯示的項目數與我的數據存儲區中的實體數相匹配。 這意味着與服務器的通信很好。 我認為問題就在於此

html+="<h5>" + members.name + "</h5>";

member.name沒有返回任何內容（使用console.log（）測試）。

如果我改變它只是

html+="<h5>" + members + "</h5>";

我得到： [object Object]顯示在listview中。 這告訴我從數據存儲區返回對象而不是我預期的字符串。

Answer 1

源代碼看起來都不錯。 消除過程有助於了解可能是一個微妙的問題。 通過在staff.js中的函數中插入console.log（'message'）或alert（'message'）調用來跟蹤代碼的執行，同時附加您希望看到的數據以驗證您的設計。 我使用與json而不是jsonp一起使用的類似代碼，因此這可能是一個因素。

Answer 2

創建HTML時，h5標記未正確關閉。

function formatStaffList(members) {
var html = "<li><div>";
 html+="<p><strong>" + members.id + "</strong></p>" +
 "<h5>" + member.name + "</h5>"
  html+="</div></li>";
    return html;
}

Answer 3

我認為問題可能是對id的草率處理。 您將它作為字符串從請求中拉出來，然后使用想要整數的get_by_id() 。 並且您將staff_id存儲為IntegerProperty但在構建字符串時從不將其轉換為字符串。 妥善照顧。 使用日志記錄確保您獲得每個進程所期望的結果。

Answer 4

Phew。在FireBug的幫助下，我終於開始工作了。我注意到在右下角顯示了這個：

我突然想到需要提供json對象的密鑰，而不是我在數據存儲區中的變量。 而不是

html+="<h5>" + members.name + "</h5>";

它必須是

html+="<h5>" + members.Name + "</h5>";

要么

html+="<h5>" + members.ID + "</h5>";

問題解決了。 Name似乎是一個關鍵字，所以我只是將其更改為其他內容。

結果現在正是我想要的。