listview - JQuery 移动 Listview 通过 JSON Ajax 调用填充-6ren

listview - JQuery 移动 Listview 通过 JSON Ajax 调用填充

转载作者：行者123 更新时间：2023-12-02 02:09:03

25

4

我正在尝试用 json 结果填充 ListView 。我已经安装了 fiddler 并且可以确认我确实得到了 json 结果。我积极地验证了 JSON 结果。但是不知何故，它们没有出现在 ListView 中。我似乎无法找出哪里出了问题。

JSON 结果:[{"Id":1,"Title":"电气"},{"Id":2,"Title":"管道"},{"Id":3,"Title":"机械"},{ "Id":4,"Title":"软件"}]

代码:

<!DOCTYPE html>
<head>
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
    <script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.js"></script>
    <style>
    .count {
        position: absolute;
        font-size: 11px;
        font-weight: bold;
        padding: .2em .5em;
        top: 50%;
        margin-top: -1em;
    }

    .ui-li-aside {
        float: right;
        width: 50%;
        text-align: right;
        margin: 1.4em 0px 0px 0px !important;
        position: absolute;
        right: 25px; 
    }

    .ui-li-heading, .ui-li-desc {
        width: 90%;
        text-overflow: ellipsis;
    }

    strong { font-style: normal; }
    </style>

    <script type="text/javascript" >
        var hackerNews = (function($,undefined) {
            var pub = {}, $this = $(this);
            pub.init = function() {
                $("#btnRefresh").live("click", function () {
                    pub.getAndDisplayNews();
                });
                $this.bind("news.updated", function (e, news) {
                    displayNews(news);
                });
                $this.bind("news.updated", function(e, news) {
                    $("#itemCount").text(news.items.length);
                });
            };
            pub.getAndDisplayNews = function() {
                //$.mobile.loading();
                getNews(function () {
                    //$.mobile.loading();
                });
            };
            function getNews(callback) {
                $.ajax({
                    url: "http://localhost:31634/expertREST.svc/GetKnowledgeFields",
                    dataType: "jsonp",
                    success: function (data, textStatus, xhr) {
                        $this.trigger("news.updated", data);
                        if (callback) callback(data);
                    }
                });
            }
            function displayNews(news) {
                var newsList = $("#hackerNews").find(".newsList");
                newsList.empty();
                $("#newsItem").tmpl(news.items).appendTo(newsList).trigger("create");
                newsList.listview("refresh");
            }
            return pub;
        }(jQuery));
        hackerNews.init();
        hackerNews.getAndDisplayNews();
        </script>
</head>

<body>

<div data-role="page" id="hackerNews">
    <div data-role="header" data-backbtn="false">
        <a id="btnRefresh" href="#" data-icon="refresh">Refresh</a>
        <h1>Find-an-Expert &nbsp;<span id="itemCount" class="count ui-btn-up-c ui-btn-corner-all">0</span></h1>
    </div>
    <div id="content" data-role="content">
        <ol class="newsList" data-role="listview"></ol>
    </div>
</div>

<script id="newsItem" type="text/x-jquery-tmpl">
    <li data-messageId="${Id}" class="newsItem">
        <h3>${Title}</h3>
    </li>
</script>

</body>

有人知道吗？谢谢

最佳答案

JSONP 通过将响应附加到 DOM 来工作。在 JSONP 调用期间，JQuery 会自动在 GET 调用中添加一个“回调”参数。然后，您的服务必须以以下格式返回用回调函数包装的结果:

callback(<jsondata>)

这是一个简单的 PHP 示例(在产品中，添加回调名称验证):

// .. prepare result

$callback = $_GET['callback'];
echo $callback.'('. json_encode($result).  ');'; ?>

此外，您对“绑定(bind)”的使用也是错误的，因为将“数据”传递给它只会将第一条记录提供给“displayNews”。通过直接调用函数来简化它:

success: function (news, textStatus, xhr) {
      displayNews(news);
      $("#itemCount").text(news.length);
      if (callback) callback(news);
}

最后，更改您的 displayNews 以遍历列表:

  function displayNews(news) {
        var newsList = $("#hackerNews").find(".newsList");
        newsList.empty();
        $.each(news, function(k,v) {
         $("#newsItem").tmpl(v).appendTo(newsList).trigger("create");
    });
    newsList.listview("refresh");
  }

关于listview - JQuery 移动 Listview 通过 JSON Ajax 调用填充，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13700598/

25

4

0

文章推荐： model-view-controller - 存储库模式 + 工作单元

文章推荐： nfc - NFC/HF 卡是否可以互换？

文章推荐： forms - 在 Drupal 6 中向管理员添加系统变量的编辑功能

