Javascript JQuery调用PHP函数的问题

我确信我没有以正确的方式来做这件事，但我只是在尝试找到最好的方法来完成这件事

基本上，我使用的是Wordpress，我根据主题创建了自己的主题

我有一个循环，它显示类别中的帖子

在页面的顶部，我有一个菜单，我正试图用它作为过滤器。因此，当用户单击其中一个菜单项时，它会获取该项的ID，即类别ID，然后我尝试使用JQuery将div的内容替换为新的类别

当我尝试使用AJAX加载内容时，我遇到了未定义的函数错误。因此，我尝试将循环放入functions.PHP中的PHP函数中

以下是函数：

function get_vehicle_filter() {


$f = 0;

query_posts( array('cat' => '47', 'orderby' => 'ID', 'order' => 'ASC'));
while ( have_posts() ) : the_post();

$postid = get_the_ID();                         
$site_url = get_site_url(); 
$src = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), array( 200,200 ), false, '' );                                                            

echo "<a href='$site_url/vehicles-sale-info/?post_id=$postid'>";
echo "<div class='job_image_holder'>";
echo "<img src='$src[0]' class='attachment-post-thumbnail wp-post-image' />";
echo "<div class='job_image_title'>";
the_title( "<p class='white center'>", "</p>" );
echo "</div>";
echo "</div>";
echo "</a>";

$f++;

endwhile;
wp_reset_query();

函数获取车辆过滤器（）{
$f=0；
查询帖子（数组（'cat'=>'47'，'orderby'=>'ID'，'order'=>'ASC'）；
while（have_posts（））：the_post（）；
$postid=获取_ID（）；
$site\u url=get\u site\u url（）；
$src=wp\u get\u attachment\u image\u src（get\u post\u缩略图\u id（$post->id），数组（200200），false“”）；
回声“；
$f++；
结束时；
wp_reset_query（）；

}

我用它在页面上显示循环，效果很好：

<script>
  jQuery(document).ready(function(jQuery) {
    jQuery("#filtered_vehicles").html("<?php get_vehicle_filter() ?>");
  });
</script>

jQuery（文档）.ready（函数）（jQuery）{
jQuery（“#过滤的车辆”）.html（”；
});

但是，当我试图将单击菜单项的ID放入php函数时，我失败了。这是最新版本：

    jQuery('.vehicle_filter_item').click(function() {

        // capture id from clicked button
        var filterCat = jQuery(this).attr('id');        

        jQuery('#filtered_vehicles').fadeOut('fast', function() {
             jQuery("#filtered_vehicles").html('<?php $filterCat = ' + filterCat + '; get_vehicle_filter($filterCat) ?>').fadeIn('fast');
        });             

    }); 

jQuery（'.vehicle\u filter\u item'）。单击（函数（）{
//从单击的按钮捕获id
var filterCat=jQuery（this.attr（'id'）；
jQuery（“#过滤的车辆”）.fadeOut（'fast'，function（）{
jQuery（“#过滤的车辆”）.html（“”）.fadeIn（'fast'）；
});             
}); 

我知道那是不对的，而且它显然不起作用

但我一直在分解它，看看什么是有效的，什么是无效的，如果我试图以最简单的形式调用函数，就像我在上面加载页面时所做的那样，就像下面一样，它不起作用

    jQuery('.vehicle_filter_item').click(function() {

        // capture id from clicked button
        var filterCat = jQuery(this).attr('id');        


        jQuery('#filtered_vehicles').fadeOut('fast', function() {
             jQuery("#filtered_vehicles").html('<?php get_vehicle_filter() ?>').fadeIn('fast');
        });             

    }); 

jQuery（'.vehicle\u filter\u item'）。单击（函数（）{
//从单击的按钮捕获id
var filterCat=jQuery（this.attr（'id'）；
jQuery（“#过滤的车辆”）.fadeOut（'fast'，function（）{
jQuery（“#过滤的车辆”）.html（“”）.fadeIn（'fast'）；
});             
}); 

既然这在页面加载时起作用，为什么用JQuery替换它时不起作用，完全相同的代码

谁能给我指一下正确的方向吗

---

谢谢你

PHP在服务器上执行。因此，当您提供页面时，jQuery html（）中的内容已经写入。您的函数get_vehicle_filter（）已被调用，返回的内容显示在jQuery（“#filtered_vehicles”）.html（）中

