如何正确实现自定义ajax

时间:2015-10-12 18:14:36

标签: javascript php jquery ajax wordpress

为了保留logotext var dynamicParameters = new DynamicParameters(); dynamicParameters.Add("PersonList", <DataTable PersonList>); dynamicParameters.Add("TestOutput", 0, Dbtype.Int32, ParameterDirection.Output); 和菜单<div class="small-7 medium-4 columns logo">,无需剪辑页面刷新或内容从页面加载到另一个页面,我正在尝试实现此解决方案{ {3}}(特别感谢)。再说几句话:

<nav class="pagedMenu" role="navigation">我们有这个脚本:

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

另外,在(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.phpget_header()函数替换为如下:

get_footer()

尝试使用Revolution滑块或Visual Composer Parallax内容加载页面时仍然存在一些问题,例如我们在 Parallax 关于我们页面上。

您可以@Buzinas并导航到上述页面;测试仅在Chrome 45.0.2454.101 m 64-bit / Win7中进行,尚未为IE,Firefox,移动设备等做好准备。

关于行为: Rev滑块视差内容将从第二次链接访问( Home Parallax 页面)变为扰乱; Visual Composer视差内容(桌面图片中的人,例如关于我们页面)在第一次链接访问时被修复 - 在F5之后会很好;

菜单use this link将记住会话中的状态,因此您必须关闭浏览器才能正常访问多个直接链接。

我收到了Rev滑块支持团队的回复,告诉我:

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

不幸的是,我不知道如何处理这个问题,将上述消息实施到我已经收到的解决方案中。

可能是与API相关的内容(?)我在mynewmenu.js / Revolution slider页面上找到了这些信息。有什么想法吗?

2 个答案:

答案 0 :(得分:2)

您应该阅读:

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

即使您不这样做,也不需要破解主页面模板只是为了提供特定内容 - 创建一次性页面,然后make a specific template for it。然后,您可以将该页面的URL用作ajax端点。

但是,如果您真正需要做的是运行Rev Slider的短代码(以及Parallax的东西,如果它也有一个),除了页面之外的其他地方:

答案 1 :(得分:0)

你还需要帮助吗?我认为革命滑块的支持团队用语句

来确定它
  

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

即可

  

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

因此,使用WordPress页面上的滑块/通过短代码[短代码]发布。然后根据需要在php中引用$ _GET []和/或$ _POST []数组元素(或javascript,但是你正在这样做)。