仅在单击时执行 php 函数（wordpress）答案

【问题标题】：Execute php function only when clicked (wordpress)仅在单击时执行 php 函数（wordpress）
【发布时间】：2015-07-10 03:27:07
【问题描述】：

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

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

谢谢！

【问题讨论】：

jQuery AJAX: api.jquery.com/jquery.ajax

标签： php jquery ajax wordpress

【解决方案1】：

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

在 Wordpress 中使用 AJAX 的最佳方式是使用其内置的处理方式，通过向wp-admin/admin-ajax.php发送请求（我知道文件名的“admin”部分有点误导。但是前端（查看端）和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 元素的方法。因此，可以这样做：$('#divWantingContent').load(...) 内部调用 .ajax()。

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

【讨论】：

谢谢。我会试试这个，然后回复你。 =)
感谢您的回答！一次编辑，您需要在您的 url 添加一个斜杠，以便请求从每个页面正确播放。 url: "/wp-admin/admin-ajax.php"

【解决方案2】：

您不能真正从 javascript 调用 PHP 函数，因为当浏览器看到该页面时，PHP 已经执行（或者在您的情况下，未执行）

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

【讨论】：

感谢您的回复。你能告诉我或给我一个例子吗？我不完全理解如何实现这一目标。（我想我明白为什么它不起作用，但我不能 100% 确定如何实现您的建议）。
另外两个答案其实都有很好的代码示例。我不会添加更多噪音，只是推荐这两个中的任何一个:)

【解决方案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
   });
})

【讨论】：