jQuery Mobile:传递参数并动态加载页面内容

时间:2012-07-02 14:56:53

标签: jquery jquery-mobile parameters

我知道这是一个基本问题,但我无法找到适合我情况的任何事情。

我有一个带有元素列表的jQuery Mobile页面。元素引用第二个页面,其内容取决于所选择的元素(例如文章列表并选择应显示相关文本的文章)。基本上我必须在页面之间传递参数。

我试图用AJAX做到这一点:

$.ajax({
    url : "index.html#page2",
    data : "id="+id,    
    dataType : 'json'
    type: "GET"
});

但我无法在第二页获得结果。

我该怎么做?

1 个答案:

答案 0 :(得分:1)

通过您的网址查看:index.html#page2。您正尝试导航到内部页面(已在DOM中的页面)。如果是这种情况,那么在#page2上的JavaSCript中创建逻辑,当您链接到#page2时,将id值保存在#page2上的JavaScript可以变量的变量中访问。

类似的东西:

<ul data-role="listview" id="myList">
    <li>
        <a href="#page2" data-id="987">This is some fake text... Click for More</a>
    </li>
</ul>
<script>
$(document).delegate('#page1', 'pageinit', function () {

    //bind to click event for all links in the `#myList` UL
    $(this).find('#myList').find('a').bind('click', function () {

        //save the ID of this list-item to a global variable so it can be used later
        window.myId = $(this).attr('data-id');
    });
});
$(document).delegate('#page2', 'pageshow', function () {

    //get the ID saved as a global variable
    var currentId = window.myId;

    //now do logic for second page
});
</script>

以下是演示:http://jsfiddle.net/jasper/wFdet/