在 jquery 的 pageshow 事件中调用 Web api

Call an web api in pageshow event of jquery

本文关键字：调用 Web api 事件 jquery pageshow      更新时间：2023-09-26

我正在编写一个基于JqueryMobile和jquery的Web应用程序。我的索引中有三个数据页.html .我正在第一页中调用页面显示数据页面事件中的 Web api，并填写列表视图。然后，通过单击该列表，ITAM 获取该列表项的 ID，然后移动到下一页并再次调用 Web API 以获取页面显示事件中该列表项的详细信息。然后我再次从详细信息页面移动到第 3 页以调用另一个 API。一切正常，但是当我回到详细信息页面，然后从详细信息页面移动到索引页面时，问题出现了。向后移动页面显示页面的事件再次调用，并且再次调用所有页面中的 API。如果我使用 oncrete，那么它只会第一次调用 api。任何机构都可以告诉我如何在这种类型的结构中调用 api。

看看这个小提琴：

http://jsfiddle.net/ezanker/tAB7x/ <小时 />

有不同的方法可以解决您的问题，这只是其中之一......

我已经将用于填写初始列表的 web api 放在第一页的"pageinit"中。 当您加载页面时，这将只运行一个。如果需要刷新此列表，可以添加刷新按钮。列表中的每个追加项都链接到 page2，其中包含包含项 ID 的查询字符串。 然后添加列表视图项的单击处理程序，以获取单击项的 ID 并从 Web api 填写详细信息表单 （page2）（在示例中，我只是将 id 写入第 2 页的文本框）。

$('#page1').on('pageinit', function () {
    //get list from web api (hardcoded for this example
    var $ul = $("#dynamicList");
    $ul.append('<li><a href="#page2?id=1" class="detailLink">A</a></li>');
    $ul.append('<li><a href="#page2?id=2" class="detailLink">B</a></li>');
    $ul.append('<li><a href="#page2?id=3" class="detailLink">C</a></li>');
    $ul.listview("refresh");
    $('.detailLink').on('click', function () {
      var l = $(this).attr("href");
      l = l.substring(l.indexOf('?') + 1);
      var id = getUrlVars(l);
      $('#detalText').val(id['id']);
    });
});

Page2 有一个链接到第 3 页的按钮和一个从 Web API 填写第 3 页的单击处理程序（在示例中，我再次只是将 id 写入第 3 页的文本框）：

$('#linkPage2').on('click', function () {
    var id = $('#detalText').val();
    $('#detalText2').val(id);
});

单击任一页面上的后退按钮时，不会运行任何代码，并且会保留页面的先前状态。

相关文章：