AJAX 不适用于移动设备，但它适用于 Chrome 开发者工具

Posted 2023-05-09

【中文标题】AJAX 不适用于移动设备，但它适用于 Chrome 开发者工具

【英文标题】：AJAX isn't working on mobile, but it is on Chrome developer tool

【发布时间】：2016-10-03 16:06:06

【问题描述】：

我正在开发一个客户网站，我遇到了这个问题，即我的 AJAX 调用无法在我网站的移动设备上的特定页面上运行。 Page having issues. 似乎页眉和页脚只有在手机本身上才有问题。然而，它在 Chrome 开发者工具中看起来不错。 我无法在浏览器上重现此问题，因此我不确定如何诊断此问题。任何建议将不胜感激！您可以转到http://store.arsnet.com/，然后单击一个类别，然后是特定类别，然后是产品来访问此页面。

谢谢。如果您需要任何其他信息，请随时询问。

这是具体的 AJAX 调用：

$.ajax(
     url : "/arsweb/DONOTDELETE",
    dataType: "html",
    success : function (data) 
        var html = $.parseHTML(data);
        //alert("working");
        $("div#search").prependTo($("#centerMainColumnPadding"))

        $("#HeaderOnePaddingWrap").html( $(html).find( 'div.skin_width.clearafter:eq(0)' ).html());
        $("#HeaderOnePaddingWrap").append('<div style="clear:both"></div>');
        //alert($(html).find( 'section#skin_header' ).html())
        //alert($("#siteHeadmiddle").html());
        $("#siteHeadmiddle").before('<div id="sf_nav"></div>');
        $("#sf_nav").html( $(html).find( 'section#skin_header' ).html());


        $("span#dnn_arsheader_dnnSEARCH_ClassicSearch").parent().hide();

        $("div#search").prependTo($("#searchcontainer"));


        $("#arssocialmedia").insertAfter($("#standardMenu"));
        $(".menu_box").css("width":"100%","padding-bottom":"10px");

        $("#siteFootouter").html( $(html).find('footer.footer_bg').html());

        $(".bottomRightHeader").prependTo($('.icons_menu'));

        $(".wp_newCart").insertAfter($('#userAccountInfo'));

        //$("#centercart").appendTo("#skin_topLeft");


        $("#arssocialmedia").find("img[alt^='Linked']").attr("src","wp/ars/linkedinicon.png");
        $("#arssocialmedia").find("img[alt^='Facebook']").attr("src","wp/ars/facebookicon.png");
        $("#arssocialmedia").find("img[alt^='Google']").attr("src","wp/ars/googleplusicon.png");
        $(".mobile_nav").find("img[alt^='Menu']").attr("src","wp/ars/btn_menu.png");
        $(".site_logo").find("img[alt^='American']").attr("src","wp/ars/arslogo.png");

        $(".mobile_nav").click(function()
                    $("#standardMenu").slideToggle("fast");
        );




        checkSize();
        $(window).resize(checkSize);


        function checkSize()
            if ($("#wp_checkout").css("float") == "none" )
                $("#standardMenu").hide();
                $(".menu_box").css("width","100%");
                $("#arssocialmedia").wrap('<div id="m_nav_wp"></div>');
                $(".mobile_nav").prependTo($("#m_nav_wp"));
                $("#m_nav_wp").css("padding-bottom","5px").append("<div style='clear:both;'></div>");
                //$("#m_nav_wp").insertBefore("#StandardMenu");

                $(".subMenu").find("span").addClass("navhover");
                $(".subMenu").find("li").addClass("navhover");
                   $("td.label").css("color","black;");

                   $("#m_nav_wp").insertBefore($('.menu_box'))


                 var numCartItems = ($("#numberOfCartItems").text())

                if (numCartItems == 0) 

                    $("#displayCheckout").css("color","#CCC");

                 


                $("#searchcontainer").wrap('<div style="clear:both; width:100%; text-align:center;" id="searchcontainer_wrap"></div>');
                $("#searchcontainer_wrap").append('<div style="clear:both;"></div>')
                //$("#searchcontainer").css("float","none");
                //$("#searchcontainer").css("margin","0 auto !important");                  

            



        




        var config = 
        sensitivity: 2,
        interval:110,
        over: HoverOver,
        timeout:110,
        out: HoverOut
        ;
        var configsub = 
        sensitivity: 2,
        interval:110,
        over: HoverOversub,
        timeout:110,
        out: HoverOutsub
        ;
        var configsubsub = 
        sensitivity: 2,
        interval:110,
        over: HoverOversubsub,
        timeout:110,
        out: HoverOutsubsub
        ;

        if ($(window).width() >= 992)
            $("#standardMenu .rootMenu > li.haschild").hoverIntent(config);
            $("#standardMenu .subMenu li.haschild").hoverIntent(configsub);
            $("#standardMenu .subMenu li li.haschild").hoverIntent(configsubsub);       
        else if ($(window).width() < 992)
            $("#standardMenu .rootMenu > li").each(function(i)
                var i = i + 1;
                $("#standardMenu li.child-"+i+" .navarrow").click(function(event) 
                  event.preventDefault();
                  $("#standardMenu li.child-"+i+" .subMenu").slideToggle(100);
                  $(this).toggleClass("navarrow2"); return false;
                ); 
            );
        

       // For Win8 Tablet
       $('#standardMenu .haschild li').attr("aria-haspopup","false");
       $('#standardMenu .haschild li').attr("role","menu");
       $('#standardMenu .haschild').attr("aria-haspopup","true");
       $('#standardMenu .haschild').attr("role","menuitem");

    ,error : function (a,b,c) 
        console.log(arguments);

    

); 

【问题讨论】：

您在移动设备上看到任何错误吗？您可以尝试使用 Chrome 开发者工具并模拟手机来查看任何错误，也可能有助于调试您的问题。

页面的哪一部分使用了 AJAX？什么代码在进行 AJAX 调用？您是否收到任何具体错误？ “不工作”是不够的。

developers.google.com/web/tools/chrome-devtools/debug/… => 查看此页面以查看您在手机浏览器甚至应用程序 (webview) 环境中遇到的错误。

标题是它收到我相信的错误的地方。 ajax 调用在 wp_Footer.jsp

我在 chrome 开发者工具中没有收到任何错误，因为我无法在 Chrome 上产生问题，只能在物理设备上产生。

【参考方案1】：

我能够使用 Safari 开发者工具重现该问题。 我发现我的 jQuery 中有语法错误。

这很奇怪，因为我确保其他浏览器没有被缓存。 所以我想我会将 Safari 添加到我的有用开发者工具列表中。