Ajax仅在刷新页面后从javaScript获取数据并加载菜单

Ajax fetches data and loads menu from javaScript only after refreshing page

本文关键字：获取 javaScript 数据 菜单 加载 刷新 Ajax      更新时间：2023-09-26
$('#subregionListPage').bind('pageinit', function(event){

    var output = $('#subregions');
    var region = getUrlVars()["reg"];
    $.ajax({
        url: 'http://localhost:8888/my/getsubregions.php',
        dataType: 'jsonp',
        cache: false,
        data: {reg: region},
        jsonp: 'jsoncallback',
        timeout: 5000,
        success: function(data, status){
            var out = '';
            $.each(data, function(i,item){ 
                out += '<li><a href="subregions.html">' + item.subregion.capitalize() + '</a></li>';
            });
            output.append(out);
            output.trigger('create');
            output.listview('refresh');
        },
        error: function(){
            output.text('There was an error loading the data.');
        }
    });
});
String.prototype.capitalize = function() {
    return this.charAt(0).toUpperCase() + this.slice(1);
}
function getUrlVars() {
    var vars = [], hash;
    var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
    for(var i = 0; i < hashes.length; i++)
    {
        hash = hashes[i].split('=');
        vars.push(hash[0]);
        vars[hash[0]] = hash[1];
    }
    return vars;
}

所以这个代码的问题是，它创建列表不是页面最初加载后，但在它加载和刷新后，我已经尝试了很多东西，但没有一个工作。另外，这是调用脚本的html代码。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css">
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div id="subregionListPage" data-role="page">
    <script src="getsubregions2.js"></script>
    <div data-role="header" data-position="fixed">
        <h1>Select Sub Region</h1>
    </div>
    <div data-role="content">
         <ul id='subregions' data-role="listview"></ul>
    </div>      
</div>
</body>
</html>

根据建议更新代码:

    $(document).on('pagecreate', '#subregionListPage', function(event){
    var output = $('#subregions');
    $.ajax({
        url: 'http://localhost:8888/my/getsubregions.php',
        dataType: 'jsonp',
        cache: false,
        data: {reg: $.urlParam('reg')},
        jsonp: 'jsoncallback',
        timeout: 5000,
        success: function(data, status){        
            var out = '';
            $.each(data, function(i,item){ 
                out += '<li><a href="subregions.html">' + item.subregion.capitalize() + '</a></li>';
            });

            output.append(out);
            output.trigger('create');
            output.listview('refresh');
        },
        error: function(){
            output.text('There was an error loading the data.');
        }
    });
});
String.prototype.capitalize = function() {
    return this.charAt(0).toUpperCase() + this.slice(1);
}
$.urlParam = function(name){
    var results = new RegExp('['?&]' + name + '=([^&#]*)').exec(window.location.href);
    if (results==null){
       return null;
    }
    else{
       return results[1] || 0;
    }
}

你的代码到底发生了什么:

场景
  • 第一次加载页面时，元素#subregionListPage到目前为止还不存在于DOM中。在元素上附加pageinit事件的处理程序是在元素渲染之前完成的。
  • 下一次重新加载页面时，由于事件处理程序先前附加到#subregionListPage上的pageinit事件，处理程序被触发。

引用自jQuery关于.bind()的文档:

处理程序被附加到jQuery对象中当前选择的元素，所以这些元素必须在调用.bind()时存在。

.bind()是jQuery实现中的一个较老的方法(在1.0版本中添加)。它不如.on()方法灵活，因为使用.on()可以将事件处理程序附加到当前甚至不存在于DOM中的元素。

这可以通过将事件处理程序附加到超级父元素(例如document)，并且当特定的子元素触发事件时，事件传播(气泡)到该父元素。最终，在子进程的上下文中附加到父进程的事件处理程序将在事件到达父进程时被触发。

解决方案

将.bind()替换为on()，如下:

$(document).on('pageinit', '#subregionListPage', function(event){
   /* ... */
}

注意:自jQuery v1.4起，pageinit事件已被弃用。在这种情况下，建议使用的事件是pagecreate。

更新如前所述，在div中绑定pagecreate事件的脚本必须在创建时触发它: 
<div id="subregionListPage" data-role="page">
     <script src="getsubregions2.js"></script>
     <!-- rest of your HTML -->

这里发生的事情是，在初始加载HTML时，div #subregionListPage存在，但它的事件绑定不存在-因为此所需的Javascript代码尚未运行，并且没有注册处理程序来捕获由它触发的pagecreate事件。

将脚本移动到HTML的<head>中，以便您的JS在第一次加载页面时准备好绑定#subregionListPage的特定处理程序。

您是否尝试将代码放在$(document).ready(function(){})中，如果是，然后尝试在success函数后放置alert，看看alert是否在页面加载时起作用

相关文章：