如何正确实现自定义ajax

Question

为了保持 logotext <div class="small-7 medium-4 columns logo">和菜单<nav class="pagedMenu" role="navigation"> ，而不是在页面刷新或内容加载时剪辑一个页面到另一个页面，我正在尝试实施@Buzinas提出的这个解决方案（特别感谢）。 再多说几句：

在header.php我们有这个脚本：

<head>
    ...

    <script>
    function ajax(url, callback, method, params) {
      if (!method) method = 'GET';

      var xhr = new XMLHttpRequest();
      xhr.open(method, url);

      if (callback) xhr.addEventListener('load', function() {
        callback.call(this, xhr);
      });

      if (params) {
        params = Object.keys(params).map(function(key) {
          return encodeURIComponent(key) + '=' + encodeURIComponent(params[key]);
        }).join('&');
        xhr.send(params);
      } else {
        xhr.send();
      }
    }

    // CUSTOM AJAX CONTENT LOADING FUNCTION
    function ajaxRevslider(obj) {

        // obj.type : Post Type
        // obj.id : ID of Content to Load
        // obj.aspectratio : The Aspect Ratio of the Container / Media
        // obj.selector : The Container Selector where the Content of Ajax will be injected. It is done via the Essential Grid on Return of Content

        var content = "";

        data = {};

        data.action = 'revslider_ajax_call_front';
        data.client_action = 'get_slider_html';
        data.token = '<?php echo wp_create_nonce("RevSlider_Front"); ?>';
        data.type = obj.type;
        data.id = obj.id;
        data.aspectratio = obj.aspectratio;

        // SYNC AJAX REQUEST
        jQuery.ajax({
            type:"post",
            url:"<?php echo admin_url('admin-ajax.php'); ?>",
            dataType: 'json',
            data:data,
            async:false,
            success: function(ret, textStatus, XMLHttpRequest) {
                if(ret.success == true)
                    content = ret.data;                             
            },
            error: function(e) {
                console.log(e);
            }
        });

         // FIRST RETURN THE CONTENT WHEN IT IS LOADED !!
         return content;                         
    };

    // CUSTOM AJAX FUNCTION TO REMOVE THE SLIDER
    function ajaxRemoveRevslider(obj) {
        return jQuery(obj.selector+" .rev_slider").revkill();
    }

    document.addEventListener('DOMContentLoaded', function() {
      var main = document.querySelector('div[role=main]'),
        spinner = document.querySelector('div.sk-spinner'),
        pages = {};

      window.addEventListener('load', function() {
          toggleSpinner(false);
      });

      function toggleSpinner(b) {       
        spinner.classList[b ? 'remove' : 'add']('hidden');
        document.getElementById('wrapper').style.opacity = b ? 0 : 1;
      }

      function changePage(url, title) {
        setTimeout(function() {
          window.SITE.init();
          window.vc_js();
        }, 0);

        history.pushState({
          html: main.innerHTML,
          title: title
        }, '', url);

        toggleSpinner(false);
      }

      document.getElementById('menu-menu-2').addEventListener('click', function(e) {
        var el = e.target;

        if (el.tagName === 'A') {
          e.preventDefault();
          toggleSpinner(true);

          if (pages[el.href]) {
            main.innerHTML = '';
            main.appendChild(pages[el.href]);
            changePage(el.href);
          }
          else {
            ajax(el.href, function(xhr) {
              var frag = document.createRange().createContextualFragment(xhr.responseText);
              main.innerHTML = '<div>' + frag.querySelector('div[role=main]').innerHTML + '</div>';
              //pages[el.href] = main.firstElementChild;

              var _currentScripts = [].slice.call(document.querySelectorAll('script'));

              [].forEach.call(frag.querySelectorAll('script'), function(el, i) {
                if ((el.src === '' && el.parentNode)
                    || el.src.indexOf('slider') >= 0
                    || el.src.indexOf('Scroll') >= 0
                    || el.src.indexOf('vendor') >= 0
                    || el.src.indexOf('composer') >= 0
                   ) {
                  var s = _currentScripts.filter(function(x) {
                    return x.src === el.src;
                  });

                  while (s.length) {
                    if (s[0].parentNode)
                      s[0].parentNode.removeChild(s[0]);
                    s.shift();
                  }

                  document.body.appendChild(el);
                }
              });

              [].forEach.call(frag.querySelectorAll('style'), function(el, i) {
                document.querySelector('head').appendChild(el);
              });

              changePage(el.href, frag.querySelector('title').textContent);
            });
          }
        }
      });

      window.addEventListener('popstate', function(e) {
        if (e.state) {
          main.innerHTML = e.state.html;
          document.title = e.state.title;
        }
      });
    });
    </script>

    ...
