如何在 Wordpress 中从 jQuery 调用 php 函数答案

【问题标题】：How to call the php function from the jQuery in Wordpress如何在 Wordpress 中从 jQuery 调用 php 函数
【发布时间】：2020-09-26 13:48:51
【问题描述】：

我在我的页面上显示类别下拉列表，我必须调用 latestBlogView() 函数的 onChange 事件。

我所有的代码都在function.php页面中。

我需要使用 AJAX 吗？
可以不用 AJAX 吗？

我必须调用这个函数

function latestBlogView($atts){
    var_dump($atts);
    $postData=$atts; // this code is for testing i have to use WP_Query here
    return $postData; 
}
add_shortcode( 'latestblogs', 'latestBlogView');

在我的页面上显示 dropdonw

function categoriesDropdown(){
$categories = get_categories( array(
    'orderby' => 'name',
    'order'   => 'ASC',
    'taxonomy' => 'blogs_cat',
) );
 $output='';
 $output.='<select name="catDropdown" id="catDropdown">';
foreach( $categories as $category ) {
    $output.='<option value="'.$category->term_id.'">'.$category->name.'</option>'; 
}
    $output.='</select>';
    $output.='<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" crossorigin="anonymous"></script><script>(function($){$("#catDropdown").change(function() {
    var value=$("#catDropdown").val();
    latestBlogView(value); // calling function here
    });
    })(jQuery)</script>';
    return $output;
}
add_shortcode( 'showCategoryList', 'categoriesDropdown');

【问题讨论】：

是的，您需要 ajax，因为您需要在选择选项时监听事件 - 我正在为您准备答案。另外，当您选择一个选项时，当latestBlogView 被调用时，您会怎么做？您是否将所有这些shortcodes 添加到一页上。
@AlwaysHelping，实际上在页面加载时我必须运行这个函数 latestBlogView() 但是当用户从下拉列表中选择时，我必须将值传递给这个函数并获取输出和显示。
@AlwaysHelping，两天前我问了一个问题。 stackoverflow.com/questions/64042866/… 所以我必须解决这个问题。这是我问题的一小部分。你会在那里得到我的全部代码
但是当用户从下拉列表中选择时，我必须将值传递给该函数并获取输出和显示 - 这非常令人困惑，而不是短代码将如何工作。例如：如果您在页面上有 categoriesDropdown 短代码，然后用户选择一个选项 ajax 将在此功能上调用 latestBlogView - 您将不会在同一页面上看到更新的数据。短代码是一个静态的东西，当你可以调用它时它不会被更新。短代码在页面上运行。这有意义吗？
是的，您发布的答案就是我要发布的内容，我在我的 cmets 中说了同样的话，您需要通过 ajax 显示数据成功返回 $("#latestblogs").html(data); 已经在这样做 - 这是最好和正确的方法。所以我猜这个问题现在已经解决了。

标签： javascript php jquery wordpress plugins

【解决方案1】：

我尝试使用 ajax，它正在工作。我不知道这是不是最好的方法，但它解决了我的问题。

我使用的是jquery-3.5.1.slim.min.js，所以我更改了它，因为我在控制台$.ajax is not a function 中收到错误。

我试过下面的ajax代码

$output.='<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js" crossorigin="anonymous"></script><script>     
(function($) {  // ready handler
$("#catDropdown").change(function() {
     $.ajax({
        url: "/wp-admin/admin-ajax.php",
        type: "post",
        data: { action: "latestBlogView", keyword: $("#catDropdown").val() },
        success: function(data) {
            $("#latestblogs").html(data);
        }
    });
    });
    })(jQuery);</script>';

这是我的功能

add_action('wp_ajax_nopriv_latestBlogView', 'latestBlogView');
add_action('wp_ajax_latestBlogView', 'latestBlogView');

function latestBlogView($atts){
echo "hello"; // if you want to display the variable output on screen then use return $postData; 
}

【讨论】：