在 jQuery mobile 中将 json 数据显示为列表答案

【问题标题】：Displaying json data as a list in jQuery mobile在 jQuery mobile 中将 json 数据显示为列表
【发布时间】：2014-05-18 06:28:38
【问题描述】：

我正在尝试从我的数据存储中检索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] 显示在列表视图中。这告诉我正在从数据存储返回对象，而不是我预期的字符串。

【问题讨论】：

标签： javascript python json google-app-engine jquery-mobile

【解决方案1】：

源代码看起来都不错。消除过程将有助于解决可能是一个微妙的问题。通过在 staff.js 的函数中插入 console.log('message') 或 alert('message') 调用来跟踪代码的执行，同时附加您希望看到的数据以验证您的设计。我使用与 json 而不是 jsonp 一起使用的类似代码，所以这可能是一个因素。

【讨论】：

谢谢 Martin。我会试试这些。出于好奇，我可以对我的代码进行哪些更改以仅使用 json？

【解决方案2】：

h5 标签在创建 HTML 时未正确关闭。

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

【讨论】：

你是什么意思？您发布的内容与我在问题中发布的内容相同
在 member.name 之后检查标记，它没有在您的代码中关闭。
你的意思是分号？
不，我的意思是斜杠 (/) 在 h5 () 之前。现在在你的代码中，它的 member.name + "
" 但正确的应该是 member.name + "
"。基本上，h5 标签需要使用'/'关闭。希望我在这里很清楚。
哦。我正在根据我的原始代码检查您的答案，而不是问题中的代码。我已经修复了这个问题。我将编辑问题以反映这一点。谢谢。

【解决方案3】：

我认为问题可能是对 id 的粗心处理。您从请求中将其作为字符串拉出，然后使用需要整数的get_by_id()。并且您将 staff_id 存储为 IntegerProperty，但在构建字符串时从不将其转换为字符串。好好照顾它。使用日志记录确保您在每个流程中都获得预期的结果。

【讨论】：

是的。您将“members”传递给 formatStaffList，但在未定义的 member.name 中返回“member”。
关于如何克服这个问题的任何建议？我已经尝试了很多诸如members[i].staff_name 之类的方法，但它仍然不起作用。如何在返回成员的情况下访问这些变量？
首先，在formatStaffList中，把两个地方的“members”改成“member”，在函数def中。
现在日志说了什么？你应该更新，这样我们就可以看到你当前的代码是什么样的。
让我们continue this discussion in chat

【解决方案4】：

唷。在FireBug 的帮助下，我终于完成了这个工作。我注意到右下角显示了这个：

我突然意识到需要提供 json 对象的键，而不是我的数据存储中的变量。所以不是

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

应该是

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

或

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

问题解决了。 Name 似乎是一个关键字，所以我将其更改为其他内容。

现在的结果正是我想要的。

【讨论】：

" 但正确的应该是 member.name + "