php - 导航选项卡的 AJAX/jQuery 用法

Question

我想在我的 Wordpress 主题的管理页面中实现 AJAX。我似乎快到了，但不知何故我走错了类(class)。

请查看带有提供的类标签的屏幕截图:

这是正在发生的事情:

1. 我单击“外观”>“站点选项”，页面正确显示为单页选项

2. 我点击顶部导航选项卡之一，页面正确淡出。

3. 当页面淡入时 - 它看起来像下面的第二个屏幕截图。

这是当前处理请求的代码:

 jQuery('.nav-tab').live('click', function(e){ 
     e.preventDefault();
     var link = jQuery(this).attr('href'); //Get the href attribute
 jQuery('.page-form').fadeOut(500, function(){ //fade out the content area
 jQuery("#loader").show(); // show the loader animation
    }).load(link + '.page-form', function(){ jQuery('.page-form').fadeIn(500, function(){ 
 jQuery("#loader").hide(); //hide the loader
   });
  });
 });

所以我只需要知道如何在呈现的内容中只显示“页面表单”类，而不是整个 wordpress 管理区域。

Answer 1

您在 AJAX 请求中加载整个页面(如 Bence 所述)并在服务器端修改响应是最好的选择，但是，它是可以使用 jQuery 解决这个问题；

jQuery('.nav-tab').on('click', function(e){ 
    e.preventDefault();
    jQuery('.page-form').load(jQuery(this).attr('href') + ' .page-form');
});

这应该从点击链接的位置加载 url 并从结果中提取类为“.page-form”的元素，并用其内容替换“.page-form”选择的元素。然而；

• 确保 url 和选择器('.page-form')之间存在 [空格]，代码中缺少空格
• 使用“类”作为选择器可能会返回多个元素，我不确定在选择多个元素的情况下结果会是什么

请参阅此处的文档: http://api.jquery.com/load/

注意:您在代码中使用了 jQuery.live() ，自 jQuery 1.7 ( http://api.jquery.com/live/ ) 起已弃用。你可能想重写你的代码并使用 jQuery.on() 作为它的替代品(http://api.jquery.com/on/)