Ajax調用wordpress自定義頁面

Question

我在我的WordPress子主題中創建了一個自定義頁面。我在子主題函數中包含了頁面。現在我想使用Ajax從數據庫表中查看一些數據。 但它顯示相同的網頁而不是實際結果。 救命？

模板頁面代碼

<?php
    wp_enqueue_script( 'daily_food_reports', get_stylesheet_directory_uri() . '/reports/js/daily_food_reports.js', array( 'jquery' ), '1.0', true );
    wp_localize_script( 'daily_food_reports', 'daily_food_reports_obj',array( 'ajaxUrl' => admin_url( 'admin-ajax.php' ), 'we_value' => 1234 ) );
    ?>
<div id="content" class="container">
<div class="row">
    <div class="main col-md-12" role="main">
        <div class="entry-content" itemprop="mainContentOfPage">
            <?php get_template_part('templates/content', 'page'); ?>
            <div class="col-md-6 col-sm-12 form-group">
            <form method="post" action="" id="dailyfoodreports">
                 <label for=""><strong>Please Select Date</strong></label>&nbsp;&nbsp;<img id="loader" src="<?php echo get_stylesheet_directory_uri().'/images/loadingg.gif' ;?>"/>
                <input type="text" class="form-control" id="searchoption" name="searchoption" value="" readonly=""> 
                <input type="hidden" name="action" value="daily_food_reports"/>
            </form>
            </div>                      
            <div class="col-md-12 col-sm-12 table-responsive" id="searchdata"></div>
        </div>

<?php 

function daily_food_reports(){                  

    $searchvalue = $_POST['searchvalue'];

    global $wpdb;

$results = $wpdb->get_results($wpdb->prepare("SELECT * FROM daily_food_reports where reports_date = %s ",$searchvalue),ARRAY_A);


            if ($results) {
                $total_position=0;
                 $totalp = 0;
                $serial = 1;

                echo "<h2 style='text-align:center;color:green'> Reports Date = " .$searchvalue . "</h2>"; 
                echo "<table id='Tablestdresult' class='table table-bordered table-hover'>
                        <thead>
                               <tr>
                                    <th>#</th>
                                    <th> প্রকোষ্ট </th>
                                    <th> সংখ্যা </th>
                               </tr>
                        </thead>                    
                        ";

                foreach ($results as $key => $value) {
                    $id = $value['id'];
                    $totalp+= $value['patient_number'];

                    echo"<tr>";
                    echo "<td>" . $serial++ . "</td>";
                    echo "<td class=''>" . $value['prakasta_no'] . "</td>";
                    echo "<td class=''>" . $value['patient_number'] . "</td>";
                    echo " <a data-toggle='tooltip' class='btn btn-danger deleteinformation'  id='" . $id . "'  title='Delete'> <i class='fa fa-trash'></i> </a></td>";
                    echo"</tr>";
                }
                echo"</tbody>";
                echo"<tfoot>
                    <tr>
                    <td>#</td>
                    <td>মোট </td>
                    <td style='font-weight:bold;color:green;text-align:'> $totalp </td>
                    </tr>
                 <tr>
                    <th>#</th>
                    <th> প্রকোষ্ট </th>
                    <th> সংখ্যা </th>
                </tr>
                 </tfoot>";
                echo"</table>";
                echo"<li class='btn btn-primary'> Records Found  <span class='badge'> $total </span></li>";
            } else {
                echo "<br/><br/><br/><br/><div class='alert alert-danger fade in alert-dismissable'><i class='icon fa fa-warning'></i> Sorry no Records have found of that selected Date </div> ";
            }

    }
add_action('wp_ajax_daily_food_reports', 'daily_food_reports');
add_action('wp_ajax_nopriv_daily_food_reports', 'daily_food_reports'); // not really need

?>

我的Ajax代碼是

jQuery(document).ready(function () {
//  alert();
                    jQuery('#loader').hide();
                    jQuery('#searchoption').datepicker({
                        dateFormat : 'yy-mm-dd'
                    }).on('change', function (ev) {

                        var searchdata = jQuery(this).val();
                      //  alert(searchdata);
                        jQuery.ajax({
                            url:daily_food_reports_obj.ajax_url,
                            type: 'POST',
                            //dataType: 'json',
                            data: 'searchvalue=' + searchdata,
                            beforeSend: function () {
                                // setting a timeout
                                jQuery('#loader').show();
                            },
                            success: function (data) {
                                jQuery('#loader').hide();
                                jQuery("#searchdata").html(data);
                            }
                        });
                    });
                });

Answer 1

替換類型：'POST'方法：'POST'。檢查控制台是否有錯誤。

Answer 2

我想你錯過了ajax調用中的ajax動作參數。

jQuery.ajax({
    url:daily_food_reports_obj.ajax_url,
    action : 'daily_food_reports',
    type: 'POST',
    //dataType: 'json',
    data: 'searchvalue=' + searchdata,

    beforeSend: function () {
    // setting a timeout
    jQuery('#loader').show();
    },
    success: function (data) {
            jQuery('#loader').hide();
            jQuery("#searchdata").html(data);
        }
    });