Question

$("#home").on("pageload", function() {
    console.log("test2");
    var url = window.location.search;
    var split = url.split('=');
    var vendorID = split[1];
    $.ajax({
        type: "POST",
        url: "vendorpull.php",
        data: 'id=' + vendorID,
        cache: false,
        success: function(data) 
        {
            document.getElementById('vendor-data').innerHTML = data;
        }
    });
});

除非页面在物理上刷新，否则此代码似乎不会被触发。我已尝试过网页显示，pagebeforeshow和其他内容，但它并没有改变。测试console.log甚至没有触发。加载vendor.html？id = 1后，应立即触发此事件，即导航到包含上述AJAX代码的页面。有什么建议吗？

Answer 1

$("#home").ready(function() { //You can also use $(document).ready(function() {
    console.log("test2");
    var url = window.location.search;
    var split = url.split('=');
    var vendorID = split[1];
    $.ajax({
        type: "POST",
        url: "vendorpull.php",
        data: 'id=' + vendorID,
        cache: false,
        success: function(data) 
        {
            document.getElementById('vendor-data').innerHTML = data;
        }
    });
});

Answer 2

这个jQuery Mobile 1.4.5代码将为每次访问页面重新加载数据：

$(document).on("pagecontainerbeforeshow", function(e, ui) { 
    var pageId = $(":mobile-pagecontainer").pagecontainer("getActivePage").prop("id");
    /* JQM NAVIGATE #2 */
    if (typeof ui.toPage == "object") {
        /* manipulate page navigating to */
        switch (pageId) {
            case "home":
                var url = window.location.search;
                var split = url.split('=');
                var vendorID = split[1];
                $.ajax({
                    type: "POST",
                    url: "vendorpull.php",
                    data: 'id=' + vendorID,
                    beforeSend: function() {
                        $.mobile.loading("show");
                    },
                    cache: false,
                    success: function(data) {
                        $("#vendor-data").html(data);
                        $("#home .ui-content").trigger("updatelayout");
                    },
                    complete: function() {
                        $.mobile.loading("hide");
                    },
                    error: function() {
                        $.mobile.loading("hide");
                    }
                });
                break;
            default:;
        }
    }
});

jQuery Mobile页面加载代码，params没有触发

2 个答案: