0

我正在使用 jqm Ajax 方法从服务器获取数据，但是当从 page1 更改为 page2 并单击 Refresh 时，它不会再次更新。唯一的解决方案是退出浏览器并重新打开它并再次访问该网站。有人可以帮助我吗？

这是代码：

第 1 页：

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Page1</title>
        <link rel="stylesheet"  href="css/themes/default/jquery.mobile-1.3.0.css">
        <link rel="stylesheet" href="_assets/css/jqm-demos.css">
        <link rel="stylesheet" href="_assets/css/wechat-mobile-custom.css">
        <script type="text/javascript" src="js/jquery.js"></script>
        <script type="text/javascript" src="js/jquery.mobile-1.3.0.js"></script>
        <script type="text/javascript" src="js/jquery.params.js"></script>

        <script type="text/javascript">
            $(document).ready(function(){
                $.ajax({
                        url:"/gzdaxun/promotion/intf3_001action.action?newProductForJson=null",//get data from servers
                        dataType:"json",
                         beforeSend: function() {
                            $.mobile.showPageLoadingMsg(true); // This will show ajax spinner
                        },
                        complete: function() {
                             $.mobile.hidePageLoadingMsg(); // This will hide ajax spinner
                        },
                        success:function(result){
                            var newProduct = result.newProduct;
                            $.each(newProduct, function(index, item){
                                var itemId = item.id;
                                $("#list1").append('<li><a href="page2.html?id='+itemId+'"><h1>'+item.name+'</h1></a></li>');
                            });
                                $("#list1").listview("refresh"); 
                        },
                        error:function(){
                            alert("Error! Please try again!");
                        }
                    });
            });

            $(document).on("pagebeforeshow","#page2",function(){
                $.ajax({
                        url:"/gzdaxun/promotion/intf3_001action.action?newProductForJson=null",
                        dataType:"json",
                         beforeSend: function() {
                            $.mobile.showPageLoadingMsg(true); // This will show ajax spinner
                        },
                        complete: function() {
                             $.mobile.hidePageLoadingMsg(); // This will hide ajax spinner
                        },
                        success:function(result){
                            var newProduct = result.newProduct;
                            $.each(newProduct, function(index, item){
                                $("#list2").append('<li><a href="#"><h1>'+item.name+'</h1></a></li>');
                            });
                                $("#list2").listview("refresh"); 
                        },
                        error:function(){
                            alert("Error! Please try again!");
                        }
                    });
            });
            </script>
    </head>

    <body>

        <div data-role="page" id="page1">
            <div data-role="content" >
                <ul data-role="listview" id="list1"></ul>
            </div>
        </div>

    </body>
  </html>

第2页：

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Page2</title>
</head>

<body>
        <div data-role="page" id="page2">
        <div data-role="content" >
            <ul data-role="listview" id="list2"></ul>
        </div>
        <script type="text/javascript">
        </script>
    </div>

</body>
</html>
4

1 回答 1

1

来自 jQuery Mobile 文档：

重要提示：使用 $(document).bind('pageinit')，而不是 $(document).ready()

在 jQuery 中学习的第一件事是调用 $(document).ready() 函数中的代码，以便在加载 DOM 后立即执行所有内容。但是，在 jQuery Mobile 中，Ajax 用于在您导航时将每个页面的内容加载到 DOM 中，并且 DOM 就绪处理程序仅针对第一页执行。要在加载和创建新页面时执行代码，您可以绑定到 pageinit 事件。此事件在本页底部有详细说明。

所以改变你$(document).ready()的$(document).bind('pageinit')，它应该工作。

于 2013-07-23T02:59:07.040 回答