AJAX调用在插件中不起作用

时间：2020-10-16 作者：IT-AMGABAlgarve

我一直在使用WP开发一个网站，并在网站前端显示一些数据库信息，我创建了一个插件。现在我想使用插件为相同的信息包含一个过滤功能，但它不起作用。

这是我创建过滤器的文件，名为show.php

<div class="container">
    <div class="row">
        <br />
        <div class="col-md-3">                              
            <div class="list-group">
                <h6>Modo de Confeção</h6>
                <div style="height: 180px; overflow-y: auto; overflow-x: hidden;">
                <?php

                $query =  "SELECT * FROM win_gab_modo_confecao ORDER BY designacaoModoConfecao";
                $result = $wpdb->get_results($query);
                foreach($result as $row)
                {
                ?>
                <div class="list-group-item checkbox" style="font-size: 14;">
                    <label><input type="checkbox" class="common_selector modoconf" value="<?php echo $row->idModoConfecao ?>"  > <?php echo $row->designacaoModoConfecao ?></label>
                </div>
                <?php
                }

                ?>
                </div>
            </div><br>

            <div class="list-group">
            <h6>Modo de Serviço</h6>
                <div style="overflow-y: auto; overflow-x: hidden;">
                <?php

                $query2 =  "SELECT * FROM win_gab_modo_servico ORDER BY designacaoModoServico";
                $result2 = $wpdb->get_results($query2);
                foreach($result2 as $row2)
                {
                ?>
                <div class="list-group-item checkbox" style="font-size: 14;">
                    <label><input type="checkbox" class="common_selector modoserv" value="<?php echo $row2->idModoServico ?>"  > <?php echo $row2->designacaoModoServico ?></label>
                </div>
                <?php
                }

                ?>
                </div>

            </div><br>
            
            <div class="list-group">
            <h6>Sub Categoria 1</h6>
                <div style="height: 180px; overflow-y: auto; overflow-x: hidden;">
                <?php

                $query3 =  "SELECT * FROM win_gab_sub_categorias WHERE subCategoria1 = \'1\' ORDER BY designacaoSubCategoria";
                $result3 = $wpdb->get_results($query3);
                foreach($result3 as $row3)
                {
                ?>
                <div class="list-group-item checkbox"  style="font-size: 14;">
                    <label><input type="checkbox" class="common_selector sub1" value="<?php echo $row3->idSubCategoria ?>"  > <?php echo $row3->designacaoSubCategoria ?></label>
                </div>
                <?php
                }
                ?>  
                </div>

            </div><br>

        
            <div class="list-group">
            <h6>Sub Categoria 2</h6>
                <div style="height: 180px; overflow-y: auto; overflow-x: hidden;">
                <?php

                $query3 =  "SELECT * FROM win_gab_sub_categorias WHERE subCategoria2 = \'1\' ORDER BY designacaoSubCategoria";
                $result3 = $wpdb->get_results($query3);
                foreach($result3 as $row3)
                {
                ?>
                <div class="list-group-item checkbox"  style="font-size: 14;">
                    <label><input type="checkbox" class="common_selector sub2" value="<?php echo $row3->idSubCategoria ?>"  > <?php echo $row3->designacaoSubCategoria ?></label>
                </div>
                <?php
                }
                ?>  
            </div>
        </div>

        <div class="col-md-9">
            <br />
            <div class="row filter_data">
            </div>
        </div>
    </div>
