只在点击时执行php函数(wordpress) - Execute php function only when clicked (wordpress)

对于我的一个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"选项卡之前不会被调用，因此浏览器不必调用不必要的文件并减慢页面速度。

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

谢谢!

虽然Raphael在他的回答中已经说明了背后的思想，但我还是要补充一些细节。

在Wordpress中使用AJAX的最佳方法是使用其内置的处理方式，并通过向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()。关于在Wordpress中使用AJAX的最佳实践，网上有很多教程(我会回来给你一个)。祝你好运

编辑:

正如Karl提到的，你可以用.load()代替ajax()，需要注意的是，.load()只是$.ajax()的一个包装。它添加了一些功能，允许您定义将返回的数据插入文档中的哪个位置。因此真正只有在调用时才可用，才会产生HTML。它的命名与其他方法略有不同，因为它是绑定到特定jquery包装的DOM元素的方法。因此，可以这样做:内部调用.ajax()的$('#divWantingContent').load(...)。

但是我最初的答案是关于如何组织php代码尊重Wordpress的最佳实践。

你不能真正从javascript调用PHP函数，因为当浏览器看到页面时，PHP已经执行(或者在你的情况下，没有执行)

要做您想做的事情，唯一的方法是将PHP函数分离到一个单独的脚本中，然后使用AJAX调用该文件。让脚本回显HTML，然后将HTML插入AJAX回调中的tab1div中。

我认为最简单的解决方案是使用jQuery load()函数。这是实现你所描述的最简单的方法。唯一的问题是，当有人点击标题时，将会延迟获得子项，因为它们还不存在(这将是您延迟加载的任何情况的情况)。

  <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
   });
})