0

我正在制作一个有两个页面的jQuery Mobile / Phonegap应用程序。第一页有一个搜索输入，用户可以在其中添加书名或作者，然后第二页是根据与给定值匹配的数量显示结果的位置。

到目前为止，我已经设法从搜索输入中获取值，并成功接收到第二页中的值。

我的 jQuery 代码在外部文件上，并被添加到 jQuery.js 和 jQuerMobile.js 之间的 index.html 文件中

     //this is from the first page
    // capture the user input, and change page to search_results.html
    function handlePageChange() {
        if ($('#search-1').val().length > 0) {
            $.mobile.changePage('search_results.html', {
                dataUrl : "search_results.html",
                data : {
                    'input' : $('#search-1').val()
                },
                reloadPage : false,
                changeHash : true
            });
        } else {
            alert('Search input is empty!');
        }
    }



     //Handle the page-change action after user has pressed the button = changePage
        $(document).on('pagebeforeshow', "#index", function() {
            $(document).on('click', "#changePage", handlePageChange);
        });

 //this is from second page     
// get data from search input form index.html 
    function getSearchValue() {
        var parameters = $(this).data("url").split("?")[1];

        parameter = parameters.replace("input=", "");
        alert(parameter);

    }

    //Trigger after page is loaded
    $(document).on('pageshow', "#search_results", getSearchValue);

但我被困在两件事上。首先看一下 jQueryMobile，它让我感到困惑，好像使用哪个事件来使用我的 ajax 调用 API。

我是否应该只是现有事件侦听器的另一个回调函数pageshow。

然后我想listview用 Google Books API 的结果填充我的结果，但我找不到任何好的例子。

至少，我想listview用缩略图和标题显示书籍，当有人点击其中一本书时，它将转换到另一个页面，在其中显示有关该书的更多详细信息。

我怎么能根据id来做到这一点。

即使没有代码的概念也受到欢迎。谢谢

4

1 回答 1

1

让我告诉你什么是正确的方法，至少在创建 jQuery Mobile 应用程序时是这样。

  1. 你的第一页应该有一个表单，至少如果你有更多的输入元素。但你甚至可以在没有它的情况下工作。

  2. 您将需要一个按钮元素来初始化搜索。单击按钮时，您将触发 ajax 加载程序并启动 ajax 调用。成功检索结果后，才启动页面更改。同时，您的结果将存储在本地存储或某个全局变量中。

  3. 在显示第二页之前，可能在 pagebeforecreate 事件中，您将从本地存储或全局变量中读取内容并将新内容附加到第二页。此时您将隐藏页面加载器。

基本上这个过程必须在第一页完成，因为如果检索到的结果是空的或者你收到一个错误，你必须通知用户没有任何数据可以显示。页面转换也将是平滑的。此外，如果所有内容都在第二页上完成，则很有可能在页面已显示时附加您的内容，这可能会使应用程序用户感到困惑。

我为以前的答案创建了一个类似的工作示例，我正在联系 php 服务器而不是 google 服务，但也使用了 $.ajax 调用，因此您可以复制很多可能的代码。

示例可以在这里找到：jQuery Mobile：将数据从一个页面发送到另一个页面，有 2 个示例，您应该查看第二个示例：用户身份验证演示。

于 2013-05-27T14:23:01.703 回答