</div>
我认为，问题就在这之后。我们开始JS指令，它将调用插件目录中的一个文件，名为fetch_data.php.

    $(document).ready(function(){

filter_data();

function filter_data()
{
    $(\'.filter_data\').html(\'<div id="loading" style="" ></div>\');
    var action = \'fetch_data\';
    var minimum_price = $(\'#hidden_minimum_price\').val();
    var maximum_price = $(\'#hidden_maximum_price\').val();
    var modoconf = get_filter(\'modoconf\');
    var modoserv = get_filter(\'modoserv\');
    var sub1 = get_filter(\'sub1\');
    var sub2 = get_filter(\'sub2\');


    $.ajax({
        url:"fetch_data.php",
        method:"POST",
        data:{action:action, minimum_price:minimum_price, maximum_price:maximum_price, modoconf:modoconf, modoserv:modoserv, sub1:sub1, sub2:sub2},
        success:function(data){
            $(\'.filter_data\').html(data);
        }
    });
}

function get_filter(class_name)
{
    var filter = [];
    $(\'.\'+class_name+\':checked\').each(function(){
        filter.push($(this).val());
    });
    return filter;
}

$(\'.common_selector\').click(function(){
    filter_data();
});

$(\'#price_range\').slider({
    range:true,
    min:1000,
    max:65000,
    values:[1000, 65000],
    step:500,
    stop:function(event, ui)
    {
        $(\'#price_show\').html(ui.values[0] + \' - \' + ui.values[1]);
        $(\'#hidden_minimum_price\').val(ui.values[0]);
        $(\'#hidden_maximum_price\').val(ui.values[1]);
        filter_data();
    }
});
}）；

根据此代码，它调用fetch_data.php 就像我上面提到的：

global $wpdb;

if(isset($_POST["action"]))
{
    $query = "
        SELECT * FROM win_gab_ficha_tecnica WHERE idFichaTecnica != \'0\' 
    ";
    if(isset($_POST["modoconf"]))
    {
        $conf_filter = implode("\',\'", $_POST["modoconf"]);
        $query .= "
         AND modoConfecaoFichaTecnica IN(\'".$conf_filter."\')
        ";
    }
   
    if(isset($_POST["modoserv"]))
    {
        $serv_filter = implode("\',\'", $_POST["modoserv"]);
        $query .= "
         AND modoServicoFichaTecnica IN(\'".$serv_filter."\')
        ";
    }
    
    if(isset($_POST["subcat1"]))
    {
        $subcat1_filter = implode("\',\'", $_POST["subcat1"]);
        $query .= "
         AND subCategoria1 IN(\'".$subcat1_filter."\')
        ";
    }
    
    if(isset($_POST["subcat2"]))
    {
        $subcat2_filter = implode("\',\'", $_POST["subcat2"]);
        $query .= "
        AND subCategoria2 IN(\'".$subcat2_filter."\')
        ";
    }
    
$result = $wpdb->get_results($query);
$total_row = $wpdb->rowCount();
    $output = \'\';
    if($total_row > 0)
    {
        foreach($result as $row)
        {
            

    $output .= \'
                <div class="col-sm-4 col-lg-3 col-md-3">
                    <div style="border:1px solid #ccc; border-radius:5px; padding:16px; margin-bottom:16px; height:450px;">
                        <img src="image/\'. $row[\'fotografiaFichaTecnica\'] .\'" alt="" class="img-responsive" >
                        <p align="center"><strong><a href="#">\'. $row[\'nomeFichaTecnica\'] .\'</a></strong></p>
                        <p>Modo Confeção: \'. $row[\'modoConfecaoFichaTecnica\'].\' MP<br />
                        Modo Serviço: \'. $row[\'modoServicoFichaTecnica\'] .\' <br />
                        Sub-Categoria 1: \'. $row[\'subCategoria1\'] .\' GB<br />
                        Sub-Categoria 2: \'. $row[\'subCategoria2\'] .\' GB </p>
                    </div>
    
                </div>
                \';
            }
        }
        else
        {
            $output = \'<h3>No Data Found</h3>\';
        }
        echo $output;
    }
我们在插件文件中对排队脚本和所有这些东西都有正确的调用。当我们加载wordpress页面时，该信息应该显示在该页面上，过滤根本不起作用，我们得到以下控制台错误：

jquery-1.10.2.min.js?ver=1.0:4 POST http://itamgabalgarve.pt/page-comidas/fetch_data.php 404 (Not Found)
此外，正如我前面提到的，这是一个插件，它在我们定制的主题中显示信息。页面（在主题中）包含一个调用插件并显示我们信息的函数：

if (function_exists(get_comidas()))

2 个回复
SO网友:Rajat Sharma

您需要在插件文件或主题函数上添加ajax回调操作。php如下所示：

add_action( \'wp_ajax_fetch_data\', \'fetch_data_callback\' );
add_action( \'wp_ajax_nopriv_fetch_data\', \'fetch_data_callback\' );
然后您需要放置所有featch\\u数据。回调函数“fetch\\u data\\u callback”中的php代码如下：

function fetch_data_callback(){
//your function code goes here
wp_die() // need to add end of the function
}
在Jquery中

 var action = \'fetch_data\';

 $.ajax({
        url:"<?php echo admin_url( \'admin-ajax.php\' ) ?>",
        method:"POST",
        data:{action:action, minimum_price:minimum_price, maximum_price:maximum_price, modoconf:modoconf, modoserv:modoserv, sub1:sub1, sub2:sub2},
        success:function(data){
            $(\'.filter_data\').html(data);
        }
    });

SO网友:IT-AMGABAlgarve

感谢您的回复，但我的代码仍然无法工作。在这一点上，我真的不知道该怎么做，我一直在做一些测试，但似乎都没有起作用。为上下文提供一些附加代码：

中的ajax调用show.php 当前文件如下所示：

<script>
$(document).ready(function(){

filter_data();

function filter_data()
{
    $(\'.filter_data\').html(\'<div id="loading" style="" ></div>\');
    var action = \'fetch_data\';
    var modoconf = get_filter(\'modoconf\');
    var modoserv = get_filter(\'modoserv\');
    var sub1 = get_filter(\'sub1\');
    var sub2 = get_filter(\'sub2\');
    $.ajax({
   url:"<?php echo admin_url( \'admin-ajax.php\' ) ?>",
   method:"POST",
   data:{action:action, modoconf:modoconf, modoserv:modoserv, sub1:sub1, sub2:sub2},
   success:function(data){
       $(\'.filter_data\').html(data);
   }
   });
}

function get_filter(class_name)
{
    var filter = [];
    $(\'.\'+class_name+\':checked\').each(function(){
        filter.push($(this).val());
    });
    return filter;
}

$(\'.common_selector\').click(function(){
    filter_data();
});

});
尽管我已经完成了suggeste之类的所有操作，但在我的主题中的插件文件或函数文件中仍然出现以下错误：

jquery-1.10.2.min.js?ver=1.0:4 POST http://itamgabalgarve.pt/wp-admin/admin-ajax.php 500 (Internal Server Error)

send @ jquery-1.10.2.min.js?ver=1.0:4
ajax @ jquery-1.10.2.min.js?ver=1.0:4
filter_data @ (index):323
(anonymous) @ (index):313
i @ jquery.min.js:2
fireWith @ jquery.min.js:2
ready @ jquery.min.js:2
K @ jquery.min.js:2
如果你需要更多的代码，请告诉我。谢谢

标签： plugins   themes   ajax   javascript   jquery   小码农  

相关推荐

无法在AJAX函数内使用WP_QUERY搜索帖子

WP\\u查询用于通过它提供的简单参数获取帖子。WordPress为搜索提供了一个名为“s”的参数。它基本上搜索所有帖子的内容，并在任何地方列出带有该字符串的帖子。还有另一个WP\\u查询参数，称为post\\u status，可用于筛选帖子，其中Post_Status请注意，此代码包含在AJAX函数中。我正在从前端调用一个AJAX函数，该函数将当前页面的url传递给$_POST[\'url\']. $_POST[\'url\'] 已定义，请不要担心。我希望查询只有草稿帖子，如果url有；草稿/quot；