Android Listview - 如何在 getview() 覆盖中设置 ListView 。 ListView 采用父布局而不是 ListView
我之前在论坛上发布过这个，但我想我不太清楚。我有一个侧边栏 ListView 和一个包含我的控件的主面板。我想在 oncreate() 中突出显示 listview 中的 Activity 项，因为每
listview - 如何在 ListView 中展开卡片以显示更多数据，甚至是另一个 ListView
这里有没有人知道我如何通过 onTap() 扩展 ListView 项(在本例中为卡片)的内容 - 以显示更多选项？您知道那里有可以提供帮助的酒吧吗？我已经看过了，但我不知道要搜索什么？我相信你们都
listview - 行颜色javafx listview
我的 ListView 控件有问题。我希望我的奇数行和偶数行具有不同的颜色，但我想通过代码而不是 FXML 来实现。例如: 第一行 - 绿色第二行 - 红色第三行 - 绿色第四行 - 红色现在
listview - 如何在javafx中获得透明 ListView ？
我有一个 ListView 。我想让单元格背景透明。目前，我正在做以下事情: .list-cell { -fx-background-color: transparent; } 但是，细胞的颜
listview - flutter 。在非常大的 ListView 上设置 ListView 初始位置
我想创建一个几乎无限的元素列表，但我想将列表的初始位置设置为某个特定元素。像这张图片: 其中索引 0 将是初始位置，并且此列表可能会也可能不会在两个方向上延伸很长。我可以像这样创建我的元素: W
listview - ListView 的可见项
有没有办法在JavaFX中获取ListView的可见项？我想确定 JavaFX 应用程序中 ListView 显示的第一个可见项。以下代码found here不适合我(仅适用于 TableView)
listview - 如何在 ListView 中拉伸(stretch) ListView 项
开发人员。我尝试在水平方向拉伸(stretch) ListView 项目。我确实重置了 ItemContainerStyle ，并且水平对齐是拉伸(stretch)的。这是 MainPage.xam
listview - ListView 的可见项
有没有办法在JavaFX中获取ListView的可见项？我想确定 JavaFX 应用程序中 ListView 显示的第一个可见项。以下代码found here不适合我(仅适用于 TableView)
listview - 如何在Jquerymobile中动态排序 ListView
我想问一下: 我有一个预定义顺序的数组。 var order=new Array(); order[0]="Tesco"; order[1]="Interspar"; order[2]="
listview - Flutter:到达嵌套 ListView 的底部时继续在顶部 ListView 中滚动
我希望创建以下内容:当到达内部 Listview 的顶部或底部时，我想继续在顶部 Listview 中滚动。见动图: Gif of what I got so far 一个选项是在到达底部时将内部 L
listview - ajax后刷新jQuery移动 ListView
我正在尝试在 ajax 发布后刷新 jQuery 移动 ListView ，我一直在尝试使用 .trigger("create") 来执行此操作，如下所示: Most Played
python - ListView 缺少 QuerySet。定义 ListView.model、ListView.queryset 或覆盖 ListView.get_queryset()
我真的不明白是什么导致了错误我检查了文档，这里有一个非常相似的例子是我的 views.py，我使用的应用程序下的 urls.py 包含，以及模板 View .py class SchoolListVi
android - ListView 内的 ListView 和嵌套 ListView 的高度问题
我有这个父布局 parent_listview 的列表项具有这种布局 child_listview 的项目有这个布局
android - Listview setOnItemClickListener - 不适用于自定义 ListView ，但适用于简单 ListView
我在单击列表项时获取 listview 项时遇到问题。我得到了 simple listview(Arrayadapter) 的 listview item，但我遇到了 custom listview
listview - 下拉 ListView
我有一个工作正常的 DropdownMenu，但我需要一个 ListView，但我无法转换它。 DropdownMenu 如下所示: // Create the List of devices t
listview - Flutter:ListView.builder 中的 ListView.builder
我想实现一个可滚动(垂直)且其中包含元素的屏幕。所以我把它放在 listview.builder 上。问题是，其中一个元素是另一个水平滚动的 listview.builder。当我实现它时，horiz
listview - SwiftUI 如果 ListView 中的项目太多，为什么 ListView 中的按钮会停止工作？
帮助!我想不通! 为了帮助我学习 SwiftUI，我正在使用 ListView 制作一个简单的杂货 list 应用程序。点击列表中的每个项目时，有些按钮会变成绿色或红色。在我向列表数组中添加太多项目
android - 具有动态加载图像的 ListView - 如何等待 ListView 加载所有图像，然后显示 ListView
所以我知道我们可以等待 ListView 加载，然后显示它。但是，如果我们动态加载正在下载的图像，ListView 将加载但图像尚未加载，因此它们不会出现在 ListView 中。可接受的等待 Li
android - 如何从自定义 ListView 数组适配器类中的 ListView 中删除行并刷新 ListView 中的剩余项目？
我是 Android 的新手，正在努力提高编程技能。在这里，我有自定义 ListView 适配器类，我曾在其中显示 ListView 项目，如 TextView 、图像等。我需要做的是，我在 Li
java - ListView 适配器行为异常。在我单击同一个 ListView 中的按钮后，ListView 中不相关的按钮被单击
So, what I want is to individually disable a button for the concerned item in the ListView when clic

首页

博学

6Ren·AI

商城

listview - JQuery 移动 Listview 通过 JSON Ajax 调用填充