Question

对于我的一个wordpress网站php文件，我有以下代码：

  <div class="tabs">
      <a href="#tab1" id="items_id">Items</a>
  </div>
  <div class="section" id="tab1">
    <?php get_template_part('page/tab1'); ?>            
  </div>

因此，它会将tab1.php文件调入div id="tab1"部分。

但是，我想这样做只有在get_template_part标签被点击时才会执行或调用Items。

调用或执行get_template_part函数的jQuery是什么？

修改

所以，我想要实现的是类似于Ajax。由于get_template_part函数在单击"Items"选项卡之前不会被调用，因此浏览器不必调用不必要的文件并减慢页面速度。

如果您认为这是最好的方式，请告诉我。

谢谢！

Answer 1

尽管Raphael在他的回答中已经说明了背后的想法，但我还是介入了一些细节。

使用AJAX和Wordpress的最佳方法是使用其内置的处理方式，并通过向wp-admin/admin-ajax.php发送请求（我知道文件名的“admin”部分有点误导但是前端（查看方）和管理员的所有请求都可以在admin-ajax.php中处理，有很多好处，特别是对于安全性。对于服务器端代码，php将是执行后，应将其放在functions.php。

中

您的jQuery代码如下所示：

 $(document).ready(function() {
        $('.tabs a').click(function(e) {
            e.preventDefault();

            var tab_id = $(this).attr('id'); 


            $.ajax({
                type: "GET",
                url: "wp-admin/admin-ajax.php", 
                dataType: 'html',
                data: ({ action: 'yourFunction', id: tab_id}),
                success: function(data){
                          $('#tab'+tab_id).html(data);
                },
                error: function(data)  
                {  
                alert("Error!");
                return false;
                }  

            }); 

    }); 
});

在主题的functions.php中（或直接在您的插件文件中），添加：

add_action('wp_ajax_yourFunction', 'yourFunction');
add_action('wp_ajax_nopriv_yourFunction', 'yourFunction');

并在同一个文件yourFunction中定义回调函数，如下所示：

    function yourFunction() {

// get id
    // your php code

    die();

    }

对于javascript部分，请查看ajax()及其简写get()。对于使用AJAX和Wordpress的最佳实践，网上有很多教程（我将回来给一个）。祝你好运

修改

正如Karl所提到的，您可以使用.load()代替ajax()，应该注意.load()只是$.ajax()的包装。它添加了一些功能，允许您定义文档在何处插入返回的数据。因此，实际上只有在调用只会导致HTML时才可用。它被称为与另一个略有不同，因为它是一个绑定到特定jQuery包装的DOM元素的方法。因此，可以执行：$('#divWantingContent').load(...)，内部调用.ajax()。

但我最初的答案是关于如何组织关于Wordpress best practices的PHP代码。

Answer 2

你无法从javascript中调用PHP函数，因为当浏览器看到页面时，PHP已经执行（或者在你的情况下，没有执行）

你做你想做的事的唯一方法是将PHP函数旋转到一个单独的脚本中，然后使用AJAX调用该文件。让脚本回显HTML，然后将HTML插入AJAX回调中的tab1 div。

Answer 3

我认为最简单的解决方案是使用jQuery load()函数。这是实现您所描述内容的最简单方法。唯一的问题是，当有人点击标题时，会有一个延迟来获取子项目，因为它们尚不存在（对于任何延迟加载的情况都是如此。

<强> HTML ：

  <div class="tabs">
      <a href="#tab1" id="items_id">Items</a>
  </div>
  <div class="section" id="tab1"></div>

<强> JS ：

$(function () { 
     //wait for the page to finish loading
   $('#items_id').click (function (e){
     //watch for the items header to be clicked
   e.preventDefault();
    //prevent it from opening a link
    $('#tab1').load('tab1.php');
   //load the tab1.php file, or whatever file INTO the div
   });
})

单击时执行php函数（wordpress）

3 个答案: