Ajax 刷新页面时javascript无法工作_Ajax_Jquery_Jquery Mobile

Ajax 刷新页面时javascript无法工作

ajax jquery jquery-mobile

Ajax 刷新页面时javascript无法工作,ajax,jquery,jquery-mobile,Ajax,Jquery,Jquery Mobile,我使用jqmajax方法从服务器获取数据，但是当从page1更改到page2并单击刷新时，它将不会再次更新。唯一的解决办法是退出浏览器并重新打开它，然后再次转到该网站。有人能帮我吗代码如下：第1页： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-

我使用jqmajax方法从服务器获取数据，但是当从page1更改到page2并单击刷新时，它将不会再次更新。唯一的解决办法是退出浏览器并重新打开它，然后再次转到该网站。有人能帮我吗

代码如下：

第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>


第1页
$（文档）.ready（函数（）{
$.ajax({
url:“/gzdaxun/promotion/intf3\u 001action.action？newProductForJson=null”//从服务器获取数据
数据类型：“json”，
beforeSend:function（）{
$.mobile.showPageLoadingMsg（true）；//这将显示ajax微调器
},
完成：函数（）{
$.mobile.hidePageLoadingMsg（）；//这将隐藏ajax微调器
},
成功：功能（结果）{
var newProduct=result.newProduct；
$.each（新产品、功能（索引、项目）{
var itemId=item.id；
$（“#列表1”）。追加（“”）；
});
$（“#列表1”）.listview（“刷新”）；
},
错误：函数（）{
警报（“错误！请重试！”）；
}
});
});
$（文档）。在（“pagebeforeshow”上，“#page2”，函数（）{
$.ajax({
url:“/gzdaxun/promotion/intf3\u 001action.action？newProductForJson=null”，
数据类型：“json”，
beforeSend:function（）{
$.mobile.showPageLoadingMsg（true）；//这将显示ajax微调器
},
完成：函数（）{
$.mobile.hidePageLoadingMsg（）；//这将隐藏ajax微调器
},
成功：功能（结果）{
var newProduct=result.newProduct；
$.each（新产品、功能（索引、项目）{
$（“#列表2”）.append（“”）；
});
$（“#列表2”）。列表视图（“刷新”）；
},
错误：函数（）{
警报（“错误！请重试！”）；
}
});
});

第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>


第2页

来自jQuery移动文档：

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

在jQuery中学习的第一件事是调用 $（document）.ready（）函数，以便在 DOM已加载。但是，在jQuery Mobile中，Ajax用于加载导航时，将每个页面的内容导入DOM，并准备好DOM 处理程序仅对第一页执行。每当加载并创建新页面后，可以绑定到pageinit事件。本页底部详细解释了此事件

因此，将您的

$（document）.ready（）

更改为

$（document）.绑定（'pageinit'）

，它应该可以工作。

将

$（document）.ready（function（）{/code>替换为$（document）.在（'pagebeforeshow'，'#page1'，function（）
）上，永远不要将.ready
与jQM一起使用。