</head>

以下jquery-ready.js在script-calls.php注册/入script-calls.php ：

(function($){
var readyList = [];

// Store a reference to the original ready method.
var originalReadyMethod = jQuery.fn.ready;

// Override jQuery.fn.ready
jQuery.fn.ready = function(){
    var args = [].slice.call(arguments);

    if(args.length && args.length > 0 && typeof args[0] === 'function') {
      readyList.push(args[0]);
    }

    // Execute the original method.
    originalReadyMethod.apply( this, args );
};

// Used to trigger all ready events
$.triggerReady = function() {
  $(readyList).each(function(i, el) {
      try {
          el.apply(el);
      } catch(e) {
          console.log(e);
      }
  });
};
})(jQuery);

另外，在page.php我替换了get_header()和get_footer()函数，如下所示：

<?php
if(!isset($_REQUEST['ajax'])){
    get_header(); 
}
?>
<?php 
    if (is_page()) {
        $id = $wp_query->get_queried_object_id();
        $sidebar = get_post_meta($id, 'sidebar_set', true);
        $sidebar_pos = get_post_meta($id, 'sidebar_position', true);
    }
?>
...

<?php
if(!isset($_REQUEST['ajax'])){
    get_footer();
}
?>

尝试加载带有 Revolution 滑块或 Visual Composer 视差内容的页面仍然存在一些问题，例如我们在视差或关于我们页面上的问题。

您可以使用此链接并导航至上述页面； 测试仅在 Chrome 45.0.2454.101 m 64-bit/Win7 中进行，尚未准备用于 IE、Firefox、移动等。

关于行为：Rev滑块视差内容，将从第二个链接访问（主页或视差页面）开始变乱； Visual Composer 视差内容（桌面上的家伙图片，例如关于我们页面）在第一次链接访问时固定 - F5 后就可以了；

菜单mynewmenu.js将记住session 上的状态，因此您必须关闭浏览器才能正确访问多个直接链接。

我收到了 Rev 滑块支持团队的答复，告诉我：

Ajax 的最佳选择是将滑块的短代码添加到常规页面/帖子，然后滑块的“init”脚本将自动包含在滑块的 HTML 中。 然后当滑块的 HTML 从 DOM 中移除时，所有 jQuery 事件也将被移除。 因此，您真正需要做的就是将滑块作为页面/帖子内容拉入，然后您就不需要专门针对滑块的任何自定义脚本。

不幸的是，我不知道如何解决这个问题，将上述建议实施到我已经收到的解决方案中。

可能与 API(?) 有关，我在Revolution 滑块/ Visual Composer页面上找到了这些信息。 有什么想法吗？

Answer 1

您可能应该阅读：

您应该使用wp_localize_script将 PHP 变量传递给您的 javascript 文件。

即使您不这样做，您也不应该仅仅为了提供特定内容而修改主页模板——创建一次性页面，然后为其制作特定模板。 然后您可以使用该页面的 URL 作为您的 ajax 端点。

但是，如果您真正需要做的是在页面以外的其他地方运行 Rev Slider 的短代码（以及视差代码，如果它也有）：

在代码中（页面模板、 functions.php等） - https://developer.wordpress.org/reference/functions/do_shortcode/
在小部件中（链接到下一个） - https://digwp.com/2010/03/shortcodes-in-widgets/
基本上无处不在 - http://stephanieleary.com/2010/02/using-shortcodes-everywhere/

Answer 2

你还需要这方面的帮助吗？ 我认为革命滑块的支持团队通过声明将其钉牢了

只需将滑块的短代码添加到常规页面/帖子

和

您真正需要做的就是将滑块作为页面/帖子内容拉入

因此，请通过简码 [简码] 使用 WordPress 页面/帖子上的滑块。 然后根据需要在 php（或 javascript，不管你在做什么）中引用 $_GET[] 和/或 $_POST[] 数组元素。

如何正确实现自定义ajax

问题描述

2 个解决方案

解决方案1
2 2016-02-18 20:53:45

解决方案2
0 2016-01-11 23:24:59

如何正确实现自定义ajax

问题描述

2 个解决方案

解决方案1 2 2016-02-18 20:53:45

解决方案2 0 2016-01-11 23:24:59

解决方案1
2 2016-02-18 20:53:45

解决方案2
0 2016-01-11 23:24:59