为什么在通过AJAX加载页面时使用admin-ajax.php?

时间:2017-07-21 作者:Marine Le Borgne

我用过this tutorial 在我的网站上实现ajax页面转换。在查看了一些问题后,我发现在大多数论坛帖子上,人们都建议“使用”admin-ajax.php.

我对此进行了调查,但恐怕我真的不明白它是如何工作的。

这是我的电流page-transition.js, 这已经开始很好地发挥作用了。如果我使用admin-ajax.php, 它真的是“强制性的”吗?

jQuery(document).ready(function (event) {

    // get rooturl via localize script
    var rootUrl = aws_data.rootUrl; 
    var isAnimating = false, 
        newLocation = \'\', 
        firstLoad = false;

    // Internal Helper
    $.expr[\':\'].internal = function(obj, index, meta, stack){
        // Prepare
        var
            $this = $(obj),
            urlinternal = $this.attr(\'href\')||\'\',
            isInternalLink;

        // Check link
        isInternalLink = urlinternal.substring(0,rootUrl.length) === rootUrl || urlinternal.indexOf(\':\') === -1;

        // Ignore or Keep
        return isInternalLink;
    };



    //trigger smooth transition from the actual page to the new one on relevant links
    $(\'main\').on(\'click\', \'a[href]:internal:not(.no-ajaxy,.love-button,[href^="#"],[href="#"],[href*="#respond"],[href*="wp-login"],[href*="wp-admin"])\', function (event) { 
        event.preventDefault();
        //detect which page has been selected
        var newPage = $(this).attr(\'href\');
        //if the page is not already being animated - trigger animation
        if (!isAnimating) changePage(newPage, true);
        firstLoad = true;
    });
    //detect the \'popstate\' event - e.g. user clicking the back button
    $(window).on(\'popstate\', function (e) {
        if (firstLoad) {
            /*
            Safari emits a popstate event on page load - check if firstLoad is true before animating
            if it\'s false - the page has just been loaded 
            */
            var newPageArray = location.pathname.split(\'/\'), //this is the url of the page to be loaded 
                //newPage = newPageArray[newPageArray.length - 1];
                newPage = window.location.href;
            if (!isAnimating && newLocation != newPage) changePage(newPage, false);
        }
        firstLoad = true;
    });

    function changePage(url, bool) {
        isAnimating = true;
        // trigger page animation
        $(\'body\').addClass(\'page-is-changing\');
        $(\'.cd-loading-bar\').one(\'webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend\', function () {
            loadNewContent(url, bool);
            newLocation = url;
            $(\'.cd-loading-bar\').off(\'webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend\');
        });
        //if browser doesn\'t support CSS transitions
        if (!transitionsSupported()) {
            loadNewContent(url, bool);
            newLocation = url;
        }
    }

    function loadNewContent(url, bool) {

        url = (\'\' === url) ? rootUrl : url; 
        //var newSection = \'cd-\' + url.replace(rootUrl, ""); 
        var section = $(\'<div class="cd-main-content"></div>\');

        $.ajax({url: url, 
            success: function(data){
                data = data.replace("<body", "<container").replace("body>", "container>");
                var classes = $(data).filter("container").attr("class"); 
                $("body").attr("class", classes + " page-is-changing"); 
            } 
        });

        section.load(url + \' .cd-main-content > *\', function (response, status, xhr) {


            // load new content and replace <main> content with the new one
            $(\'main\').html(section);
            //if browser doesn\'t support CSS transitions - dont wait for the end of transitions
            var delay = 1200; 

            //function to execute after dom is loaded
            $(document).foundation();
            makeFooterSticky();
            window.scrollTo(0, 0);
            $(".ajax-load-more-wrap").ajaxloadmore();
            //ga(\'send\', \'pageview\', window.location.pathname);

            setTimeout(function () {
                //wait for the end of the transition on the loading bar before revealing the new content
                $(\'body\').removeClass(\'page-is-changing\');
                $(\'.cd-loading-bar\').one(\'webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend\', function () {
                    isAnimating = false;
                    $(\'.cd-loading-bar\').off(\'webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend\');
                });
                if (!transitionsSupported()) isAnimating = false;
            }, delay);
            if (url != window.location && bool) {
                //add the new page to the window.history
                //if the new page was triggered by a \'popstate\' event, don\'t add it
                window.history.pushState({
                    path: url
                }, \'\', url);
            }
        });

    }

    function transitionsSupported() {
        return $(\'html\').hasClass(\'csstransitions\');
    }
});

1 个回复
最合适的回答,由SO网友:kero 整理而成

你把事情搞混了。您当前正在添加optional 在您的网站顶部分层。对于使用JavaScript的用户,您可以使用自定义事件/效果,而不是依赖浏览器,从而使页面加载看起来有所不同。

管理ajax。当您希望通过AJAX访问特定方法时,php是相关的。像described in the codex, 您可以使用此创建自定义功能。

综上所述:

页面转换脚本是WordPress上的可选插件。编写插件时,如果没有它,站点将正常运行,如果您想进行AJAX调用,请使用admin AJAX。php或REST端点。如果这些被删除,插件将按预期停止运行

结束

相关推荐

在WordPress中的AJAX调用期间调试PHP对象

我在使用WP插件时遇到了真正的问题,因为我似乎无法访问我的PHP数据来查看发生了什么。如果我在PHP函数中添加了任何不喜欢的内容,插件将发出一个ajax调用,该调用将挂起(如下所示)。而不是线路do_action_ref_array( \'bookly_validate_custom_field\', array( $field, &$this->errors, $fields[ $field->id ] ) );我试过了$this->errors[\'custom_fields