您需要做的是在click事件中，对返回get\u vehicle\u filter（）的文件进行AJAX调用。诸如此类：

jQuery('.vehicle_filter_item').click(function() {

    // capture id from clicked button
    var filterCat = jQuery(this).attr('id');  

    $.ajax({
      method: "POST",
      url: "file_that_calls_get_vehicle_filter.php",
      data: { filter: filterCat }
    })
   .done(function( result ) {
      jQuery('#filtered_vehicles').fadeOut('fast', function() {
         jQuery("#filtered_vehicles").html(result).fadeIn('fast');
    });
   });


}); 

---

希望它能让你走上正确的道路。

好的，这就是我如何让它工作的

Ajax调用：

    jQuery('.vehicle_filter_item').click(function() {

        // capture id from clicked button
        var filterCat = jQuery(this).attr('id');  

        jQuery.ajax({
          method: "POST",
          url: "ajax-functions.php",
          data: "filterCat="+ filterCat,
        })
       .done(function( result ) {
          jQuery('#filtered_vehicles').fadeOut('fast', function() {
             jQuery("#filtered_vehicles").html(result).fadeIn('fast');
        });
       });


    });     

函数：（在页面加载时调用）

---

.html（'这两个函数不是在同一台机器上运行的，它们不能“看到”对方。您必须发出AJAX请求才能访问该函数。这是一个常见的初学者错误。非常常见，我想知道您在用谷歌搜索问题时是如何没有偶然发现ti的……但这是有效的：jQuery（document）.ready（function（jQuery）{jQuery(“#已过滤车辆”）.html（“”；}）；在将PHP函数的结果发送到浏览器之前将其注入javascript代码是一回事，但这就好像你做了一个简单的文本替换。它无法调用可能在半个地球之外的服务器上的函数。查看开发工具中的实际js代码，你不会看到“get_vehicle_filter（），只有结果。这个问题正是为什么，IMHO，PHP是学习web开发的一种糟糕语言，它产生了一种错觉，认为它和javascript之间没有分离，这一点都不正确。我尝试过类似的方法，但我得到了致命的错误：调用未定义的函数query_posts（）错误，因为循环不在页面内部，它是外部的。我尝试过包含wordpress标题数据，但它仍然不起作用。我不是wordpress专家。尝试下面的链接，可能会有所帮助：它讨论了将PHP函数绑定到wordpress的Ajax处理程序

function get_vehicle_filter() {     
$f = 0;

    query_posts( array('cat' => '47', 'orderby' => 'ID', 'order' => 'ASC'));
    while ( have_posts() ) : the_post();

    $postid = get_the_ID();                         
    $site_url = get_site_url(); 
    $src = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), array( 200,200 ), false, '' );                                                            

    echo "<a href='$site_url/vehicles-sale-info/?post_id=$postid'>";
    echo "<div class='job_image_holder'>";
    echo "<img src='$src[0]' class='attachment-post-thumbnail wp-post-image' />";
    echo "<div class='job_image_title'>";
    the_title( "<p class='white center'>", "</p>" );
    echo "</div>";
    echo "</div>";
    echo "</a>";

    $f++;

    endwhile;
    wp_reset_query();

}

define('WP_USE_THEMES', false);

require_once('../../../wp-blog-header.php'); 


if($_POST['filterCat'] == "") {
    $filterCat = '47';
} else {
    $filterCat = $_POST['filterCat'];
}

$f = 0;

query_posts( array('cat' => $filterCat, 'orderby' => 'ID', 'order' => 'ASC'));
while ( have_posts() ) : the_post();

$postid = get_the_ID();                         
$site_url = get_site_url(); 
$src = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), array( 200,200 ), false, '' );                                                            

echo "<a href='$site_url/vehicles-sale-info/?post_id=$postid'>";
echo "<div class='job_image_holder'>";
echo "<img src='$src[0]' class='attachment-post-thumbnail wp-post-image' />";
echo "<div class='job_image_title'>";
the_title( "<p class='white center'>", "</p>" );
echo "</div>";
echo "</div>";
echo "</a>";

$f++;

endwhile;
wp_reset_query();   

define('WP_USE_THEMES', false);

require_once('../../../wp-blog-header.php');